$.extend($.fn.datagrid.defaults, { rowHeight: 25, maxDivHeight: 10000000, maxVisibleHeight: 15000000, deltaTopHeight: 0, onBeforeFetch: function(page){}, onFetch: function(page, rows){}, loader: function(param, success, error){ var opts = $(this).datagrid('options'); if (!opts.url) return false; if (opts.view.type == 'scrollview'){ param.page = param.page || 1; param.rows = param.rows || opts.pageSize; } $.ajax({ type: opts.method, url: opts.url, data: param, dataType: 'json', success: function(data){ success(data); }, error: function(){ error.apply(this, arguments); } }); } }); $.extend($.fn.datagrid.defaults.finder, { getRow: function(target, p){ // p can be row index or tr object var index = (typeof p == 'object') ? p.attr('datagrid-row-index') : p; var data = $.data(target, 'datagrid').data; var opts = $(target).datagrid('options'); if (opts.view.type == 'scrollview'){ if (index < data.firstRows.length){ return data.firstRows[index]; } else { index -= opts.view.index; } } return data.rows[index]; }, getRows:function(_24a){ return $(_24a).datagrid("getRows"); } }); var scrollview = $.extend({}, $.fn.datagrid.defaults.view, { type: 'scrollview', index: 0, r1: [], r2: [], rows: [], render: function(target, container, frozen){ var state = $.data(target, 'datagrid'); var opts = state.options; var rows = this.rows || []; if (!rows.length) { return; } var fields = $(target).datagrid('getColumnFields', frozen); if (frozen){ if (!(opts.rownumbers || (opts.frozenColumns && opts.frozenColumns.length))){ return; } } var index = this.index; var table = ['
', '']; for(var i=0; i'); table.push(this.renderRow.call(this, target, fields, frozen, index, rows[i])); table.push(''); // render the detail row if (opts.detailFormatter){ table.push(''); if (frozen){ table.push(''); table.push(''); } index++; } table.push('
'); } else { table.push(''); } table.push('
'); if (frozen){ table.push(' '); } else { table.push(opts.detailFormatter.call(target, index, rows[i])); } table.push('
'); table.push('
'); table.push('
'); $(container).html(table.join('')); }, renderRow: function(target, fields, frozen, rowIndex, rowData){ var opts = $.data(target, 'datagrid').options; var cc = []; if (frozen && opts.rownumbers){ var rownumber = rowIndex + 1; // if (opts.pagination){ // rownumber += (opts.pageNumber-1)*opts.pageSize; // } cc.push('
'+rownumber+'
'); } for(var i=0; i'); if (col.checkbox){ style = ''; } else if (col.expander){ style = "text-align:center;height:16px;"; } else { style = styleValue; if (col.align){style += ';text-align:' + col.align + ';'} if (!opts.nowrap){ style += ';white-space:normal;height:auto;'; } else if (opts.autoRowHeight){ style += ';height:auto;'; } } cc.push('
'); if (col.checkbox){ cc.push(''); } else if (col.expander) { //cc.push('
'); cc.push(''); //cc.push('
'); } else if (col.formatter){ cc.push(col.formatter(value, rowData, rowIndex)); } else { cc.push(value); } cc.push('
'); cc.push(''); } } return cc.join(''); }, bindEvents: function(target){ var state = $.data(target, 'datagrid'); var dc = state.dc; var opts = state.options; var body = dc.body1.add(dc.body2); var clickHandler = ($.data(body[0],'events')||$._data(body[0],'events')).click[0].handler; body.unbind('click').bind('click', function(e){ var tt = $(e.target); var tr = tt.closest('tr.datagrid-row'); if (!tr.length){return} if (tt.hasClass('datagrid-row-expander')){ var rowIndex = parseInt(tr.attr('datagrid-row-index')); if (tt.hasClass('datagrid-row-expand')){ $(target).datagrid('expandRow', rowIndex); } else { $(target).datagrid('collapseRow', rowIndex); } $(target).datagrid('fixRowHeight'); } else { clickHandler(e); } e.stopPropagation(); }); }, onBeforeRender: function(target){ var state = $.data(target, 'datagrid'); var opts = state.options; var dc = state.dc; var view = this; opts._emptyMsg = opts.emptyMsg; // store the emptyMsg value opts.emptyMsg = ''; // erase it to prevent from displaying it state.data.firstRows = state.data.rows; state.data.rows = []; dc.body1.add(dc.body2).empty(); this.rows = []; // the rows to be rendered this.r1 = this.r2 = []; // the first part and last part of rows init(); createHeaderExpander(); function init(){ var pager = $(target).datagrid('getPager'); pager.each(function(){ $(this).pagination('options').onSelectPage = function(pageNum, pageSize){ opts.pageNumber = pageNum || 1; opts.pageSize = pageSize; pager.pagination('refresh',{ pageNumber:pageNum, pageSize:pageSize }); $(target).datagrid('gotoPage', opts.pageNumber); }; }); // erase the onLoadSuccess event, make sure it can't be triggered state.onLoadSuccess = opts.onLoadSuccess; opts.onLoadSuccess = function(){}; if (!opts.remoteSort){ var onBeforeSortColumn = opts.onBeforeSortColumn; opts.onBeforeSortColumn = function(name, order){ var result = onBeforeSortColumn.call(this, name, order); if (result == false){ return false; } state.data.rows = state.data.firstRows; } } dc.body2.unbind('.datagrid'); setTimeout(function(){ dc.body2.unbind('.datagrid').bind('scroll.datagrid', function(e){ if (state.onLoadSuccess){ opts.onLoadSuccess = state.onLoadSuccess; // restore the onLoadSuccess event state.onLoadSuccess = undefined; } if (view.scrollTimer){ clearTimeout(view.scrollTimer); } view.scrollTimer = setTimeout(function(){ view.scrolling.call(view, target); }, 50); }); dc.body2.triggerHandler('scroll.datagrid'); }, 0); } function createHeaderExpander(){ if (!opts.detailFormatter){return} var t = $(target); var hasExpander = false; var fields = t.datagrid('getColumnFields',true).concat(t.datagrid('getColumnFields')); for(var i=0; i
'); if ($('tr',t).length == 0){ td.wrap('').parent().appendTo($('tbody',t)); } else if (opts.rownumbers){ td.insertAfter(t.find('td:has(div.datagrid-header-rownumber)')); } else { td.prependTo(t.find('tr:first')); } } setTimeout(function(){ view.bindEvents(target); },0); } }, onAfterRender: function(target){ $.fn.datagrid.defaults.view.onAfterRender.call(this, target); var dc = $.data(target, 'datagrid').dc; var footer = dc.footer1.add(dc.footer2); footer.find('span.datagrid-row-expander').css('visibility', 'hidden'); }, scrolling: function(target){ var state = $.data(target, 'datagrid'); var opts = state.options; var dc = state.dc; if (opts.finder.getRows(target) && !opts.finder.getRows(target).length){ this.reload.call(this, target); } else { if (!dc.body2.is(':visible')){return} var headerHeight = dc.view2.children('div.datagrid-header').outerHeight(); var topDiv = dc.body2.children('div.datagrid-btable-top'); var bottomDiv = dc.body2.children('div.datagrid-btable-bottom'); if (!topDiv.length || !bottomDiv.length){return;} var top = topDiv.position().top + topDiv._outerHeight() - headerHeight; var bottom = bottomDiv.position().top - headerHeight; top = Math.floor(top); bottom = Math.floor(bottom); if (top > dc.body2.height() || bottom < 0){ this.reload.call(this, target); } else if (top > 0){ var page = Math.floor(this.index/opts.pageSize); this.getRows.call(this, target, page, function(rows){ this.page = page; this.r2 = this.r1; this.r1 = rows; this.index = (page-1)*opts.pageSize; this.rows = this.r1.concat(this.r2); this.populate.call(this, target); }); } else if (bottom < dc.body2.height()){ if (state.data.rows.length+this.index >= state.data.total){ return; } var page = Math.floor(this.index/opts.pageSize)+2; if (this.r2.length){ page++; } this.getRows.call(this, target, page, function(rows){ this.page = page; if (!this.r2.length){ this.r2 = rows; } else { this.r1 = this.r2; this.r2 = rows; this.index += opts.pageSize; } this.rows = this.r1.concat(this.r2); this.populate.call(this, target); }); } } }, reload: function(target){ var state = $.data(target, 'datagrid'); var opts = state.options; var dc = state.dc; var top = $(dc.body2).scrollTop() + opts.deltaTopHeight; var index = Math.floor(top/opts.rowHeight); var page = Math.floor(index/opts.pageSize) + 1; this.getRows.call(this, target, page, function(rows){ this.page = page; this.index = (page-1)*opts.pageSize; this.rows = rows; this.r1 = rows; this.r2 = []; this.populate.call(this, target); dc.body2.triggerHandler('scroll.datagrid'); }); }, getRows: function(target, page, callback){ var state = $.data(target, 'datagrid'); var opts = state.options; var index = (page-1)*opts.pageSize; // if possible display the empty message opts.emptyMsg = opts._emptyMsg; if (this.setEmptyMsg){ this.setEmptyMsg(target); } if (index < 0){return} if (opts.onBeforeFetch.call(target, page) == false){return;} var rows = state.data.firstRows.slice(index, index+opts.pageSize); if (rows.length && (rows.length==opts.pageSize || index+rows.length==state.data.total)){ opts.onFetch.call(target, page, rows); callback.call(this, rows); } else { var param = $.extend({}, opts.queryParams, { page: page, rows: opts.pageSize }); if (opts.sortName){ $.extend(param, { sort: opts.sortName, order: opts.sortOrder }); } if (opts.onBeforeLoad.call(target, param) == false) return; $(target).datagrid('loading'); var result = opts.loader.call(target, param, function(data){ $(target).datagrid('loaded'); var data = opts.loadFilter.call(target, data); opts.onFetch.call(target, page, data.rows); if (data.rows && data.rows.length){ callback.call(opts.view, data.rows); } else { opts.onLoadSuccess.call(target, data); } }, function(){ $(target).datagrid('loaded'); opts.onLoadError.apply(target, arguments); }); if (result == false){ $(target).datagrid('loaded'); if (!state.data.firstRows.length){ opts.onFetch.call(target, page, state.data.firstRows); opts.onLoadSuccess.call(target, state.data); } } } }, populate: function(target){ var state = $.data(target, 'datagrid'); var opts = state.options; var dc = state.dc; var rowHeight = opts.rowHeight; var maxHeight = opts.maxDivHeight; if (this.rows.length){ opts.view.render.call(opts.view, target, dc.body2, false); opts.view.render.call(opts.view, target, dc.body1, true); var body = dc.body1.add(dc.body2); var topDiv = body.children('div.datagrid-btable-top'); var bottomDiv = body.children('div.datagrid-btable-bottom'); var topHeight = this.index * rowHeight; var bottomHeight = state.data.total*rowHeight - this.rows.length*rowHeight - topHeight; fillHeight(topDiv, topHeight); fillHeight(bottomDiv, bottomHeight); state.data.rows = this.rows; var spos = dc.body2.scrollTop() + opts.deltaTopHeight; if (topHeight > opts.maxVisibleHeight){ opts.deltaTopHeight = topHeight - opts.maxVisibleHeight; fillHeight(topDiv, topHeight - opts.deltaTopHeight); } else { opts.deltaTopHeight = 0; } if (bottomHeight > opts.maxVisibleHeight){ fillHeight(bottomDiv, opts.maxVisibleHeight); } else if (bottomHeight == 0){ var lastCount = state.data.total % opts.pageSize; if (lastCount){ fillHeight(bottomDiv, dc.body2.height() - lastCount * rowHeight); } } // removed $(target).datagrid('setSelectionState'); dc.body2.scrollTop(spos - opts.deltaTopHeight); opts.pageNumber = this.page; var pager = $(target).datagrid('getPager'); if (pager.length){ var popts = pager.pagination('options'); var displayMsg = popts.displayMsg; var msg = displayMsg.replace(/{from}/, this.index+1); msg = msg.replace(/{to}/, this.index+this.rows.length); pager.pagination('refresh', { pageNumber: this.page, displayMsg: msg }); popts.displayMsg = displayMsg; } if (this.setEmptyMsg){ this.setEmptyMsg(target); } opts.onLoadSuccess.call(target, { total: state.data.total, rows: this.rows }); } function fillHeight(div, height){ var count = Math.floor(height/maxHeight); var leftHeight = height - maxHeight*count; if (height < 0){ leftHeight = 0; } var cc = []; for(var i=0; i'); } cc.push('
'); $(div).html(cc.join('')); } }, updateRow: function(target, rowIndex, row){ var opts = $.data(target, 'datagrid').options; var rows = $(target).datagrid('getRows'); var rowData = opts.finder.getRow(target, rowIndex); var oldStyle = _getRowStyle(rowIndex); $.extend(rowData, row); var newStyle = _getRowStyle(rowIndex); var oldClassValue = oldStyle.c; var styleValue = newStyle.s; var classValue = 'datagrid-row ' + (rowIndex % 2 && opts.striped ? 'datagrid-row-alt ' : ' ') + newStyle.c; function _getRowStyle(rowIndex){ var css = opts.rowStyler ? opts.rowStyler.call(target, rowIndex, rowData) : ''; var classValue = ''; var styleValue = ''; if (typeof css == 'string'){ styleValue = css; } else if (css){ classValue = css['class'] || ''; styleValue = css['style'] || ''; } return {c:classValue, s:styleValue}; } function _update(frozen){ var fields = $(target).datagrid('getColumnFields', frozen); var tr = opts.finder.getTr(target, rowIndex, 'body', (frozen?1:2)); var checked = tr.find('div.datagrid-cell-check input[type=checkbox]').is(':checked'); tr.html(this.renderRow.call(this, target, fields, frozen, rowIndex, rowData)); tr.attr('style', styleValue).removeClass(oldClassValue).addClass(classValue); if (checked){ tr.find('div.datagrid-cell-check input[type=checkbox]')._propAttr('checked', true); } } _update.call(this, true); _update.call(this, false); $(target).datagrid('fixRowHeight', rowIndex); }, // insertRow: function(target, index, row){ // var state = $.data(target, 'datagrid'); // var data = state.data; // if (index == undefined || index == null) index = data.rows.length; // if (index > data.rows.length) index = data.rows.length; // $.fn.datagrid.defaults.view.insertRow.call(this, target, index, row); // if (data.firstRows && index <= data.firstRows.length){ // data.firstRows.splice(index, 0, row); // } // }, insertRow: function(target, index, row){ var state = $.data(target, 'datagrid'); var opts = state.options; var data = state.data; var total = $(target).datagrid('getData').total; if (index == null){index = total;} if (index > total){index = total;} if (data.firstRows && index <= data.firstRows.length){ data.firstRows.splice(index, 0, row); } data.total++; var rows = this.r1.concat(this.r2); if (index < this.index){ this.reload.call(this, target); } else if (index <= this.index+rows.length){ rows.splice(index - this.index, 0, row); this.r1 = rows.splice(0, opts.pageSize); if (this.r2.length){ this.r2 = rows.splice(0, opts.pageSize); } this.rows = this.r1.concat(this.r2); this.populate.call(this, target); state.dc.body2.triggerHandler('scroll.datagrid'); } }, // deleteRow: function(target, index){ // var data = $(target).datagrid('getData'); // $.fn.datagrid.defaults.view.deleteRow.call(this, target, index); // if (data.firstRows){ // data.firstRows.splice(index, 1); // } // }, deleteRow: function(target, index){ var state = $.data(target, 'datagrid'); var data = state.data; var opts = state.options; data.total--; if (data.firstRows){ if (index < data.firstRows.length){ data.firstRows.splice(index, 1); this.reload.call(this, target); return; } } var rows = this.r1.concat(this.r2); if (index < this.index){ this.reload.call(this, target); } else if (index < this.index+rows.length){ rows.splice(index - this.index, 1); this.r1 = rows.splice(0, opts.pageSize); if (this.r1.length < opts.pageSize){ this.reload.call(this, target); } else { this.r2 = []; this.rows = this.r1.concat(this.r2); this.populate.call(this, target); state.dc.body2.triggerHandler('scroll.datagrid'); } } } }); $.fn.datagrid.methods.baseUpdateRow = $.fn.datagrid.methods.updateRow; $.fn.datagrid.methods.baseGetRowIndex = $.fn.datagrid.methods.getRowIndex; $.fn.datagrid.methods.baseScrollTo = $.fn.datagrid.methods.scrollTo; $.fn.datagrid.methods.baseGotoPage = $.fn.datagrid.methods.gotoPage; $.extend($.fn.datagrid.methods, { updateRow: function(jq, param){ return jq.each(function(){ var opts = $(this).datagrid('options'); var row = opts.finder.getRow(this, param.index); if (row){ $(this).datagrid('baseUpdateRow', param); } else { var firstRows = $(this).datagrid('getData').firstRows||[]; if (param.index < firstRows.length){ $.extend(firstRows[param.index], param.row); } } }); }, getRowIndex: function(jq, row){ var opts = jq.datagrid('options'); if (opts.view.type == 'scrollview'){ var data = jq.datagrid('getData'); if (typeof row == 'object'){ var index = $.easyui.indexOfArray(data.firstRows, row); } else { var index = $.easyui.indexOfArray(data.firstRows, opts.idField, row); } if (index >= 0){ return index; } else { index = jq.datagrid('baseGetRowIndex', row); return (index == -1) ? -1 : index+opts.view.index; } } else { return jq.datagrid('baseGetRowIndex', row); } }, getRow: function(jq, index){ return jq.datagrid('options').finder.getRow(jq[0], index); }, gotoPage: function(jq, param){ return jq.each(function(){ var target = this; var opts = $(target).datagrid('options'); if (opts.view.type == 'scrollview'){ var page, callback; if (typeof param == 'object'){ page = param.page; callback = param.callback; } else { page = param; } opts.view.getRows.call(opts.view, target, page, function(rows){ this.page = page; this.index = (page-1)*opts.pageSize; this.rows = rows; this.r1 = rows; this.r2 = []; this.populate.call(this, target); $(target).data('datagrid').dc.body2.scrollTop(this.index * opts.rowHeight - opts.deltaTopHeight); if (callback){ callback.call(target, page); } }); } else { $(target).datagrid('baseGotoPage', param); } }); }, scrollTo: function(jq, param){ return jq.each(function(){ var target = this; var opts = $(target).datagrid('options'); var index, callback; if (typeof param == 'object'){ index = param.index; callback = param.callback; } else { index = param; } var view = opts.view; if (view.type == 'scrollview'){ if (index >= view.index && index < view.index+view.rows.length){ $(target).datagrid('baseScrollTo', index); if (callback){ callback.call(target, index); } } else if (index >= 0){ var page = Math.floor(index/opts.pageSize) + 1; $(target).datagrid('gotoPage', { page: page, callback: function(){ setTimeout(function(){ $(target).datagrid('baseScrollTo', index); if (callback){ callback.call(target, index); } }, 0); } }); } } else { $(target).datagrid('baseScrollTo', index); if (callback){ callback.call(target, index); } } }); } }); $.extend($.fn.datagrid.methods, { fixDetailRowHeight: function(jq, index){ return jq.each(function(){ var opts = $.data(this, 'datagrid').options; var dc = $.data(this, 'datagrid').dc; var tr1 = opts.finder.getTr(this, index, 'body', 1).next(); var tr2 = opts.finder.getTr(this, index, 'body', 2).next(); // fix the detail row height if (tr2.is(':visible')){ tr1.css('height', ''); tr2.css('height', ''); var height = Math.max(tr1.height(), tr2.height()); tr1.css('height', height); tr2.css('height', height); } dc.body2.triggerHandler('scroll'); }); }, getExpander: function(jq, index){ // get row expander object var opts = $.data(jq[0], 'datagrid').options; return opts.finder.getTr(jq[0], index).find('span.datagrid-row-expander'); }, // get row detail container getRowDetail: function(jq, index){ var opts = $.data(jq[0], 'datagrid').options; var tr = opts.finder.getTr(jq[0], index, 'body', 2); return tr.next().find('div.datagrid-row-detail'); }, expandRow: function(jq, index){ return jq.each(function(){ var opts = $(this).datagrid('options'); var dc = $.data(this, 'datagrid').dc; var expander = $(this).datagrid('getExpander', index); if (expander.hasClass('datagrid-row-expand')){ expander.removeClass('datagrid-row-expand').addClass('datagrid-row-collapse'); var tr1 = opts.finder.getTr(this, index, 'body', 1).next(); var tr2 = opts.finder.getTr(this, index, 'body', 2).next(); tr1.show(); tr2.show(); $(this).datagrid('fixDetailRowHeight', index); if (opts.onExpandRow){ var row = $(this).datagrid('getRows')[index]; opts.onExpandRow.call(this, index, row); } } }); }, collapseRow: function(jq, index){ return jq.each(function(){ var opts = $(this).datagrid('options'); var dc = $.data(this, 'datagrid').dc; var expander = $(this).datagrid('getExpander', index); if (expander.hasClass('datagrid-row-collapse')){ expander.removeClass('datagrid-row-collapse').addClass('datagrid-row-expand'); var tr1 = opts.finder.getTr(this, index, 'body', 1).next(); var tr2 = opts.finder.getTr(this, index, 'body', 2).next(); tr1.hide(); tr2.hide(); dc.body2.triggerHandler('scroll'); if (opts.onCollapseRow){ var row = $(this).datagrid('getRows')[index]; opts.onCollapseRow.call(this, index, row); } } }); } });