easyui之datagrid控件分析
2024-05-10 18:49:01
/**
* datagrid - jQuery EasyUI
*
* Licensed under the GPL:
* http://www.gnu.org/licenses/gpl.txt
*
* Copyright 2010 stworthy [ stworthy@gmail.com ]
*
* Dependencies:
* resizable
* linkbutton
* pagination
*
*/
/**
* 整个的表格对象说的是最外层的div.datagrid元素
* 表格的整体布局：
* <div.datagrid><!--表格对象,最外层-->* <div.datagrid-title><!--表格的标题-->* <div.datagrid-wrap><!--表格的包裹-->* <div.datagrid-toolbar><!--表格的工具栏-->* <div.datagrid-view>* <div.datagrid-view1><!--为冻结属性而设-->* <div.datagrid-header>* <div.datagrid-header-inner>* <div.datagrid-body>* <div.datagrid-body-inner>* <table>* <div.datagrid-vew2><!--正常的数据显示区-->* <div.datagrid-header>* <div.datagrid-header-inner>* <div.datagrid-body>* <div.datagrid-resize-proxy>* <div.datagrid-pager><!--表格的分页组件-->*/
(function ($) {function setSize(target) {var grid = $.data(target, 'datagrid').grid;var opts = $.data(target, 'datagrid').options;if (opts.fit == true) {var p = grid.parent();opts.width = p.width();opts.height = p.height();}if (opts.rownumbers || (opts.frozenColumns && opts.frozenColumns.length > 0)) {$('.datagrid-body .datagrid-cell,.datagrid-body .datagrid-cell-rownumber', grid).addClass('datagrid-cell-height');}var gridWidth = opts.width;if (gridWidth == 'auto') {if ($.boxModel == true) {gridWidth = grid.width();} else {gridWidth = grid.outerWidth();}} else {if ($.boxModel == true) {gridWidth -= grid.outerWidth() - grid.width();}}grid.width(gridWidth);var innerWidth = gridWidth;if ($.boxModel == false) {innerWidth = gridWidth - grid.outerWidth() + grid.width();}$('.datagrid-wrap', grid).width(innerWidth);$('.datagrid-view', grid).width(innerWidth);$('.datagrid-view1', grid).width($('.datagrid-view1 table', grid).width());$('.datagrid-view2', grid).width(innerWidth - $('.datagrid-view1', grid).outerWidth());$('.datagrid-view1 .datagrid-header', grid).width($('.datagrid-view1', grid).width());$('.datagrid-view1 .datagrid-body', grid).width($('.datagrid-view1', grid).width());$('.datagrid-view2 .datagrid-header', grid).width($('.datagrid-view2', grid).width());$('.datagrid-view2 .datagrid-body', grid).width($('.datagrid-view2', grid).width());var hh;var header1 = $('.datagrid-view1 .datagrid-header', grid);var header2 = $('.datagrid-view2 .datagrid-header', grid);header1.css('height', null);header2.css('height', null);if ($.boxModel == true) {hh = Math.max(header1.height(), header2.height());} else {hh = Math.max(header1.outerHeight(), header2.outerHeight());}$('.datagrid-view1 .datagrid-header table', grid).height(hh);$('.datagrid-view2 .datagrid-header table', grid).height(hh);header1.height(hh);header2.height(hh);if (opts.height == 'auto') {$('.datagrid-body', grid).height($('.datagrid-view2 .datagrid-body table', grid).height());} else {$('.datagrid-body', grid).height(opts.height
- (grid.outerHeight() - grid.height())- $('.datagrid-header', grid).outerHeight(true)- $('.datagrid-title', grid).outerHeight(true)- $('.datagrid-toolbar', grid).outerHeight(true)- $('.datagrid-pager', grid).outerHeight(true));}$('.datagrid-view', grid).height($('.datagrid-view2', grid).height());$('.datagrid-view1', grid).height($('.datagrid-view2', grid).height());$('.datagrid-view2', grid).css('left', $('.datagrid-view1', grid).outerWidth());}/**
* wrap and return the grid object, fields and columns
*/
function wrapGrid(target, rownumbers) {//首先在最外层包装一个div.datagrid,并且返回这个div.datagrid
var grid = $(target).wrap('<div class="datagrid"></div>').parent();//下面开始在外层div.datagrid里面装东西,层次结构应该是
//<div.datagrid>
// <div.datagrid-wrap>
// <div.datagrid-view>
// <div.datagrid-view1>
// <div.datagrid-header>
// <div.datagrid-header-inner>
// <div.datagrid-body>
// <div.datagrid-body-inner>
// <table>
// <div.datagrid-vew2>
// <div.datagrid-header>
// <div.datagrid-header-inner>
// <div.datagrid-body>
// <div.datagrid-resize-proxy>
grid.append('<div class="datagrid-wrap">' +'<div class="datagrid-view">' +'<div class="datagrid-view1">' +'<div class="datagrid-header">' +'<div class="datagrid-header-inner"></div>' +'</div>' +'<div class="datagrid-body">' +'<div class="datagrid-body-inner">' +'<table border="0" cellspacing="0" cellpadding="0"></table>' +'</div>' +'</div>' +'</div>' +'<div class="datagrid-view2">' +'<div class="datagrid-header">' +'<div class="datagrid-header-inner"></div>' +'</div>' +'<div class="datagrid-body"></div>' +'</div>' +'<div class="datagrid-resize-proxy"></div>' +'</div>' +'</div>'
);//获取哪些冻结列的信息
var frozenColumns = getColumns($('thead[frozen=true]', target));//把冻结列的表头删除掉
$('thead[frozen=true]', target).remove();//再获取非冻结列的信息
var columns = getColumns($('thead', target));//再把非冻结列的表头删掉
$('thead', target).remove();//把这个表格转移到之前包装好的层次:div.datagrid->datagrid-wrap->datagrid-view->div.datagrid-vew2->div.datagrid-body
$(target).attr({cellspacing: 0,cellpadding: 0,border: 0
}).removeAttr('width').removeAttr('height').appendTo($('.datagrid-view2 .datagrid-body', grid));function getColumns(thead) {//从thead标签中获取列的设置信息,获取冻结列的信息或者是非冻结列的信息
//返回的columns是纯二维对象数组,如:
//[
// [
// {title:"",align:"",sortable:"",checkbox:""},
// {title:"",align:"",sortable:"",checkbox:""}
// ],
// [{title:"",align:"",sortable:"",checkbox:""}]
//]
var columns = [];$('tr', thead).each(function () {var cols = [];$('th', this).each(function () {//可能这个版本不支持在data-options属性上设置列的属性,所以这里手动添加下面的代码块
var opx = eval("({" + $(this).attr("data-options") + "})");var th = $(this);var col = {title: th.html(),align: th.attr('align') || 'left',sortable: th.attr('sortable') == 'true' || false,checkbox: th.attr('checkbox') == 'true' || false
};if (th.attr('field')) {col.field = th.attr('field');}if (th.attr('formatter')) {col.formatter = eval(th.attr('formatter'));}if (th.attr('rowspan')) col.rowspan = parseInt(th.attr('rowspan'));if (th.attr('colspan')) col.colspan = parseInt(th.attr('colspan'));if (th.attr('width')) col.width = parseInt(th.attr('width'));col = $.extend(col, opx);cols.push(col);});columns.push(cols);});return columns;}//根据获取到的行列配置信息去拿字段
var fields = getColumnFields(columns);//将盛放内容的td全部使用class:datagrid-column-filedname标记,并且里面放置div.datagrid-cell
$('.datagrid-view2 .datagrid-body tr', grid).each(function () {for (var i = 0; i < fields.length; i++) {$('td:eq(' + i + ')', this).addClass('datagrid-column-' + fields[i]).wrapInner('<div class="datagrid-cell"></div>');}});//给表格绑定"_resize"事件
grid.bind('_resize', function () {var opts = $.data(target, 'datagrid').options;if (opts.fit == true) {setSize(target);fixColumnSize(target);}return false;});return {grid: grid,frozenColumns: frozenColumns,columns: columns
};}function createColumnHeader(columns) {//创建表头,创建的表头是一个table标签,这个table标签里,只有一个thead,里面可能有多个tr
var t = $('<table border="0" cellspacing="0" cellpadding="0"><thead></thead></table>');for (var i = 0; i < columns.length; i++) {var tr = $('<tr></tr>').appendTo($('thead', t));var cols = columns[i];for (var j = 0; j < cols.length; j++) {var col = cols[j];var attr = '';if (col.rowspan) attr += 'rowspan="' + col.rowspan + '" ';if (col.colspan) attr += 'colspan="' + col.colspan + '" ';var th = $('<th ' + attr + '></th>').appendTo(tr);if (col.checkbox) {th.attr('field', col.field);$('<div class="datagrid-header-check"></div>').html('<input type="checkbox"/>').appendTo(th);} else if (col.field) {th.append('<div class="datagrid-cell"><span></span><span class="datagrid-sort-icon"></span></div>');th.attr('field', col.field);$('.datagrid-cell', th).width(col.width);$('span', th).html(col.title);$('span.datagrid-sort-icon', th).html(' ');} else {th.append('<div class="datagrid-cell-group"></div>');$('.datagrid-cell-group', th).html(col.title);}}}return t;}/**
* set the common properties
*/
function setProperties(target) {var grid = $.data(target, 'datagrid').grid;var opts = $.data(target, 'datagrid').options;var data = $.data(target, 'datagrid').data;if (opts.striped) {$('.datagrid-view1 .datagrid-body tr:odd', grid).addClass('datagrid-row-alt');$('.datagrid-view2 .datagrid-body tr:odd', grid).addClass('datagrid-row-alt');}if (opts.nowrap == false) {$('.datagrid-body .datagrid-cell', grid).css('white-space', 'normal');}$('.datagrid-header th:has(.datagrid-cell)', grid).hover(function () {$(this).addClass('datagrid-header-over');},function () {$(this).removeClass('datagrid-header-over');});$('.datagrid-body tr', grid).mouseover(function () {var index = $(this).attr('datagrid-row-index');$('.datagrid-body tr[datagrid-row-index=' + index + ']', grid).addClass('datagrid-row-over');}).mouseout(function () {var index = $(this).attr('datagrid-row-index');$('.datagrid-body tr[datagrid-row-index=' + index + ']', grid).removeClass('datagrid-row-over');}).click(function () {var index = $(this).attr('datagrid-row-index');if ($(this).hasClass('datagrid-row-selected')) {unselectRow(target, index);} else {selectRow(target, index);}if (opts.onClickRow) {opts.onClickRow.call(this, index, data.rows[index]);}}).dblclick(function () {var index = $(this).attr('datagrid-row-index');if (opts.onDblClickRow) {opts.onDblClickRow.call(this, index, data.rows[index]);}});function onHeaderCellClick() {var field = $(this).parent().attr('field');var opt = getColumnOption(target, field);if (!opt.sortable) return;opts.sortName = field;opts.sortOrder = 'asc';var c = 'datagrid-sort-asc';if ($(this).hasClass('datagrid-sort-asc')) {c = 'datagrid-sort-desc';opts.sortOrder = 'desc';}$('.datagrid-header .datagrid-cell', grid).removeClass('datagrid-sort-asc');$('.datagrid-header .datagrid-cell', grid).removeClass('datagrid-sort-desc');$(this).addClass(c);if (opts.onSortColumn) {opts.onSortColumn.call(this, opts.sortName, opts.sortOrder);}request(target);}function onHeaderCheckboxClick() {if ($(this).attr('checked')) {$('.datagrid-view2 .datagrid-body tr', grid).each(function () {if (!$(this).hasClass('datagrid-row-selected')) {$(this).trigger('click');}});} else {$('.datagrid-view2 .datagrid-body tr', grid).each(function () {if ($(this).hasClass('datagrid-row-selected')) {$(this).trigger('click');}});}}$('.datagrid-header .datagrid-cell', grid).unbind('.datagrid');$('.datagrid-header .datagrid-cell', grid).bind('click.datagrid', onHeaderCellClick);$('.datagrid-header .datagrid-header-check input[type=checkbox]', grid).unbind('.datagrid');$('.datagrid-header .datagrid-header-check input[type=checkbox]', grid).bind('click.datagrid', onHeaderCheckboxClick);$('.datagrid-header .datagrid-cell', grid).resizable({handles: 'e',minWidth: 50,onStartResize: function (e) {$('.datagrid-resize-proxy', grid).css({left: e.pageX - $(grid).offset().left - 1
});$('.datagrid-resize-proxy', grid).css('display', 'block');},onResize: function (e) {$('.datagrid-resize-proxy', grid).css({left: e.pageX - $(grid).offset().left - 1
});return false;},onStopResize: function (e) {fixColumnSize(target, this);$('.datagrid-view2 .datagrid-header', grid).scrollLeft($('.datagrid-view2 .datagrid-body', grid).scrollLeft());$('.datagrid-resize-proxy', grid).css('display', 'none');}});$('.datagrid-view1 .datagrid-header .datagrid-cell', grid).resizable({onStopResize: function (e) {fixColumnSize(target, this);$('.datagrid-view2 .datagrid-header', grid).scrollLeft($('.datagrid-view2 .datagrid-body', grid).scrollLeft());$('.datagrid-resize-proxy', grid).css('display', 'none');setSize(target);}});var body1 = $('.datagrid-view1 .datagrid-body', grid);var body2 = $('.datagrid-view2 .datagrid-body', grid);var header2 = $('.datagrid-view2 .datagrid-header', grid);body2.scroll(function () {header2.scrollLeft(body2.scrollLeft());body1.scrollTop(body2.scrollTop());});}/**
* fix column size with the special cell element
*/
function fixColumnSize(target, cell) {var grid = $.data(target, 'datagrid').grid;var opts = $.data(target, 'datagrid').options;if (cell) {fix(cell);} else {$('.datagrid-header .datagrid-cell', grid).each(function () {fix(this);});}function fix(cell) {var headerCell = $(cell);if (headerCell.width() == 0) return;var fieldName = headerCell.parent().attr('field');$('.datagrid-body td.datagrid-column-' + fieldName + ' .datagrid-cell', grid).each(function () {var bodyCell = $(this);if ($.boxModel == true) {bodyCell.width(headerCell.outerWidth() - bodyCell.outerWidth() + bodyCell.width());} else {bodyCell.width(headerCell.outerWidth());}});var col = getColumnOption(target, fieldName);col.width = $.boxModel == true ? headerCell.width() : headerCell.outerWidth();}}function getColumnOption(target, field) {var opts = $.data(target, 'datagrid').options;if (opts.columns) {for (var i = 0; i < opts.columns.length; i++) {var cols = opts.columns[i];for (var j = 0; j < cols.length; j++) {var col = cols[j];if (col.field == field) {return col;}}}}if (opts.frozenColumns) {for (var i = 0; i < opts.frozenColumns.length; i++) {var cols = opts.frozenColumns[i];for (var j = 0; j < cols.length; j++) {var col = cols[j];if (col.field == field) {return col;}}}}return null;}/**
* get column fields which will be show in row
*/
function getColumnFields(columns) {if (columns.length == 0) return [];function getFields(ridx, cidx, count) {var fields = [];while (fields.length < count) {var col = columns[ridx][cidx];if (col.colspan && parseInt(col.colspan) > 1) {var ff = getFields(ridx + 1, getSubColIndex(ridx, cidx), parseInt(col.colspan));fields = fields.concat(ff);} else if (col.field) {fields.push(col.field);}cidx++;}return fields;}function getSubColIndex(ridx, cidx) {var index = 0;for (var i = 0; i < cidx; i++) {var colspan = parseInt(columns[ridx][i].colspan || '1');if (colspan > 1) {index += colspan;}}return index;}var fields = [];//只从第一行获取列信息
for (var i = 0; i < columns[0].length; i++) {var col = columns[0][i];if (col.colspan && parseInt(col.colspan) > 1) {//如果有跨列,取列字段属性名就复杂了一点
var ff = getFields(1, getSubColIndex(0, i), parseInt(col.colspan));fields = fields.concat(ff);} else if (col.field) {//如果就没有跨列,就直接取这一列的filed属性
fields.push(col.field);}}return fields;}/**
* load data to the grid
*/
function loadData(target, data) {var grid = $.data(target, 'datagrid').grid;var opts = $.data(target, 'datagrid').options;var selectedRows = $.data(target, 'datagrid').selectedRows;var rows = data.rows;var getWidthDelta = function () {if ($.boxModel == false) return 0;var headerCell = $('.datagrid-header .datagrid-cell:first');var headerDelta = headerCell.outerWidth() - headerCell.width();var t = $('.datagrid-body table', grid);t.append($('<tr><td><div class="datagrid-cell"></div></td></tr>'));var bodyCell = $('.datagrid-cell', t);var bodyDelta = bodyCell.outerWidth() - bodyCell.width();return headerDelta - bodyDelta;};var widthDelta = getWidthDelta();var frozen = opts.rownumbers || (opts.frozenColumns && opts.frozenColumns.length > 0);function getTBody(fields, rownumbers) {function isSelected(row) {if (!opts.idField) return false;for (var i = 0; i < selectedRows.length; i++) {if (selectedRows[i][opts.idField] == row[opts.idField]) return true;}return false;}var tbody = ['<tbody>'];for (var i = 0; i < rows.length; i++) {var row = rows[i];var selected = isSelected(row);if (i % 2 && opts.striped) {tbody.push('<tr datagrid-row-index="' + i + '" class="datagrid-row-alt');} else {tbody.push('<tr datagrid-row-index="' + i + '" class="');}if (selected == true) {tbody.push(' datagrid-row-selected');}tbody.push('">');if (rownumbers) {var rownumber = i + 1;if (opts.pagination) {rownumber += (opts.pageNumber - 1) * opts.pageSize;}if (frozen) {tbody.push('<td><div class="datagrid-cell-rownumber datagrid-cell-height">' + rownumber + '</div></td>');} else {tbody.push('<td><div class="datagrid-cell-rownumber">' + rownumber + '</div></td>');}}for (var j = 0; j < fields.length; j++) {var field = fields[j];var col = getColumnOption(target, field);if (col) {var style = 'width:' + (col.width + widthDelta) + 'px;';style += 'text-align:' + (col.align || 'left');tbody.push('<td class="datagrid-column-' + field + '">');tbody.push('<div style="' + style + '" ');if (col.checkbox) {tbody.push('class="datagrid-cell-check ');} else {tbody.push('class="datagrid-cell ');}if (frozen) {tbody.push('datagrid-cell-height ');}tbody.push('">');if (col.checkbox) {if (selected) {tbody.push('<input type="checkbox" checked="checked"/>');} else {tbody.push('<input type="checkbox"/>');}} else if (col.formatter) {tbody.push(col.formatter(row[field], row));} else {tbody.push(row[field]);}tbody.push('</div>');tbody.push('</td>');}}tbody.push('</tr>');}tbody.push('</tbody>');return tbody.join('');}$('.datagrid-body, .datagrid-header', grid).scrollLeft(0).scrollTop(0);var fields = getColumnFields(opts.columns);$('.datagrid-view2 .datagrid-body table', grid).html(getTBody(fields));if (opts.rownumbers || (opts.frozenColumns && opts.frozenColumns.length > 0)) {var frozenFields = getColumnFields(opts.frozenColumns);$('.datagrid-view1 .datagrid-body table', grid).html(getTBody(frozenFields, opts.rownumbers));}$.data(target, 'datagrid').data = data;$('.datagrid-pager', grid).pagination({total: data.total});setSize(target);setProperties(target);}function getSelectedRows(target) {var opts = $.data(target, 'datagrid').options;var grid = $.data(target, 'datagrid').grid;var data = $.data(target, 'datagrid').data;if (opts.idField) {return $.data(target, 'datagrid').selectedRows;}var rows = [];$('.datagrid-view2 .datagrid-body tr.datagrid-row-selected', grid).each(function () {var index = parseInt($(this).attr('datagrid-row-index'));if (data.rows[index]) {rows.push(data.rows[index]);}});return rows;}/**
* clear all the selection records
*/
function clearSelections(target) {var grid = $.data(target, 'datagrid').grid;$('.datagrid-body tr.datagrid-row-selected', grid).removeClass('datagrid-row-selected');$('.datagrid-body .datagrid-cell-check input[type=checkbox]', grid).attr('checked', false);var selectedRows = $.data(target, 'datagrid').selectedRows;while (selectedRows.length > 0) {selectedRows.pop();}}/**
* select a row with specified row index which start with 0.
*/
function selectRow(target, index) {var grid = $.data(target, 'datagrid').grid;var opts = $.data(target, 'datagrid').options;var data = $.data(target, 'datagrid').data;var selectedRows = $.data(target, 'datagrid').selectedRows;var tr = $('.datagrid-body tr[datagrid-row-index=' + index + ']', grid);var ck = $('.datagrid-body tr[datagrid-row-index=' + index + '] .datagrid-cell-check input[type=checkbox]', grid);if (opts.singleSelect == true) {clearSelections(target);}tr.addClass('datagrid-row-selected');ck.attr('checked', true);if (opts.idField) {var row = data.rows[index];for (var i = 0; i < selectedRows.length; i++) {if (selectedRows[i][opts.idField] == row[opts.idField]) {return;}}selectedRows.push(row);}opts.onSelect.call(target, index, data.rows[index]);}/**
* select record by idField.
*/
function selectRecord(target, idValue) {var opts = $.data(target, 'datagrid').options;var data = $.data(target, 'datagrid').data;if (opts.idField) {var index = -1;for (var i = 0; i < data.rows.length; i++) {if (data.rows[i][opts.idField] == idValue) {index = i;break;}}if (index >= 0) {selectRow(target, index);}}}/**
* unselect a row.
*/
function unselectRow(target, index) {var opts = $.data(target, 'datagrid').options;var grid = $.data(target, 'datagrid').grid;var selectedRows = $.data(target, 'datagrid').selectedRows;var tr = $('.datagrid-body tr[datagrid-row-index=' + index + ']', grid);var ck = $('.datagrid-body tr[datagrid-row-index=' + index + '] .datagrid-cell-check input[type=checkbox]', grid);tr.removeClass('datagrid-row-selected');ck.attr('checked', false);var row = $.data(target, 'datagrid').data.rows[index];if (opts.idField) {for (var i = 0; i < selectedRows.length; i++) {var row1 = selectedRows[i];if (row1[opts.idField] == row[opts.idField]) {for (var j = i + 1; j < selectedRows.length; j++) {selectedRows[j - 1] = selectedRows[j];}selectedRows.pop();break;}}}opts.onUnselect.call(target, index, row);}/**
* request remote data
*/
function request(target) {var grid = $.data(target, 'datagrid').grid;var opts = $.data(target, 'datagrid').options;if (!opts.url) return;var param = $.extend({}, opts.queryParams);if (opts.pagination) {$.extend(param, {page: opts.pageNumber,rows: opts.pageSize
});}if (opts.sortName) {$.extend(param, {sort: opts.sortName,order: opts.sortOrder
});}$('.datagrid-pager', grid).pagination({loading: true});var wrap = $('.datagrid-wrap', grid);$('<div class="datagrid-mask"></div>').css({display: 'block',width: wrap.width(),height: wrap.height()}).appendTo(wrap);$('<div class="datagrid-mask-msg"></div>').html(opts.loadMsg).appendTo(wrap).css({display: 'block',left: (wrap.width() - $('.datagrid-mask-msg', grid).outerWidth()) / 2,top: (wrap.height() - $('.datagrid-mask-msg', grid).outerHeight()) / 2
});$.ajax({type: opts.method,url: opts.url,data: param,dataType: 'json',success: function (data) {$('.datagrid-pager', grid).pagination({loading: false});$('.datagrid-mask', grid).remove();$('.datagrid-mask-msg', grid).remove();loadData(target, data);if (opts.onLoadSuccess) {opts.onLoadSuccess.apply(this, arguments);}},error: function () {$('.datagrid-pager', grid).pagination({loading: false});$('.datagrid-mask', grid).remove();$('.datagrid-mask-msg', grid).remove();if (opts.onLoadError) {opts.onLoadError.apply(this, arguments);}}});}$.fn.datagrid = function (options, param) {//如果是字符串,表示是执行方法
if (typeof options == 'string') {switch (options) {case 'options':return $.data(this[0], 'datagrid').options;case 'resize':return this.each(function () {setSize(this);});case 'reload':return this.each(function () {request(this);});case 'fixColumnSize':return this.each(function () {fixColumnSize(this);});case 'loadData':return this.each(function () {loadData(this, param);});case 'getSelected':var rows = getSelectedRows(this[0]);return rows.length > 0 ? rows[0] : null;case 'getSelections':return getSelectedRows(this[0]);case 'clearSelections':return this.each(function () {clearSelections(this);});case 'selectRow':return this.each(function () {selectRow(this, param);});case 'selectRecord':return this.each(function () {selectRecord(this, param);});case 'unselectRow':return this.each(function () {unselectRow(this, param);});}}options = options || {};return this.each(function () {var state = $.data(this, 'datagrid');var opts;if (state) {opts = $.extend(state.options, options);state.options = opts;} else {//可能是这一个版本的树控件不支持data-options的加载方式,自己扩展了下面的代码段
var optex = {};try {optex = eval("({" + $(this).attr("data-options") + "})");} catch (ex) {}opts = $.extend({}, $.fn.datagrid.defaults, {width: (parseInt($(this).css('width')) || 'auto'),height: (parseInt($(this).css('height')) || 'auto'),fit: $(this).attr('fit') == 'true'
}, options, optex);$(this).css('width', null).css('height', null);var wrapResult = wrapGrid(this, opts.rownumbers);if (!opts.columns) opts.columns = wrapResult.columns;if (!opts.frozenColumns) opts.frozenColumns = wrapResult.frozenColumns;$.data(this, 'datagrid', {options: opts,grid: wrapResult.grid,selectedRows: []});}var target = this;var grid = $.data(this, 'datagrid').grid;if (opts.border == true) {grid.removeClass('datagrid-noborder');} else {grid.addClass('datagrid-noborder');}if (opts.frozenColumns) {//如果发现这个表格存在冻结列,就创建冻结列的表头
var t = createColumnHeader(opts.frozenColumns);if (opts.rownumbers) {//如果有行号,就将行号列加入到表头中
var th = $('<th rowspan="' + opts.frozenColumns.length + '"><div class="datagrid-header-rownumber"></div></th>');if ($('tr', t).length == 0) {th.wrap('<tr></tr>').parent().appendTo($('thead', t));} else {th.prependTo($('tr:first', t));}}//注意,这里可以看出 datagrid-view1是专为冻结行列表头准备的
$('.datagrid-view1 .datagrid-header-inner', grid).html(t);}if (opts.columns) {//如果这个表格有列,就创建表头,注意:这里并没有判断有没有冻结列,也就是说都要自己开一个表头出来
var t = createColumnHeader(opts.columns);//从这里可以看出表头是插入到了datagrid-view2的里面去的
$('.datagrid-view2 .datagrid-header-inner', grid).html(t);}$('.datagrid-title', grid).remove();if (opts.title) {//如果有表格标题,就添加表格标题元素
var title = $('<div class="datagrid-title"><span class="datagrid-title-text"></span></div>');$('.datagrid-title-text', title).html(opts.title);title.prependTo(grid);if (opts.iconCls) {$('.datagrid-title-text', title).addClass('datagrid-title-with-icon');$('<div class="datagrid-title-icon"></div>').addClass(opts.iconCls).appendTo(title);}}$('.datagrid-toolbar', grid).remove();if (opts.toolbar) {//如果有工具栏就添加工具栏元素
var tb = $('<div class="datagrid-toolbar"></div>').prependTo($('.datagrid-wrap', grid));for (var i = 0; i < opts.toolbar.length; i++) {var btn = opts.toolbar[i];if (btn == '-') {$('<div class="datagrid-btn-separator"></div>').appendTo(tb);} else {var tool = $('<a href="javascript:void(0)"></a>');tool[0].onclick = eval(btn.handler || function () {});tool.css('float', 'left').text(btn.text).attr('icon', btn.iconCls || '').appendTo(tb).linkbutton({plain: true,disabled: (btn.disabled || false)});}}}$('.datagrid-pager', grid).remove();if (opts.pagination) {//如果有分页就添加分页元素
var pager = $('<div class="datagrid-pager"></div>').appendTo($('.datagrid-wrap', grid));pager.pagination({pageNumber: opts.pageNumber,pageSize: opts.pageSize,pageList: opts.pageList,onSelectPage: function (pageNum, pageSize) {// save the page state
opts.pageNumber = pageNum;opts.pageSize = pageSize;request(target); // request new page data
}});opts.pageSize = pager.pagination('options').pageSize; // repare the pageSize value
}if (!state) {fixColumnSize(target);}setSize(target);if (opts.url) {request(target);}setProperties(target);});};$.fn.datagrid.defaults = {title: null,iconCls: null,border: true,width: 'auto',height: 'auto',frozenColumns: null,columns: null,striped: false,method: 'post',nowrap: true,idField: null,url: null,loadMsg: 'Processing, please wait ...',pagination: false,rownumbers: false,singleSelect: false,fit: false,pageNumber: 1,pageSize: 10,pageList: [10, 20, 30, 40, 50],queryParams: {},sortName: null,sortOrder: 'asc',onLoadSuccess: function () {},onLoadError: function () {},onClickRow: function (rowIndex, rowData) {},onDblClickRow: function (rowIndex, rowData) {},onSortColumn: function (sort, order) {},onSelect: function (rowIndex, rowData) {},onUnselect: function (rowIndex, rowData) {}};
})(jQuery);
easyui之datagrid控件分析相关推荐
- EasyUI中datagrid控件的使用 设置多行表头(两行或多行)
EasyUI中的datagrid控件十分强大,能生成各种复杂的报表,现在因为项目需要,需要生成一个表头两行的表,找了一些说明文档,以下用一个实例来说明一下: 第一种方法: 1 $('#divData' ...
- easyui之combo控件分析
/** * combo - jQuery EasyUI * * Licensed under the GPL: * http://www.gnu.org/licenses/gpl.txt * * Co ...
- 基于MVC4+EasyUI的Web开发框架经验总结（13）--DataGrid控件实现自己主动适应宽带高度...
在默认情况下,EasyUI的DataGrid好像都没有具备自己主动宽度的适应功能,通常是指定像素宽度的.可是使用的人员计算机的屏幕分辨率可能不一样,因此导致有些地方显示太大或者太小,总是不能达到好的预 ...
- EasyUI datagrid控件的基本使用
首先运行一个它的datagrid示例: 出现下图错误: 这是因为它的示例把json数据放到一个单独.json文件,然后加载,浏览器默认不允许加载本地文件: 下面来看一下此控件的基本使用: 首先做一个基 ...
- （转）基于MVC4+EasyUI的Web开发框架经验总结（13）--DataGrid控件实现自动适应宽带高度...
http://www.cnblogs.com/wuhuacong/p/4085725.html 在默认情况下,EasyUI的DataGrid好像都没有具备自动宽度的适应功能,一般是指定像素宽度的,但是 ...
- easyui datagrid控件使用
datagrid控件使用 1.目标 把数据库的数据显示到tabs页面中,并且提供查询和分页 效果图: **删除修改和新增后面在讲今天讲查询和把数据呈现到表格上面: 首先我们了解datagrid控件 是 ...
- easyui datagrid 控件全选
easyui datagrid 控件全选 在datagrid控件中全选功能都是easyUI给做好的,只需要将负责全选的复选框设置下面的这个属性为false属性即可全部选中 singleSelect:f ...
- jQuery EasyUI动态添加控件或者ajax加载页面后不能自动渲染问题的解决方法
博客分类: jquery-easyui jQueryAjax框架HTML 现象: AJAX返回的html无法做到自动渲染为EasyUI的样式.比如:class="easyui-layout ...
- 使用c#+(datagrid控件)编辑xml文件
作者Blog:http://blog.csdn.net/ouyang76cn/ 使用c#+(datagrid控件)编辑xml文件 这个源码是我根据网上一个vb.net编辑xml文件的原理用c#重写的. ...
最新文章
- CAD绘图软件中如何查询图纸的版本是多少
- Linux定期监视某文件变化,监控Linux文件变化，防止服务器被黑
- 川普签署的 H-1B 禁令昨日正式实施，最着急的是谁？
- 【转】如何用好SVN的Branch
- Filecoin Gas基础费率降至3.76 nanoFIL
- Cent OS 重置root密码
- Oracle集群（RAC）及 jdbc 连接双机数据库
- 使用DIDatepicker
- wamp 出现 The requested URL / was not found on this server
- 如何用银灿IS903主控DIY自己的U盘？（练习BGA焊接的好项目）
- 要做就做明链，这才是堂堂正正的优化之路，不要走捷径
- matlab植物大战僵尸小游戏
- oracle 11g64 位 安装文件
- 页面图片 “懒加载”
- ubuntu怎么看服务器固态硬盘多大
- bullet3 代码结构梳理
- 创建oracle数据库到达梦数据库的dblink
- Android属于绑定服务特点是,Android P HIDL服务绑定模式与直通模式的分析 (原创)
- 奥丁神叛虚拟机 台服登录不上游戏 账号无法登录游戏解决办法
- 【渝粤题库】广东开放大学 互联网金融本 形成性考核