前言
此前网上有easyui1.25的源码 应该算是比较老的版本 之后又经历了1.26 、 1.3、 1.31、 1.32 、1.33、1.34 1.33开始支持css3 算是又一个转折 但是对于ie来说 1.32 个人用的比较多 赶紧更适用 源码翻译是作者利用几个夜晚时间翻译的 这个表格插件算是源码量最大的 先发布这个 之后会继续把整个easyui的插件翻译完毕：下载该插件翻译源码地址
源码
/**
* jQuery EasyUI 1.3.2
* 翻译：qq:1364386878
*
*/
(function ($) { var grid_body_tr_idindex = 0;
//获取对象下标
function getObjectIndex(a, o) {
for (var i = 0, _3 = a.length; i < _3; i++) {
if (a[i] == o) {
return i;
}
}
return -1;
};
//根据id取消选择行
function unSelectedRowsById(a, o, id) {
if (typeof o == "string") {
for (var i = 0, rows = a.length; i < rows; i++) {
if (a[i][o] == id) {
a.splice(i, 1);
return;
}
}
} else {
var index = getObjectIndex(a, o);
if (index != -1) {
a.splice(index, 1);
}
}
};
//返回标识字段列
function idFieldRows(scRows, idfield, row) {
for (var i = 0, rlength = scRows.length; i < rlength; i++) {
if (scRows[i][idfield] == row[idfield]) {
return;
}
}
scRows.push(row);
};
//做调整和布局
function _resize(target, parm) {
var opts = $.data(target, "datagrid").options;
var panel = $.data(target, "datagrid").panel;
if (parm) {
if (parm.width) {
opts.width = parm.width;
}
if (parm.height) {
opts.height = parm.height;
}
}
if (opts.fit == true) {
var p = panel.panel("panel").parent();
opts.width = p.width();
opts.height = p.height();
}
panel.panel("resize", { width: opts.width, height: opts.height });
};
//适应大小
function _fitGridSize(jq) {
var opts = $.data(jq, "datagrid").options;
var dc = $.data(jq, "datagrid").dc;
var panel = $.data(jq, "datagrid").panel;
var width = panel.width();
var height = panel.height();
var gridView = dc.view;
var gridView1 = dc.view1;
var gridView2 = dc.view2;
var gridHeader1 = gridView1.children("div.datagrid-header");
var gridHeader2 = gridView2.children("div.datagrid-header");
var gridTable1 = gridHeader1.find("table");
var gridTable2 = gridHeader2.find("table");
gridView.width(width);
var innerHeader = gridHeader1.children("div.datagrid-header-inner").show();
gridView1.width(innerHeader.find("table").width());
if (!opts.showHeader) {
innerHeader.hide();
}
gridView2.width(width - gridView1._outerWidth());
gridView1.children("div.datagrid-header,div.datagrid-body,div.datagrid-footer").width(gridView1.width());
gridView2.children("div.datagrid-header,div.datagrid-body,div.datagrid-footer").width(gridView2.width());
var hh;
gridHeader1.css("height", "");
gridHeader2.css("height", "");
gridTable1.css("height", "");
gridTable2.css("height", "");
hh = Math.max(gridTable1.height(), gridTable2.height());
gridTable1.height(hh);
gridTable2.height(hh);
gridHeader1.add(gridHeader2)._outerHeight(hh);
if (opts.height != "auto") {
var fixedHeight = height - gridView2.children("div.datagrid-header")._outerHeight() - gridView2.children("div.datagrid-footer")._outerHeight() - panel.children("div.datagrid-toolbar")._outerHeight();
panel.children("div.datagrid-pager").each(function () {
fixedHeight -= $(this)._outerHeight();
});
dc.body1.add(dc.body2).children("table.datagrid-btable-frozen").css({ position: "absolute", top: dc.header2._outerHeight() });
var height = dc.body2.children("table.datagrid-btable-frozen")._outerHeight();
gridView1.add(gridView2).children("div.datagrid-body").css({ marginTop: height, height: (fixedHeight - height) });
}
gridView.height(gridView2.height());
}; //固定指定列高度。如果'index'参数未配置，所有行高度都是固定的
function _fixRowHeight(target, index, _21) {
var rows = $.data(target, "datagrid").data.rows;
var opts = $.data(target, "datagrid").options;
var dc = $.data(target, "datagrid").dc;
if (!dc.body1.is(":empty") && (!opts.nowrap || opts.autoRowHeight || _21)) {
if (index != undefined) {
var tr1 = opts.finder.getTr(target, index, "body", 1);
var tr2 = opts.finder.getTr(target, index, "body", 2);
alignRowHeight(tr1, tr2);
} else {
var tr1 = opts.finder.getTr(target, 0, "allbody", 1);
var tr2 = opts.finder.getTr(target, 0, "allbody", 2);
alignRowHeight(tr1, tr2);
if (opts.showFooter) {
var tr1 = opts.finder.getTr(target, 0, "allfooter", 1);
var tr2 = opts.finder.getTr(target, 0, "allfooter", 2);
alignRowHeight(tr1, tr2);
}
}
}
_fitGridSize(target);
if (opts.height == "auto") {
var gridBody1 = dc.body1.parent();
var gridBody2 = dc.body2;
var fullHeight = 0;
var width = 0;
gridBody2.children().each(function () {
var c = $(this);
if (c.is(":visible")) {
fullHeight += c._outerHeight();
if (width < c._outerWidth()) {
width = c._outerWidth();
}
}
});
if (width > gridBody2.width()) {
fullHeight += 18;
}
gridBody1.height(fullHeight);
gridBody2.height(fullHeight);
dc.view.height(dc.view2.height());
}
dc.body2.triggerHandler("scroll");
function alignRowHeight(target1, target2) {
for (var i = 0; i < target2.length; i++) {
var tr1 = $(target1[i]);
var tr2 = $(target2[i]);
tr1.css("height", "");
tr2.css("height", "");
var height = Math.max(tr1.height(), tr2.height());
tr1.css("height", height);
tr2.css("height", height);
}
};
}; //冻结指定行，当数据表格表格向下滚动的时候始终保持被冻结的行显示在顶部
function _freezeRow(target, index) {
var datagrid = $.data(target, "datagrid");
var opts = datagrid.options;
var dc = datagrid.dc;
if (!dc.body2.children("table.datagrid-btable-frozen").length) {
dc.body1.add(dc.body2).prepend("<table class=\"datagrid-btable datagrid-btable-frozen\" cellspacing=\"0\" cellpadding=\"0\"></table>");
}
getfreeze_RowCells(true);
getfreeze_RowCells(false);
_fitGridSize(target);
function getfreeze_RowCells(freezeColmuns) { var step = freezeColmuns ? 1 : 2;
var tr = opts.finder.getTr(target, index, "body", step); (freezeColmuns ? dc.body1 : dc.body2).children("table.datagrid-btable-frozen").append(tr);
};
}; function wrapGrid(target, rownumber) {
function getcolumns() {
var frozencols = [];
var unfrozencols = [];
$(target).children("thead").each(function () {
var opt = $.parser.parseOptions(this, [{ frozen: "boolean" }]);
$(this).find("tr").each(function () {
var cols = [];
$(this).find("th").each(function () {
var th = $(this);
var col = $.extend({}, $.parser.parseOptions(this, ["field", "align", "halign", "order", { sortable: "boolean", checkbox: "boolean", resizable: "boolean" }, { rowspan: "number", colspan: "number", width: "number" }]), { title: (th.html() || undefined), hidden: (th.attr("hidden") ? true : undefined), formatter: (th.attr("formatter") ? eval(th.attr("formatter")) : undefined), styler: (th.attr("styler") ? eval(th.attr("styler")) : undefined), sorter: (th.attr("sorter") ? eval(th.attr("sorter")) : undefined) });
if (th.attr("editor")) {
var s = $.trim(th.attr("editor"));
if (s.substr(0, 1) == "{") {
col.editor = eval("(" + s + ")");
} else {
col.editor = s;
}
}
cols.push(col);
}); opt.frozen ? frozencols.push(cols) : unfrozencols.push(cols);
});
});
return [frozencols, unfrozencols];
}; var gridwrap = $("<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\"></div>" + "</div>" + "<div class=\"datagrid-footer\">" + "<div class=\"datagrid-footer-inner\"></div>" + "</div>" + "</div>" + "<div class=\"datagrid-view2\">" + "<div class=\"datagrid-header\">" + "<div class=\"datagrid-header-inner\"></div>" + "</div>" + "<div class=\"datagrid-body\"></div>" + "<div class=\"datagrid-footer\">" + "<div class=\"datagrid-footer-inner\"></div>" + "</div>" + "</div>" + "</div>" + "</div>").insertAfter(target);
gridwrap.panel({ doSize: false });
gridwrap.panel("panel").addClass("datagrid").bind("_resize", function (e, param) {
var opts = $.data(target, "datagrid").options;
if (opts.fit == true || param) {
_resize(target);
setTimeout(function () {
if ($.data(target, "datagrid")) {
_fixColumnSize(target);
}
}, 0);
}
return false;
});
$(target).hide().appendTo(gridwrap.children("div.datagrid-view"));
var cc = getcolumns();
var gridView = gridwrap.children("div.datagrid-view");
var gridView1 = gridView.children("div.datagrid-view1");
var gridView2 = gridView.children("div.datagrid-view2");
return {
panel: gridwrap,
frozenColumns: cc[0],
columns: cc[1],
dc: {
view: gridView,
view1: gridView1,
view2: gridView2,
header1: gridView1.children("div.datagrid-header").children("div.datagrid-header-inner"),
header2: gridView2.children("div.datagrid-header").children("div.datagrid-header-inner"),
body1: gridView1.children("div.datagrid-body").children("div.datagrid-body-inner"),
body2: gridView2.children("div.datagrid-body"),
footer1: gridView1.children("div.datagrid-footer").children("div.datagrid-footer-inner"),
footer2: gridView2.children("div.datagrid-footer").children("div.datagrid-footer-inner")
}
};
};
//获取表格数据
function getGridData(jq) {
var data = { total: 0, rows: [] };
var fields = _getColumnFields(jq, true).concat(_getColumnFields(jq, false)); $(jq).find("tbody tr").each(function () {
data.total++;
var col = {};
for (var i = 0; i < fields.length; i++) {
col[fields[i]] = $("td:eq(" + i + ")", this).html();
}
data.rows.push(col);
});
return data;
};
//初始化
function init(jq) { var datagrid = $.data(jq, "datagrid");
var opts = datagrid.options;
var dc = datagrid.dc; var panel = datagrid.panel;
panel.panel($.extend({}, opts, {
id: null,
doSize: false,
onResize: function (width, height) {
setTimeout(function () {
if ($.data(jq, "datagrid")) {
_fitGridSize(jq);
_fitColumns(jq);
opts.onResize.call(panel, width, height);
}
}, 0);
},
onExpand: function () {
_fixRowHeight(jq);
opts.onExpand.call(panel);
}
}));
datagrid.rowIdPrefix = "datagrid-row-r" + (++grid_body_tr_idindex); buildGridHeader(dc.header1, opts.frozenColumns, true);
buildGridHeader(dc.header2, opts.columns, false);
cellWidth();//设置单元格宽度
dc.header1.add(dc.header2).css("display", opts.showHeader ? "block" : "none");
dc.footer1.add(dc.footer2).css("display", opts.showFooter ? "block" : "none");
if (opts.toolbar) {
if (typeof opts.toolbar == "string") {
$(opts.toolbar).addClass("datagrid-toolbar").prependTo(panel);
$(opts.toolbar).show();
} else {
$("div.datagrid-toolbar", panel).remove();
var tb = $("<div class=\"datagrid-toolbar\"><table cellspacing=\"0\" cellpadding=\"0\"><tr></tr></table></div>").prependTo(panel);
var tr = tb.find("tr");
for (var i = 0; i < opts.toolbar.length; i++) {
var btn = opts.toolbar[i];
if (btn == "-") {
$("<td><div class=\"datagrid-btn-separator\"></div></td>").appendTo(tr);
} else {
var td = $("<td></td>").appendTo(tr);
var tool = $("<a href=\"javascript:void(0)\"></a>").appendTo(td);
tool[0].onclick = eval(btn.handler || function () {
});
tool.linkbutton($.extend({}, btn, { plain: true }));
}
}
}
} else {
$("div.datagrid-toolbar", panel).remove();
}
$("div.datagrid-pager", panel).remove();
if (opts.pagination) {
var pager = $("<div class=\"datagrid-pager\"></div>");
if (opts.pagePosition == "bottom") {
pager.appendTo(panel);
} else {
if (opts.pagePosition == "top") {
pager.addClass("datagrid-pager-top").prependTo(panel);
} else {
var pagertop = $("<div class=\"datagrid-pager datagrid-pager-top\"></div>").prependTo(panel);
pager.appendTo(panel);
pager = pager.add(pagertop);
}
}
//分页
pager.pagination({
total: 0,
pageNumber: opts.pageNumber,
pageSize: opts.pageSize,
pageList: opts.pageList,
onSelectPage: function (pageNumber, pageSize) {
opts.pageNumber = pageNumber;
opts.pageSize = pageSize;
pager.pagination("refresh", { pageNumber: pageNumber, pageSize: pageSize });
_load(jq);
}
});
opts.pageSize = pager.pagination("options").pageSize;
}
function buildGridHeader(headerDiv, clomuns, frozen) { if (!clomuns) {
return;
}
$(headerDiv).show();
$(headerDiv).empty();
var t = $("<table class=\"datagrid-htable\" border=\"0\" cellspacing=\"0\" cellpadding=\"0\"><tbody></tbody></table>").appendTo(headerDiv);
for (var i = 0; i < clomuns.length; i++) {
var tr = $("<tr class=\"datagrid-header-row\"></tr>").appendTo($("tbody", t));
var column = clomuns[i];
for (var j = 0; j < column.length; j++) {
var col = column[j];
var tdHTML = "";
if (col.rowspan) {
tdHTML += "rowspan=\"" + col.rowspan + "\" ";
}
if (col.colspan) {
tdHTML += "colspan=\"" + col.colspan + "\" ";
}
var td = $("<td " + tdHTML + "></td>").appendTo(tr);
if (col.checkbox) {
td.attr("field", col.field);
$("<div class=\"datagrid-header-check\"></div>").html("<input type=\"checkbox\"/>").appendTo(td);
} else {
if (col.field) {
td.attr("field", col.field);
td.append("<div class=\"datagrid-cell\"><span></span><span class=\"datagrid-sort-icon\"></span></div>");
$("span", td).html(col.title);
$("span.datagrid-sort-icon", td).html(" ");
var cell = td.find("div.datagrid-cell");
if (col.resizable == false) {
cell.attr("resizable", "false");
}
if (col.width) {
cell._outerWidth(col.width);
col.boxWidth = parseInt(cell[0].style.width);
} else {
col.auto = true;
}
cell.css("text-align", (col.halign || col.align || ""));
col.cellClass = "datagrid-cell-c" + grid_body_tr_idindex + "-" + col.field.replace(/\./g, "-");
col.cellSelector = "div." + col.cellClass;
} else {
$("<div class=\"datagrid-cell-group\"></div>").html(col.title).appendTo(td);
}
}
if (col.hidden) {
td.hide();
}
}
}
if (frozen && opts.rownumbers) {
var td = $("<td rowspan=\"" + opts.frozenColumns.length + "\"><div class=\"datagrid-header-rownumber\"></div></td>");
if ($("tr", t).length == 0) {
td.wrap("<tr class=\"datagrid-header-row\"></tr>").parent().appendTo($("tbody", t));
} else {
td.prependTo($("tr:first", t));
}
}
};
//设置单元格宽度
function cellWidth() {
var ss = ["<style type=\"text/css\">"];
var clomuns = _getColumnFields(jq, true).concat(_getColumnFields(jq));
for (var i = 0; i < clomuns.length; i++) {
var col = _getColumnOption(jq, clomuns[i]);
if (col && !col.checkbox) {
ss.push(col.cellSelector + " {width:" + col.boxWidth + "px;}");
}
}
ss.push("</style>");
$(ss.join("\n")).prependTo(dc.view);
};
};
//绑定事件
function bingEvent(jq) {
var datagrid = $.data(jq, "datagrid");
var panel = datagrid.panel;
var opts = datagrid.options;
var dc = datagrid.dc;
var headinner = dc.header1.add(dc.header2);
//点击checkbox事件
headinner.find("input[type=checkbox]").unbind(".datagrid").bind("click.datagrid", function (e) { if (opts.singleSelect && opts.selectOnCheck) {
return false;
}
if ($(this).is(":checked")) {
_checkAll(jq);
} else {
_clearChecked(jq);
}
e.stopPropagation();
});
var gridcell = headinner.find("div.datagrid-cell");
//鼠标进入标题单元格事件
gridcell.closest("td").unbind(".datagrid").bind("mouseenter.datagrid", function () {
if (datagrid.resizing) {
return;
}
$(this).addClass("datagrid-header-over");
}).bind("mouseleave.datagrid", function () { //鼠标离开标题事件
$(this).removeClass("datagrid-header-over");
}).bind("contextmenu.datagrid", function (e) {//鼠标右键标题事件 var field = $(this).attr("field");
opts.onHeaderContextMenu.call(jq, e, field);
});
//点击titl事件
gridcell.unbind(".datagrid").bind("click.datagrid", function (e) { var p1 = $(this).offset().left + 5;
var p2 = $(this).offset().left + $(this)._outerWidth() - 5;
if (e.pageX < p2 && e.pageX > p1) {
var field = $(this).parent().attr("field");
var col = _getColumnOption(jq, field);////返回指定列属性
if (!col.sortable || datagrid.resizing) {
return;
}
opts.sortName = field;
opts.sortOrder = col.order || "asc";
var cls = "datagrid-sort-" + opts.sortOrder;
if ($(this).hasClass("datagrid-sort-asc")) {
cls = "datagrid-sort-desc";
opts.sortOrder = "desc";
} else {
if ($(this).hasClass("datagrid-sort-desc")) {
cls = "datagrid-sort-asc";
opts.sortOrder = "asc";
}
}
gridcell.removeClass("datagrid-sort-asc datagrid-sort-desc");
$(this).addClass(cls);
if (opts.remoteSort) {
_load(jq);
} else {
var data = $.data(jq, "datagrid").data;
_removeData(jq, data);
}
opts.onSortColumn.call(jq, opts.sortName, opts.sortOrder);
}
}).bind("dblclick.datagrid", function (e) {//双击事件
var p1 = $(this).offset().left + 5;
var p2 = $(this).offset().left + $(this)._outerWidth() - 5;
var resizeHandle = opts.resizeHandle == "right" ? (e.pageX > p2) : (opts.resizeHandle == "left" ? (e.pageX < p1) : (e.pageX < p1 || e.pageX > p2)); if (resizeHandle) {
var field = $(this).parent().attr("field");
var col = _getColumnOption(jq, field);
if (col.resizable == false) {
return;
}
$(jq).datagrid("autoSizeColumn", field);
col.auto = false;
}
});
var resizeHandle = opts.resizeHandle == "right" ? "e" : (opts.resizeHandle == "left" ? "w" : "e,w");
gridcell.each(function () {
$(this).resizable({
handles: resizeHandle,
disabled: ($(this).attr("resizable") ? $(this).attr("resizable") == "false" : false),
minWidth: 25,
onStartResize: function (e) {
datagrid.resizing = true;
headinner.css("cursor", $("body").css("cursor"));
if (!datagrid.proxy) {
datagrid.proxy = $("<div class=\"datagrid-resize-proxy\"></div>").appendTo(dc.view);
}
datagrid.proxy.css({ left: e.pageX - $(panel).offset().left - 1, display: "none" });
setTimeout(function () {
if (datagrid.proxy) {
datagrid.proxy.show();
}
}, 500);
},
onResize: function (e) {
datagrid.proxy.css({ left: e.pageX - $(panel).offset().left - 1, display: "block" });
return false;
},
onStopResize: function (e) {
headinner.css("cursor", "");
var field = $(this).parent().attr("field");
var col = _getColumnOption(jq, field);
col.width = $(this)._outerWidth();
col.boxWidth = parseInt(this.style.width);
col.auto = undefined;
_fixColumnSize(jq, field);
datagrid.proxy.remove();
datagrid.proxy = null;
if ($(this).parents("div:first.datagrid-header").parent().hasClass("datagrid-view1")) {
_fitGridSize(jq);
}
_fitColumns(jq);
opts.onResizeColumn.call(jq, field, col.width);
setTimeout(function () {
datagrid.resizing = false;
}, 0);
}
});
});
//grid body 鼠标进入事件
dc.body1.add(dc.body2).unbind().bind("mouseover", function (e) { if (datagrid.resizing) {
return;
}
var tr = $(e.target).closest("tr.datagrid-row");
if (!tr.length) {
return;
}
var index = get_trIndex(tr);
opts.finder.getTr(jq, index).addClass("datagrid-row-over");
e.stopPropagation();
}).bind("mouseout", function (e) { //grid body 鼠标移出事件
var tr = $(e.target).closest("tr.datagrid-row");
if (!tr.length) {
return;
}
var index = get_trIndex(tr);
opts.finder.getTr(jq, index).removeClass("datagrid-row-over");
e.stopPropagation();
}).bind("click", function (e) { //grid body 鼠标点击事件
var tt = $(e.target);
var tr = tt.closest("tr.datagrid-row");
if (!tr.length) {
return;
}
var index = get_trIndex(tr);
if (tt.parent().hasClass("datagrid-cell-check")) {
if (opts.singleSelect && opts.selectOnCheck) {
if (!opts.checkOnSelect) {
_clearChecked(jq, true);
}
_checkRow(jq, index);
} else {
if (tt.is(":checked")) {
_checkRow(jq, index);
} else {
_uncheckRow(jq, index);
}
}
} else {
var row = opts.finder.getRow(jq, index);
var td = tt.closest("td[field]", tr);
if (td.length) {
var _6f = td.attr("field");
opts.onClickCell.call(jq, index, _6f, row[_6f]);
}
if (opts.singleSelect == true) {
_selectRow(jq, index);
} else {
if (tr.hasClass("datagrid-row-selected")) {
_unselectRow(jq, index);
} else {
_selectRow(jq, index);
}
}
opts.onClickRow.call(jq, index, row);
}
e.stopPropagation();
}).bind("dblclick", function (e) {//grid body 鼠标双击事件
var tt = $(e.target);
var tr = tt.closest("tr.datagrid-row");
if (!tr.length) {
return;
}
var index = get_trIndex(tr);
var row = opts.finder.getRow(jq, index);
var td = tt.closest("td[field]", tr);
if (td.length) {
var field = td.attr("field");
opts.onDblClickCell.call(jq, index, field, row[field]);
}
opts.onDblClickRow.call(jq, index, row);
e.stopPropagation();
}).bind("contextmenu", function (e) {//grid body 鼠标右键事件
var tr = $(e.target).closest("tr.datagrid-row");
if (!tr.length) {
return;
}
var index = get_trIndex(tr);
var row = opts.finder.getRow(jq, index);
opts.onRowContextMenu.call(jq, e, index, row);
e.stopPropagation();
});
dc.body2.bind("scroll", function () {//grid body 滚动条事件 dc.view1.children("div.datagrid-body").scrollTop($(this).scrollTop());
dc.view2.children("div.datagrid-header,div.datagrid-footer")._scrollLeft($(this)._scrollLeft());
dc.body2.children("table.datagrid-btable-frozen").css("left", -$(this)._scrollLeft());
});
//获取td index
function get_trIndex(tr) {
if (tr.attr("datagrid-row-index")) {
return parseInt(tr.attr("datagrid-row-index"));
} else {
return tr.attr("node-id");
}
};
};
//使列自动展开/收缩到合适的数据表格宽度
function _fitColumns(jq) {
var opts = $.data(jq, "datagrid").options;
var dc = $.data(jq, "datagrid").dc;
if (!opts.fitColumns) {
return;
}
var header = dc.view2.children("div.datagrid-header");
var visableWidth = 0;
var visableColumn;
var fields = _getColumnFields(jq, false);
for (var i = 0; i < fields.length; i++) {
var col = _getColumnOption(jq, fields[i]);
if (_7a(col)) {
visableWidth += col.width;
visableColumn = col;
}
}
var innerHeader = header.children("div.datagrid-header-inner").show();
var fullWidth = header.width() - header.find("table").width() - opts.scrollbarSize;
var rate = fullWidth / visableWidth;
if (!opts.showHeader) {
innerHeader.hide();
}
for (var i = 0; i < fields.length; i++) {
var col = _getColumnOption(jq, fields[i]);
if (_7a(col)) {
var width = Math.floor(col.width * rate);
fitColumnWidth(col, width);
fullWidth -= width;
}
}
if (fullWidth && visableColumn) {
fitColumnWidth(visableColumn, fullWidth);
}
_fixColumnSize(jq);
function fitColumnWidth(col, _80) {
col.width += _80;
col.boxWidth += _80;
header.find("td[field=\"" + col.field + "\"] div.datagrid-cell").width(col.boxWidth);
};
function _7a(col) {
if (!col.hidden && !col.checkbox && !col.auto) {
return true;
}
};
};
//自动调整列宽度以适应内容
function _autoSizeColumn(jq, filed) {
var opts = $.data(jq, "datagrid").options;
var dc = $.data(jq, "datagrid").dc;
if (filed) {
_resize(filed);
if (opts.fitColumns) {
_fitGridSize(jq);
_fitColumns(jq);
}
} else {
var _85 = false;
var _86 = _getColumnFields(jq, true).concat(_getColumnFields(jq, false));
for (var i = 0; i < _86.length; i++) {
var filed = _86[i];
var col = _getColumnOption(jq, filed);
if (col.auto) {
_resize(filed);
_85 = true;
}
}
if (_85 && opts.fitColumns) {
_fitGridSize(jq);
_fitColumns(jq);
}
}
function _resize(_87) {
var _88 = dc.view.find("div.datagrid-header td[field=\"" + _87 + "\"] div.datagrid-cell");
_88.css("width", "");
var col = $(jq).datagrid("getColumnOption", _87);
col.width = undefined;
col.boxWidth = undefined;
col.auto = true;
$(jq).datagrid("fixColumnSize", _87);
var _89 = Math.max(_88._outerWidth(), _8a("allbody"), _8a("allfooter"));
_88._outerWidth(_89);
col.width = _89;
col.boxWidth = parseInt(_88[0].style.width);
$(jq).datagrid("fixColumnSize", _87);
opts.onResizeColumn.call(jq, _87, col.width);
function _8a(_8b) {
var _8c = 0;
opts.finder.getTr(jq, 0, _8b).find("td[field=\"" + _87 + "\"] div.datagrid-cell").each(function () {
var w = $(this)._outerWidth();
if (_8c < w) {
_8c = w;
}
});
return _8c;
};
};
};
//固定列大小。如果'field'参数未配置，所有列大小将都是固定的
function _fixColumnSize(jq, field) {
var opts = $.data(jq, "datagrid").options;
var dc = $.data(jq, "datagrid").dc;
var vtable = dc.view.find("table.datagrid-btable,table.datagrid-ftable");
vtable.css("table-layout", "fixed");
if (field) {
fix(field);
} else {
var ff = _getColumnFields(jq, true).concat(_getColumnFields(jq, false));
for (var i = 0; i < ff.length; i++) {
fix(ff[i]);
}
}
vtable.css("table-layout", "auto");
_91(jq);
setTimeout(function () {
_fixRowHeight(jq);
fixEditorSize(jq);
}, 0);
function fix(field) {
var col = _getColumnOption(jq, field);
if (col.checkbox) {
return;
}
var _93 = dc.view.children("style")[0];
var _94 = _93.styleSheet ? _93.styleSheet : (_93.sheet || document.styleSheets[document.styleSheets.length - 1]);
var _95 = _94.cssRules || _94.rules;
for (var i = 0, len = _95.length; i < len; i++) {
var _96 = _95[i];
if (_96.selectorText.toLowerCase() == col.cellSelector.toLowerCase()) {
_96.style["width"] = col.boxWidth ? col.boxWidth + "px" : "auto";
break;
}
}
};
};
function _91(jq) {
var dc = $.data(jq, "datagrid").dc;
dc.body1.add(dc.body2).find("td.datagrid-td-merged").each(function () {
var td = $(this);
var colspan = td.attr("colspan") || 1;
var width = _getColumnOption(jq, td.attr("field")).width;
for (var i = 1; i < colspan; i++) {
td = td.next();
width += _getColumnOption(jq, td.attr("field")).width + 1;
}
$(this).children("div.datagrid-cell")._outerWidth(width);
});
};
function fixEditorSize(_9b) {
var dc = $.data(_9b, "datagrid").dc;
dc.view.find("div.datagrid-editable").each(function () {
var _9c = $(this);
var _9d = _9c.parent().attr("field");
var col = $(_9b).datagrid("getColumnOption", _9d);
_9c._outerWidth(col.width);
var ed = $.data(this, "datagrid.editor");
if (ed.actions.resize) {
ed.actions.resize(ed.target, _9c.width());
}
});
};
//返回指定列属性
function _getColumnOption(jq, filed) {
function _a0(_a1) {
if (_a1) {
for (var i = 0; i < _a1.length; i++) {
var cc = _a1[i];
for (var j = 0; j < cc.length; j++) {
var c = cc[j];
if (c.field == filed) {
return c;
}
}
}
}
return null;
};
var opts = $.data(jq, "datagrid").options;
var col = _a0(opts.columns);
if (!col) {
col = _a0(opts.frozenColumns);
}
return col;
};
//返回列字段。如果设置了frozen属性为true，将返回固定列的字段名
function _getColumnFields(jq, frozen) {
var opts = $.data(jq, "datagrid").options;
var columns = (frozen == true) ? (opts.frozenColumns || [[]]) : opts.columns;
if (columns.length == 0) {
return [];
}
var fields = [];
function getFixedColspan(index) {
var c = 0;
var i = 0;
while (true) {
if (fields[i] == undefined) {
if (c == index) {
return i;
}
c++;
}
i++;
}
};
function findColumnFields(r) {
var ff = [];
var c = 0;
for (var i = 0; i < columns[r].length; i++) {
var col = columns[r][i];
if (col.field) {
ff.push([c, col.field]);
}
c += parseInt(col.colspan || "1");
}
for (var i = 0; i < ff.length; i++) {
ff[i][0] = getFixedColspan(ff[i][0]);
}
for (var i = 0; i < ff.length; i++) {
var f = ff[i];
fields[f[0]] = f[1];
}
};
for (var i = 0; i < columns.length; i++) {
findColumnFields(i);
}
return fields;
};
//加载本地数据，旧的行将被移除
function _removeData(jq, data) {
var _ae = $.data(jq, "datagrid");
var _af = _ae.options;
var dc = _ae.dc;
data = _af.loadFilter.call(jq, data);
data.total = parseInt(data.total);
_ae.data = data;
if (data.footer) {
_ae.footer = data.footer;
}
if (!_af.remoteSort) {
var opt = _getColumnOption(jq, _af.sortName);
if (opt) {
var _b0 = opt.sorter || function (a, b) {
return (a > b ? 1 : -1);
};
data.rows.sort(function (r1, r2) {
return _b0(r1[_af.sortName], r2[_af.sortName]) * (_af.sortOrder == "asc" ? 1 : -1);
});
}
}
if (_af.view.onBeforeRender) {
_af.view.onBeforeRender.call(_af.view, jq, data.rows);
}
_af.view.render.call(_af.view, jq, dc.body2, false);
_af.view.render.call(_af.view, jq, dc.body1, true);
if (_af.showFooter) {
_af.view.renderFooter.call(_af.view, jq, dc.footer2, false);
_af.view.renderFooter.call(_af.view, jq, dc.footer1, true);
}
if (_af.view.onAfterRender) {
_af.view.onAfterRender.call(_af.view, jq);
}
dc.view.children("style:gt(0)").remove();
_af.onLoadSuccess.call(jq, data);
var _b1 = $(jq).datagrid("getPager");
if (_b1.length) {
if (_b1.pagination("options").total != data.total) {
_b1.pagination("refresh", { total: data.total });
}
}
_fixRowHeight(jq);
dc.body2.triggerHandler("scroll");
_b2();
$(jq).datagrid("autoSizeColumn");
function _b2() {
if (_af.idField) {
for (var i = 0; i < data.rows.length; i++) {
var row = data.rows[i];
if (_b3(_ae.selectedRows, row)) {
_selectRow(jq, i, true);
}
if (_b3(_ae.checkedRows, row)) {
_checkRow(jq, i, true);
}
}
}
function _b3(a, r) {
for (var i = 0; i < a.length; i++) {
if (a[i][_af.idField] == r[_af.idField]) {
a[i] = r;
return true;
}
}
return false;
};
};
};
//返回指定行的索引号，该行的参数可以是一行记录或一个ID字段值
function _getRowIndex(jq, row) {
var opts = $.data(jq, "datagrid").options;
var rows = $.data(jq, "datagrid").data.rows;
if (typeof row == "object") {
return getObjectIndex(rows, row);
} else {
for (var i = 0; i < rows.length; i++) {
if (rows[i][opts.idField] == row) {
return i;
}
}
return -1;
}
};
//返回所有被选中的行，当没有记录被选中的时候将返回一个空数组
function _getSelected(jq) {
var datagrid = $.data(jq, "datagrid");
var opts = datagrid.options;
var data = datagrid.data;
if (opts.idField) {
return datagrid.selectedRows;
} else {
var selectRows = [];
opts.finder.getTr(jq, "", "selected", 2).each(function () {
var _be = parseInt($(this).attr("datagrid-row-index"));
selectRows.push(data.rows[_be]);
});
return selectRows;
}
};
//在复选框呗选中的时候返回所有行
function _getChecked(jq) {
var datagrid = $.data(jq, "datagrid");
var opts = datagrid.options;
if (opts.idField) {
return datagrid.checkedRows;
} else {
var checkRows = [];
datagrid.dc.view.find("div.datagrid-cell-check input:checked").each(function () {
var _c4 = $(this).closest("tr.datagrid-row").attr("datagrid-row-index");
checkRows.push(opts.finder.getRow(jq, _c4));
});
return checkRows;
}
};
//通过ID值参数选择一行
function _selectRecord(jq, id) {
var opts = $.data(jq, "datagrid").options;
if (opts.idField) {
var index = _getRowIndex(jq, id);
if (index >= 0) {
_selectRow(jq, index);
}
}
};
//选择一行，行索引从0开始
function _selectRow(jq, index, _cd) {
var datagrid = $.data(jq, "datagrid");
var dc = datagrid.dc;
var opts = datagrid.options;
var selectRows = datagrid.selectedRows;
if (opts.singleSelect) {
_clearSelections(jq);
selectRows.splice(0, selectRows.length);
}
if (!_cd && opts.checkOnSelect) {
_checkRow(jq, index, true);
}
var row = opts.finder.getRow(jq, index);
if (opts.idField) {
idFieldRows(selectRows, opts.idField, row);
}
opts.onSelect.call(jq, index, row);
var tr = opts.finder.getTr(jq, index).addClass("datagrid-row-selected");
if (tr.length) {
if (tr.closest("table").hasClass("datagrid-btable-frozen")) {
return;
}
var _d3 = dc.view2.children("div.datagrid-header")._outerHeight();
var _d4 = dc.body2;
var _d5 = _d4.outerHeight(true) - _d4.outerHeight();
var top = tr.position().top - _d3 - _d5;
if (top < 0) {
_d4.scrollTop(_d4.scrollTop() + top);
} else {
if (top + tr._outerHeight() > _d4.height() - 18) {
_d4.scrollTop(_d4.scrollTop() + top + tr._outerHeight() - _d4.height() + 18);
}
}
}
};
function _unselectRow(_d7, _d8, _d9) {
var _da = $.data(_d7, "datagrid");
var dc = _da.dc;
var _db = _da.options;
var _dc = $.data(_d7, "datagrid").selectedRows;
if (!_d9 && _db.checkOnSelect) {
_uncheckRow(_d7, _d8, true);
}
_db.finder.getTr(_d7, _d8).removeClass("datagrid-row-selected");
var row = _db.finder.getRow(_d7, _d8);
if (_db.idField) {
unSelectedRowsById(_dc, _db.idField, row[_db.idField]);
}
_db.onUnselect.call(_d7, _d8, row);
};
function _selectAll(_df, _e0) {
var _e1 = $.data(_df, "datagrid");
var _e2 = _e1.options;
var _e3 = _e1.data.rows;
var _e4 = $.data(_df, "datagrid").selectedRows;
if (!_e0 && _e2.checkOnSelect) {
_checkAll(_df, true);
}
_e2.finder.getTr(_df, "", "allbody").addClass("datagrid-row-selected");
if (_e2.idField) {
for (var _e6 = 0; _e6 < _e3.length; _e6++) {
idFieldRows(_e4, _e2.idField, _e3[_e6]);
}
}
_e2.onSelectAll.call(_df, _e3);
};
function _clearSelections(_e7, _e8) {
var _e9 = $.data(_e7, "datagrid");
var _ea = _e9.options;
var _eb = _e9.data.rows;
var _ec = $.data(_e7, "datagrid").selectedRows;
if (!_e8 && _ea.checkOnSelect) {
_clearChecked(_e7, true);
}
_ea.finder.getTr(_e7, "", "selected").removeClass("datagrid-row-selected");
if (_ea.idField) {
for (var _ee = 0; _ee < _eb.length; _ee++) {
unSelectedRowsById(_ec, _ea.idField, _eb[_ee][_ea.idField]);
}
}
_ea.onUnselectAll.call(_e7, _eb);
};
//勾选一行
function _checkRow(jq, index, state) {
var datagrid = $.data(jq, "datagrid");
var opts = datagrid.options;
if (!state && opts.selectOnCheck) {
_selectRow(jq, index, true);
}
var ck = opts.finder.getTr(jq, index).find("div.datagrid-cell-check input[type=checkbox]");
ck._propAttr("checked", true);
ck = opts.finder.getTr(jq, "", "allbody").find("div.datagrid-cell-check input[type=checkbox]:not(:checked)");
if (!ck.length) {
var dc = datagrid.dc;
var _f4 = dc.header1.add(dc.header2);
_f4.find("input[type=checkbox]")._propAttr("checked", true);
}
var row = opts.finder.getRow(jq, index);
if (opts.idField) {
idFieldRows(datagrid.checkedRows, opts.idField, row);
}
opts.onCheck.call(jq, index, row);
};
//取消勾选一行
function _uncheckRow(jq, index, state) {
var datagrid = $.data(jq, "datagrid");
var opts = datagrid.options;
if (!state && opts.selectOnCheck) {
_unselectRow(jq, index, true);
}
var ck = opts.finder.getTr(jq, index).find("div.datagrid-cell-check input[type=checkbox]");
ck._propAttr("checked", false);
var dc = datagrid.dc;
var _fa = dc.header1.add(dc.header2);
_fa.find("input[type=checkbox]")._propAttr("checked", false);
var row = opts.finder.getRow(jq, index);
if (opts.idField) {
unSelectedRowsById(datagrid.checkedRows, opts.idField, row[opts.idField]);
}
opts.onUncheck.call(jq, index, row);
};
function _checkAll(_fb, _fc) {
var _fd = $.data(_fb, "datagrid");
var _fe = _fd.options;
var _ff = _fd.data.rows;
if (!_fc && _fe.selectOnCheck) {
_selectAll(_fb, true);
}
var dc = _fd.dc;
var hck = dc.header1.add(dc.header2).find("input[type=checkbox]");
var bck = _fe.finder.getTr(_fb, "", "allbody").find("div.datagrid-cell-check input[type=checkbox]");
hck.add(bck)._propAttr("checked", true);
if (_fe.idField) {
for (var i = 0; i < _ff.length; i++) {
idFieldRows(_fd.checkedRows, _fe.idField, _ff[i]);
}
}
_fe.onCheckAll.call(_fb, _ff);
};
function _clearChecked(_100, _101) {
var _102 = $.data(_100, "datagrid");
var opts = _102.options;
var rows = _102.data.rows;
if (!_101 && opts.selectOnCheck) {
_clearSelections(_100, true);
}
var dc = _102.dc;
var hck = dc.header1.add(dc.header2).find("input[type=checkbox]");
var bck = opts.finder.getTr(_100, "", "allbody").find("div.datagrid-cell-check input[type=checkbox]");
hck.add(bck)._propAttr("checked", false);
if (opts.idField) {
for (var i = 0; i < rows.length; i++) {
unSelectedRowsById(_102.checkedRows, opts.idField, rows[i][opts.idField]);
}
}
opts.onUncheckAll.call(_100, rows);
};
//开始编辑行
function _beginEdit(jq, index) {
var opts = $.data(jq, "datagrid").options;
var tr = opts.finder.getTr(jq, index);
var row = opts.finder.getRow(jq, index);
if (tr.hasClass("datagrid-row-editing")) {
return;
}
if (opts.onBeforeEdit.call(jq, index, row) == false) {
return;
}
tr.addClass("datagrid-row-editing");
createEditor(jq, index);
fixEditorSize(jq);
tr.find("div.datagrid-editable").each(function () {
var _107 = $(this).parent().attr("field");
var ed = $.data(this, "datagrid.editor");
ed.actions.setValue(ed.target, row[_107]);
});
validateRow(jq, index);
};
//结束编辑行
function _endEdit(jq, index, revert) {
var opts = $.data(jq, "datagrid").options;
var updatedRows = $.data(jq, "datagrid").updatedRows;
var insertedRows = $.data(jq, "datagrid").insertedRows;
var tr = opts.finder.getTr(jq, index);
var row = opts.finder.getRow(jq, index);
if (!tr.hasClass("datagrid-row-editing")) {
return;
}
if (!revert) {
if (!validateRow(jq, index)) {
return;
}
var changed = false;
var newValues = {};
tr.find("div.datagrid-editable").each(function () {
var field = $(this).parent().attr("field");
var ed = $.data(this, "datagrid.editor");
var field = ed.actions.getValue(ed.target);
if (row[field] != field) {
row[field] = field;
changed = true;
newValues[field] = field;
}
});
if (changed) {
if (getObjectIndex(insertedRows, row) == -1) {
if (getObjectIndex(updatedRows, row) == -1) {
updatedRows.push(row);
}
}
}
}
tr.removeClass("datagrid-row-editing");
destroyEditor(jq, index);
$(jq).datagrid("refreshRow", index);
if (!revert) {
opts.onAfterEdit.call(jq, index, row, newValues);
} else {
opts.onCancelEdit.call(jq, index, row);
}
};
//获取指定行的编辑器。每个编辑器都有以下属性：
//actions：编辑器可以执行的动作，同编辑器定义。
//target：目标编辑器的jQuery对象。
//field：字段名称。
//type：编辑器类型，比如：'text','combobox','datebox'等。
function _getEditors(jq, index) {
var opts = $.data(jq, "datagrid").options;
var tr = opts.finder.getTr(jq, index);
var editors = [];
tr.children("td").each(function () {
var cell = $(this).find("div.datagrid-editable");
if (cell.length) {
var ed = $.data(cell[0], "datagrid.editor");
editors.push(ed);
}
});
return editors;
};
//获取指定编辑器，options包含2个属性：
//index：行索引。
//field：字段名称。
function _getEditor(jq, options) {
var editors = _getEditors(jq, options.index);
for (var i = 0; i < editors.length; i++) {
if (editors[i].field == options.field) {
return editors[i];
}
}
return null;
};
//创建编辑器
function createEditor(jq, index) {
var opts = $.data(jq, "datagrid").options;
var tr = opts.finder.getTr(jq, index);
tr.children("td").each(function () {
var cell = $(this).find("div.datagrid-cell");
var field = $(this).attr("field");
var col = _getColumnOption(jq, field);
if (col && col.editor) {
var type, editorOpts;
if (typeof col.editor == "string") {
type = col.editor;
} else {
type = col.editor.type;
editorOpts = col.editor.options;
}
var editor = opts.editors[type];
if (editor) {
var html = cell.html();
var width = cell._outerWidth();
cell.addClass("datagrid-editable");
cell._outerWidth(width);
cell.html("<table border=\"0\" cellspacing=\"0\" cellpadding=\"1\"><tr><td></td></tr></table>");
cell.children("table").bind("click dblclick contextmenu", function (e) {
e.stopPropagation();
});
$.data(cell[0], "datagrid.editor", { actions: editor, target: editor.init(cell.find("td"), editorOpts), field: field, type: type, oldHtml: html });
}
}
});
_fixRowHeight(jq, index, true);
};
//销毁编辑器
function destroyEditor(jq, index) {
var opts = $.data(jq, "datagrid").options;
var tr = opts.finder.getTr(jq, index);
tr.children("td").each(function () {
var cell = $(this).find("div.datagrid-editable");
if (cell.length) {
var ed = $.data(cell[0], "datagrid.editor");
if (ed.actions.destroy) {
ed.actions.destroy(ed.target);
}
cell.html(ed.oldHtml);
$.removeData(cell[0], "datagrid.editor");
cell.removeClass("datagrid-editable");
cell.css("width", "");
}
});
};
//验证指定的行，当验证有效的时候返回true
function validateRow(jq, index) {
var tr = $.data(jq, "datagrid").options.finder.getTr(jq, index);
if (!tr.hasClass("datagrid-row-editing")) {
return true;
}
var vbox = tr.find(".validatebox-text");
vbox.validatebox("validate");
vbox.trigger("mouseleave");
var invalid = tr.find(".validatebox-invalid");
return invalid.length == 0;
};
//从上一次的提交获取改变的所有行。类型参数指明用哪些类型改变的行，可以使用的值有：inserted,deleted,updated等。当类型参数未配置的时候返回所有改变的行
function _getChanges(jq, type) {
var insertedRows = $.data(jq, "datagrid").insertedRows;
var deletedRows = $.data(jq, "datagrid").deletedRows;
var updatedRows = $.data(jq, "datagrid").updatedRows;
if (!type) {
var rows = [];
rows = rows.concat(insertedRows);
rows = rows.concat(deletedRows);
rows = rows.concat(updatedRows);
return rows;
} else {
if (type == "inserted") {
return insertedRows;
} else {
if (type == "deleted") {
return deletedRows;
} else {
if (type == "updated") {
return updatedRows;
}
}
}
}
return [];
};
//删除行
function _deleteRow(jq, index) {
var datagrid = $.data(jq, "datagrid");
var opts = datagrid.options;
var data = datagrid.data;
var insertedRows = datagrid.insertedRows;
var deletedRows = datagrid.deletedRows;
$(jq).datagrid("cancelEdit", index);
var row = data.rows[index];
if (getObjectIndex(insertedRows, row) >= 0) {
unSelectedRowsById(insertedRows, row);
} else {
deletedRows.push(row);
}
unSelectedRowsById(datagrid.selectedRows, opts.idField, data.rows[index][opts.idField]);
unSelectedRowsById(datagrid.checkedRows, opts.idField, data.rows[index][opts.idField]);
opts.view.deleteRow.call(opts.view, jq, index);
if (opts.height == "auto") {
_fixRowHeight(jq);
}
$(jq).datagrid("getPager").pagination("refresh", { total: data.total });
};
//插入一个新行，参数包括一下属性：
//index：要插入的行索引，如果该索引值未定义，则追加新行。
//row：行数据
function _insertRow(jq, param) {
var data = $.data(jq, "datagrid").data;
var view = $.data(jq, "datagrid").options.view;
var insertedRows = $.data(jq, "datagrid").insertedRows;
view.insertRow.call(view, jq, param.index, param.row);
insertedRows.push(param.row);
$(jq).datagrid("getPager").pagination("refresh", { total: data.total });
};
//追加一个新行。新行将被添加到最后的位置
function _appendRow(jq, row) {
var data = $.data(jq, "datagrid").data;
var view = $.data(jq, "datagrid").options.view;
var insertedRows = $.data(jq, "datagrid").insertedRows;
view.insertRow.call(view, jq, null, row);
insertedRows.push(row);
$(jq).datagrid("getPager").pagination("refresh", { total: data.total });
};
//加载本地数据，旧的行将被移除
function _loadData(jq) {
var datagrid = $.data(jq, "datagrid");
var data = datagrid.data;
var rows = data.rows;
var originalRows = [];
for (var i = 0; i < rows.length; i++) {
originalRows.push($.extend({}, rows[i]));
}
datagrid.originalRows = originalRows;
datagrid.updatedRows = [];
datagrid.insertedRows = [];
datagrid.deletedRows = [];
};
//提交所有从加载或者上一次调用acceptChanges函数后更改的数据
function _acceptChanges(jq) {
var data = $.data(jq, "datagrid").data;
var ok = true;
for (var i = 0, len = data.rows.length; i < len; i++) {
if (validateRow(jq, i)) {
_endEdit(jq, i, false);
} else {
ok = false;
}
}
if (ok) {
_loadData(jq);
}
};
//回滚所有从创建或者上一次调用acceptChanges函数后更改的数据
function _rejectChanges(jq) {
var datagrid = $.data(jq, "datagrid");
var opts = datagrid.options;
var originalRows = datagrid.originalRows;
var insertedRows = datagrid.insertedRows;
var deletedRows = datagrid.deletedRows;
var selectedRows = datagrid.selectedRows;
var checkedRows = datagrid.checkedRows;
var data = datagrid.data;
function Rowids(a) {
var ids = [];
for (var i = 0; i < a.length; i++) {
ids.push(a[i][opts.idField]);
}
return ids;
};
function selectRecord(ids, type) {
for (var i = 0; i < ids.length; i++) {
var index = _getRowIndex(jq, ids[i]);
(type == "s" ? _selectRow : _checkRow)(jq, index, true);
}
};
for (var i = 0; i < data.rows.length; i++) {
_endEdit(jq, i, true);
}
var sids = Rowids(selectedRows);
var cids = Rowids(checkedRows);
selectedRows.splice(0, selectedRows.length);
checkedRows.splice(0, checkedRows.length);
data.total += deletedRows.length - insertedRows.length;
data.rows = originalRows;
_removeData(jq, data);
selectRecord(sids, "s");
selectRecord(cids, "c");
_loadData(jq);
};
//加载和显示第一页的所有行。如果指定了'param'，它将取代'queryParams'属性。通常可以通过传递一些参数执行一次查询，通过调用这个方法从服务器加载新数据
function _load(jq, param) {
var opts = $.data(jq, "datagrid").options;
if (param) {
opts.queryParams = param;
}
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 });
}
if (opts.onBeforeLoad.call(jq, param) == false) {
return;
}
$(jq).datagrid("loading");
setTimeout(function () {
doRequest();
}, 0);
function doRequest() {
var loaded = opts.loader.call(jq, param, function (data) {
setTimeout(function () {
$(jq).datagrid("loaded");
}, 0);
_removeData(jq, data);
setTimeout(function () {
_loadData(jq);
}, 0);
}, function () {
setTimeout(function () {
$(jq).datagrid("loaded");
}, 0);
opts.onLoadError.apply(jq, arguments);
});
if (loaded == false) {
$(jq).datagrid("loaded");
}
};
};
//合并单元格，options包含以下属性：
//index：行索引。
//field：字段名称。
//rowspan：合并的行数。
//colspan：合并的列数。
function _mergeCells(jq, options) {
var opts = $.data(jq, "datagrid").options;
options.rowspan = options.rowspan || 1;
options.colspan = options.colspan || 1;
if (options.rowspan == 1 && options.colspan == 1) {
return;
}
var tr = opts.finder.getTr(jq, (options.index != undefined ? options.index : options.id));
if (!tr.length) {
return;
}
var row = opts.finder.getRow(jq, tr);
var field = row[options.field];
var td = tr.find("td[field=\"" + options.field + "\"]");
td.attr("rowspan", options.rowspan).attr("colspan", options.colspan);
td.addClass("datagrid-td-merged");
for (var i = 1; i < options.colspan; i++) {
td = td.next();
td.hide();
row[td.attr("field")] = field;
}
for (var i = 1; i < options.rowspan; i++) {
tr = tr.next();
if (!tr.length) {
break;
}
var row = opts.finder.getRow(jq, tr);
var td = tr.find("td[field=\"" + options.field + "\"]").hide();
row[td.attr("field")] = field;
for (var j = 1; j < options.colspan; j++) {
td = td.next();
td.hide();
row[td.attr("field")] = field;
}
}
_91(jq);
};
//实例化
$.fn.datagrid = function (options, param) {
if (typeof options == "string") {
return $.fn.datagrid.methods[options](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 {
opts = $.extend({}, $.extend({}, $.fn.datagrid.defaults, { queryParams: {} }),
$.fn.datagrid.parseOptions(this),
options);
$(this).css("width", "").css("height", "");
var gridWrap = wrapGrid(this, opts.rownumbers);
if (!opts.columns) {
opts.columns = gridWrap.columns;
}
if (!opts.frozenColumns) {
opts.frozenColumns = gridWrap.frozenColumns;
}
opts.columns = $.extend(true, [], opts.columns);
opts.frozenColumns = $.extend(true, [], opts.frozenColumns);
opts.view = $.extend({}, opts.view);
$.data(this, "datagrid", {
options: opts,
panel: gridWrap.panel,
dc: gridWrap.dc,
selectedRows: [],
checkedRows: [],
data: { total: 0, rows: [] },
originalRows: [],
updatedRows: [],
insertedRows: [],
deletedRows: []
});
}
init(this);
if (opts.data) {
_removeData(this, opts.data);
_loadData(this);
} else {
var data = getGridData(this);
if (data.total > 0) {
_removeData(this, data);
_loadData(this);
}
}
_resize(this);
_load(this);
bingEvent(this);
});
};
//editors 重写默认值对象
var editors = {
//文本框
text: {
//初始化编辑器并返回目标对象
init: function (container, options) {
var editor = $("<input type=\"text\" class=\"datagrid-editable-input\">").appendTo(container);
return editor;
},
//从编辑器中获取值
getValue: function () {
return $(target).val();
},
//向编辑器中写入值
setValue: function (target, value) {
$(target).val(value);
},
//向编辑器中写入值
resize: function (target, width) {
$(target)._outerWidth(width);
}
},
//多行文本
textarea: {
//初始化编辑器并返回目标对象
init: function (container, options) {
var editor = $("<textarea class=\"datagrid-editable-input\"></textarea>").appendTo(container);
return editor;
},
getValue: function (target) {
return $(target).val();
},
setValue: function (target, value) {
$(target).val(value);
},
resize: function (target, width) {
$(target)._outerWidth(width);
}
},
//选择框
checkbox: {
//初始化编辑器并返回目标对象
init: function (container, options) {
var editor = $("<input type=\"checkbox\">").appendTo(container);
editor.val(options.on);
editor.attr("offval", options.off);
return editor;
},
getValue: function (target) {
if ($(target).is(":checked")) {
return $(target).val();
} else {
return $(target).attr("offval");
}
},
setValue: function (target, value) {
var checked = false;
if ($(target).val() == value) {
checked = true;
}
$(target)._propAttr("checked", checked);
}
},
//数值输入框
numberbox: {
//初始化编辑器并返回目标对象
init: function (container, options) {
var editor = $("<input type=\"text\" class=\"datagrid-editable-input\">").appendTo(container);
editor.numberbox(options);
return editor;
},
destroy: function (target) {
$(target).numberbox("destroy");
},
getValue: function (target) {
$(target).blur();
return $(target).numberbox("getValue");
},
setValue: function (target, value) {
$(target).numberbox("setValue", value);
},
resize: function (target, width) {
$(target)._outerWidth(width);
}
},
//验证框
validatebox: {
//初始化编辑器并返回目标对象
init: function (container, options) {
var editor = $("<input type=\"text\" class=\"datagrid-editable-input\">").appendTo(container);
editor.validatebox(options);
return editor;
},
destroy: function (target) {
$(target).validatebox("destroy");
},
getValue: function (target) {
return $(target).val();
},
setValue: function (target, value) {
$(target).val(value);
},
resize: function (target, width) {
$(target)._outerWidth(width);
}
},
//日期框
datebox: {
//初始化编辑器并返回目标对象
init: function (container, options) {
var editor = $("<input type=\"text\">").appendTo(container);
editor.datebox(options);
return editor;
},
destroy: function (target) {
$(target).datebox("destroy");
},
getValue: function (target) {
return $(target).datebox("getValue");
},
setValue: function (target, value) {
$(target).datebox("setValue", value);
},
resize: function (target, width) {
$(target).datebox("resize", width);
}
},
//下拉框
combobox: {
//初始化编辑器并返回目标对象
init: function (container, options) {
var editor = $("<input type=\"text\">").appendTo(container);
editor.combobox(options || {});
return editor;
},
destroy: function (target) {
$(target).combobox("destroy");
},
getValue: function (target) {
return $(target).combobox("getValue");
},
setValue: function (target, value) {
$(target).combobox("setValue", value);
},
resize: function (target, width) {
$(target).combobox("resize", width);
}
},
//下拉树
combotree: {
//初始化编辑器并返回目标对象
init: function (container, target) {
var editor = $("<input type=\"text\">").appendTo(container);
editor.combotree(target);
return editor;
},
destroy: function (target) {
$(target).combotree("destroy");
},
getValue: function (target) {
return $(target).combotree("getValue");
},
setValue: function (target, value) {
$(target).combotree("setValue", value);
},
resize: function (target, width) {
$(target).combotree("resize", width);
}
}
}; //表格默认方法
$.fn.datagrid.methods = {
//返回属性对象
options: function (jq) {
var opts = $.data(jq[0], "datagrid").options;
var panelOpts = $.data(jq[0], "datagrid").panel.panel("options");
var opts = $.extend(opts,
{
width: panelOpts.width,
height: panelOpts.height,
closed: panelOpts.closed,
collapsed: panelOpts.collapsed,
minimized: panelOpts.minimized,
maximized: panelOpts.maximized
});
return opts;
},
//返回面板对象
getPanel: function (jq) {
return $.data(jq[0], "datagrid").panel;
},
//返回页面对象
getPager: function (jq) {
return $.data(jq[0], "datagrid").panel.children("div.datagrid-pager");
},
//返回列字段。如果设置了frozen属性为true，将返回固定列的字段名
getColumnFields: function (jq, frozen) {
return _getColumnFields(jq[0], frozen);
},
//返回指定列属性
getColumnOption: function (jq, field) {
return _getColumnOption(jq[0], field);
},
//做调整和布局
resize: function (jq, param) {
return jq.each(function () {
_resize(this, param);
});
},
//加载和显示第一页的所有行。如果指定了'param'，它将取代'queryParams'属性。通常可以通过传递一些参数执行一次查询，通过调用这个方法从服务器加载新数据
load: function (jq, param) {
return jq.each(function () {
var opts = $(this).datagrid("options");
opts.pageNumber = 1;
var Pager = $(this).datagrid("getPager");
Pager.pagination({ pageNumber: 1 });
_load(this, param);
});
},
//重载行。等同于'load'方法，但是它将保持在当前页
reload: function (jq, param) {
return jq.each(function () {
_load(this, param);
});
},
//重载页脚行。代码示例
reloadFooter: function (jq, footer) {
return jq.each(function () {
var opts = $.data(this, "datagrid").options;
var dc = $.data(this, "datagrid").dc;
if (footer) {
$.data(this, "datagrid").footer = footer;
}
if (opts.showFooter) {
opts.view.renderFooter.call(opts.view, this, dc.footer2, false);
opts.view.renderFooter.call(opts.view, this, dc.footer1, true);
if (opts.view.onAfterRender) {
opts.view.onAfterRender.call(opts.view, this);
}
$(this).datagrid("fixRowHeight");
}
});
},
//显示载入状态
loading: function (jq) {
return jq.each(function () {
var opts = $.data(this, "datagrid").options;
$(this).datagrid("getPager").pagination("loading");
if (opts.loadMsg) {
var Panel = $(this).datagrid("getPanel");
$("<div class=\"datagrid-mask\" style=\"display:block\"></div>").appendTo(Panel);
var msg = $("<div class=\"datagrid-mask-msg\" style=\"display:block;left:50%\"></div>").html(opts.loadMsg).appendTo(Panel);
msg.css("marginLeft", -msg.outerWidth() / 2);
}
});
},
//隐藏载入状态
loaded: function (jq) {
return jq.each(function () {
$(this).datagrid("getPager").pagination("loaded");
var Panel = $(this).datagrid("getPanel");
Panel.children("div.datagrid-mask-msg").remove();
Panel.children("div.datagrid-mask").remove();
});
},
//使列自动展开/收缩到合适的数据表格宽度
fitColumns: function (jq) {
return jq.each(function () {
_fitColumns(this);
});
},
//固定列大小。如果'field'参数未配置，所有列大小将都是固定的
fixColumnSize: function (jq, field) {
return jq.each(function () {
_fixColumnSize(this, field);
});
},
//固定指定列高度。如果'index'参数未配置，所有行高度都是固定的
fixRowHeight: function (jq, index) {
return jq.each(function () {
_fixRowHeight(this, index);
});
},
//冻结指定行，当数据表格表格向下滚动的时候始终保持被冻结的行显示在顶部
freezeRow: function (jq, index) {
return jq.each(function () {
_freezeRow(this, index);
});
},
//自动调整列宽度以适应内容
autoSizeColumn: function (jq, field) {
return jq.each(function () {
_autoSizeColumn(this, field);
});
},
//加载本地数据，旧的行将被移除
loadData: function (jq, data) {
return jq.each(function () {
_removeData(this, data);
_loadData(this);
});
},
//返回加载完毕后的数据
getData: function (jq) {
return $.data(jq[0], "datagrid").data;
},
//返回当前页的所有行
getRows: function (jq) {
return $.data(jq[0], "datagrid").data.rows;
},
//返回页脚行
getFooterRows: function (jq) {
return $.data(jq[0], "datagrid").footer;
},
//返回指定行的索引号，该行的参数可以是一行记录或一个ID字段值
getRowIndex: function (jq, id) {
return _getRowIndex(jq[0], id);
},
//在复选框呗选中的时候返回所有行
getChecked: function (jq) {
return _getChecked(jq[0]);
},
//返回第一个被选中的行或如果没有选中的行则返回null
getSelected: function (jq) {
var rows = _getSelected(jq[0]);
return rows.length > 0 ? rows[0] : null;
},
//返回所有被选中的行，当没有记录被选中的时候将返回一个空数组
getSelections: function (jq) {
return _getSelected(jq[0]);
},
//清除所有选择的行
clearSelections: function (jq) {
return jq.each(function () {
var selectedRows = $.data(this, "datagrid").selectedRows;
selectedRows.splice(0, selectedRows.length);
_clearSelections(this);
});
},
//清楚所有勾选的行
clearChecked: function (jq) {
return jq.each(function () {
var checkedRows = $.data(this, "datagrid").checkedRows;
checkedRows.splice(0, checkedRows.length);
_clearChecked(this);
});
},
//clearChecked
selectAll: function (jq) {
return jq.each(function () {
_selectAll(this);
});
},
//取消选择所有当前页中所有的行
unselectAll: function (jq) {
return jq.each(function () {
_clearSelections(this);
});
},
//选择一行，行索引从0开始
selectRow: function (jq, index) {
return jq.each(function () {
_selectRow(this, index);
});
},
//通过ID值参数选择一行
selectRecord: function (jq, id) {
return jq.each(function () {
_selectRecord(this, id);
});
},
//取消选择一行
unselectRow: function (jq, index) {
return jq.each(function () {
_unselectRow(this, index);
});
},
//勾选一行，行索引从0开始
checkRow: function (jq, index) {
return jq.each(function () {
_checkRow(this, index);
});
}, uncheckRow: function (jq, _1b7) {
return jq.each(function () {
_uncheckRow(this, _1b7);
});
},
//勾选当前页中的所有行
checkAll: function (jq) {
return jq.each(function () {
_checkAll(this);
});
},
//取消勾选当前页中的所有行
uncheckAll: function (jq) {
return jq.each(function () {
_clearChecked(this);
});
},
//开始编辑行
beginEdit: function (jq, index) {
return jq.each(function () {
_beginEdit(this, index);
});
},
//结束编辑行
endEdit: function (jq, index) {
return jq.each(function () {
_endEdit(this, index, false);
});
},
//取消编辑行
cancelEdit: function (jq, index) {
return jq.each(function () {
_endEdit(this, index, true);
});
},
//获取指定行的编辑器。每个编辑器都有以下属性：
//actions：编辑器可以执行的动作，同编辑器定义。
//target：目标编辑器的jQuery对象。
//field：字段名称。
//type：编辑器类型，比如：'text','combobox','datebox'等。
getEditors: function (jq, index) {
return _getEditors(jq[0], index);
},
//获取指定编辑器，options包含2个属性：
//index：行索引。
//field：字段名称。
getEditor: function (jq, options) {
return _getEditor(jq[0], options);
},
//刷新行。
refreshRow: function (jq, index) {
return jq.each(function () {
var opts = $.data(this, "datagrid").options;
opts.view.refreshRow.call(opts.view, this, index);
});
},
//验证指定的行，当验证有效的时候返回true
validateRow: function (jq, index) {
return validateRow(jq[0], index);
},
//更新指定行，参数包含下列属性：
//index：执行更新操作的行索引。
//row：更新行的新数据
updateRow: function (jq, param) {
return jq.each(function () {
var opts = $.data(this, "datagrid").options;
opts.view.updateRow.call(opts.view, this, param.index, param.row);
});
},
//追加一个新行。新行将被添加到最后的位置
appendRow: function (jq, row) {
return jq.each(function () {
_appendRow(this, row);
});
},
//插入一个新行，参数包括一下属性：
//index：要插入的行索引，如果该索引值未定义，则追加新行。
//row：行数据
insertRow: function (jq, param) {
return jq.each(function () {
_insertRow(this, param);
});
},
//删除行
deleteRow: function (jq, index) {
return jq.each(function () {
_deleteRow(this, index);
});
},
//从上一次的提交获取改变的所有行。类型参数指明用哪些类型改变的行，可以使用的值有：inserted,deleted,updated等。当类型参数未配置的时候返回所有改变的行
getChanges: function (jq, type) {
return _getChanges(jq[0], type);
},
//提交所有从加载或者上一次调用acceptChanges函数后更改的数据
acceptChanges: function (jq) {
return jq.each(function () {
_acceptChanges(this);
});
},
//回滚所有从创建或者上一次调用acceptChanges函数后更改的数据
rejectChanges: function (jq) {
return jq.each(function () {
_rejectChanges(this);
});
},
//合并单元格，options包含以下属性：
//index：行索引。
//field：字段名称。
//rowspan：合并的行数。
//colspan：合并的列数。
mergeCells: function (jq, options) {
return jq.each(function () {
_mergeCells(this, options);
});
},
//显示指定的列
showColumn: function (jq, field) {
return jq.each(function () {
var Panel = $(this).datagrid("getPanel");
Panel.find("td[field=\"" + field + "\"]").show();
$(this).datagrid("getColumnOption", field).hidden = false;
$(this).datagrid("fitColumns");
});
},
//隐藏指定的列
hideColumn: function (jq, field) {
return jq.each(function () {
var Panel = $(this).datagrid("getPanel");
Panel.find("td[field=\"" + field + "\"]").hide();
$(this).datagrid("getColumnOption", field).hidden = true;
$(this).datagrid("fitColumns");
});
}
}; $.fn.datagrid.parseOptions = function (_1c8) {
var t = $(_1c8);
return $.extend({},
$.fn.panel.parseOptions(_1c8),
$.parser.parseOptions(_1c8, ["url", "toolbar", "idField", "sortName", "sortOrder", "pagePosition", "resizeHandle",
{ fitColumns: "boolean", autoRowHeight: "boolean", striped: "boolean", nowrap: "boolean" },
{ rownumbers: "boolean", singleSelect: "boolean", checkOnSelect: "boolean", selectOnCheck: "boolean" },
{ pagination: "boolean", pageSize: "number", pageNumber: "number" },
{ remoteSort: "boolean", showHeader: "boolean", showFooter: "boolean" },
{ scrollbarSize: "number" }]), {
pageList: (t.attr("pageList") ? eval(t.attr("pageList")) : undefined),
loadMsg: (t.attr("loadMsg") != undefined ? t.attr("loadMsg") : undefined),
rowStyler: (t.attr("rowStyler") ? eval(t.attr("rowStyler")) : undefined)
});
};
//定义数据表格的视图 该视图是一个对象，将告诉数据表格如何渲染行。该对象必须定义下列函
var view = {
// 数据加载时调用。
//target：DOM对象，数据表格对象。
//container：行容器。
//frozen：指明如何渲染冻结容器。
render: function (target, container, frozen) {
var datagrid = $.data(target, "datagrid");
var opts = datagrid.options;
var rows = datagrid.data.rows;
var fields = $(target).datagrid("getColumnFields", frozen);
if (frozen) {
if (!(opts.rownumbers || (opts.frozenColumns && opts.frozenColumns.length))) {
return;
}
}
var html = ["<table class=\"datagrid-btable\" cellspacing=\"0\" cellpadding=\"0\" border=\"0\"><tbody>"];
for (var i = 0; i < rows.length; i++) {
var cls = (i % 2 && opts.striped) ? "class=\"datagrid-row datagrid-row-alt\"" : "class=\"datagrid-row\"";
var style = opts.rowStyler ? opts.rowStyler.call(target, i, rows[i]) : "";
var style = style ? "style=\"" + style + "\"" : "";
var _1d2 = datagrid.rowIdPrefix + "-" + (frozen ? 1 : 2) + "-" + i;
html.push("<tr id=\"" + _1d2 + "\" datagrid-row-index=\"" + i + "\" " + cls + " " + style + ">");
html.push(this.renderRow.call(this, target, fields, frozen, i, rows[i]));
html.push("</tr>");
}
html.push("</tbody></table>");
$(container).html(html.join(""));
},
//这是一个选择函数来渲染行页脚
renderFooter: function (target, container, frozen) {
var opts = $.data(target, "datagrid").options;
var rows = $.data(target, "datagrid").footer || [];
var fields = $(target).datagrid("getColumnFields", frozen);
var html = ["<table class=\"datagrid-ftable\" cellspacing=\"0\" cellpadding=\"0\" border=\"0\"><tbody>"];
for (var i = 0; i < rows.length; i++) {
html.push("<tr class=\"datagrid-row\" datagrid-row-index=\"" + i + "\">");
html.push(this.renderRow.call(this, target, fields, frozen, i, rows[i]));
html.push("</tr>");
}
html.push("</tbody></table>");
$(container).html(html.join(""));
},
//这是一个属性功能，将调用render函数
renderRow: function (target, fields, frozen, rowIndex, rowData) {
var opts = $.data(target, "datagrid").options;
var cc = [];
if (frozen && opts.rownumbers) {
var rowIndex = rowIndex + 1;
if (opts.pagination) {
rowIndex += (opts.pageNumber - 1) * opts.pageSize;
}
cc.push("<td class=\"datagrid-td-rownumber\"><div class=\"datagrid-cell-rownumber\">" + rowIndex + "</div></td>");
}
for (var i = 0; i < fields.length; i++) {
var field = fields[i];
var col = $(target).datagrid("getColumnOption", field);
if (col) {
var _1df = rowData[field];
var style = col.styler ? (col.styler(_1df, rowData, rowIndex) || "") : "";
var style = col.hidden ? "style=\"display:none;" + style + "\"" : (style ? "style=\"" + style + "\"" : "");
cc.push("<td field=\"" + field + "\" " + style + ">");
if (col.checkbox) {
var style = "";
} else {
var style = "";
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("<div style=\"" + style + "\" ");
if (col.checkbox) {
cc.push("class=\"datagrid-cell-check ");
} else {
cc.push("class=\"datagrid-cell " + col.cellClass);
}
cc.push("\">");
if (col.checkbox) {
cc.push("<input type=\"checkbox\" name=\"" + field + "\" value=\"" + (_1df != undefined ? _1df : "") + "\"/>");
} else {
if (col.formatter) {
cc.push(col.formatter(_1df, rowData, rowIndex));
} else {
cc.push(_1df);
}
}
cc.push("</div>");
cc.push("</td>");
}
}
return cc.join("");
},
//定义如何刷新指定的行
refreshRow: function (target, rowIndex) {
this.updateRow.call(this, target, rowIndex, {});
},
//更新行
updateRow: function (target, rowIndex, row) {
var opts = $.data(target, "datagrid").options;
var rows = $(target).datagrid("getRows");
$.extend(rows[rowIndex], row);
var style = opts.rowStyler ? opts.rowStyler.call(target, rowIndex, rows[rowIndex]) : "";
function _1e7(_1e8) {
var _1e9 = $(target).datagrid("getColumnFields", _1e8);
var tr = opts.finder.getTr(target, rowIndex, "body", (_1e8 ? 1 : 2));
var _1ea = tr.find("div.datagrid-cell-check input[type=checkbox]").is(":checked");
tr.html(this.renderRow.call(this, target, _1e9, _1e8, rowIndex, rows[rowIndex]));
tr.attr("style", style || "");
if (_1ea) {
tr.find("div.datagrid-cell-check input[type=checkbox]")._propAttr("checked", true);
}
};
_1e7.call(this, true);
_1e7.call(this, false);
$(target).datagrid("fixRowHeight", rowIndex);
},
//插入行
insertRow: function (target, rowIndex, row) {
var datagrid = $.data(target, "datagrid");
var opts = datagrid.options;
var dc = datagrid.dc;
var data = datagrid.data;
if (rowIndex == undefined || rowIndex == null) {
rowIndex = data.rows.length;
}
if (rowIndex > data.rows.length) {
rowIndex = data.rows.length;
}
function _1ee(_1ef) {
var _1f0 = _1ef ? 1 : 2;
for (var i = data.rows.length - 1; i >= rowIndex; i--) {
var tr = opts.finder.getTr(target, i, "body", _1f0);
tr.attr("datagrid-row-index", i + 1);
tr.attr("id", datagrid.rowIdPrefix + "-" + _1f0 + "-" + (i + 1));
if (_1ef && opts.rownumbers) {
var _1f1 = i + 2;
if (opts.pagination) {
_1f1 += (opts.pageNumber - 1) * opts.pageSize;
}
tr.find("div.datagrid-cell-rownumber").html(_1f1);
}
}
};
function _1f2(_1f3) {
var _1f4 = _1f3 ? 1 : 2;
var _1f5 = $(target).datagrid("getColumnFields", _1f3);
var _1f6 = datagrid.rowIdPrefix + "-" + _1f4 + "-" + rowIndex;
var tr = "<tr id=\"" + _1f6 + "\" class=\"datagrid-row\" datagrid-row-index=\"" + rowIndex + "\"></tr>";
if (rowIndex >= data.rows.length) {
if (data.rows.length) {
opts.finder.getTr(target, "", "last", _1f4).after(tr);
} else {
var cc = _1f3 ? dc.body1 : dc.body2;
cc.html("<table cellspacing=\"0\" cellpadding=\"0\" border=\"0\"><tbody>" + tr + "</tbody></table>");
}
} else {
opts.finder.getTr(target, rowIndex + 1, "body", _1f4).before(tr);
}
};
_1ee.call(this, true);
_1ee.call(this, false);
_1f2.call(this, true);
_1f2.call(this, false);
data.total += 1;
data.rows.splice(rowIndex, 0, row);
this.refreshRow.call(this, target, rowIndex);
},
//删除行
deleteRow: function (target, rowIndex) {
var datagrid = $.data(target, "datagrid");
var opts = datagrid.options;
var data = datagrid.data;
function _1fa(_1fb) {
var _1fc = _1fb ? 1 : 2;
for (var i = rowIndex + 1; i < data.rows.length; i++) {
var tr = opts.finder.getTr(target, i, "body", _1fc);
tr.attr("datagrid-row-index", i - 1);
tr.attr("id", datagrid.rowIdPrefix + "-" + _1fc + "-" + (i - 1));
if (_1fb && opts.rownumbers) {
var _1fd = i;
if (opts.pagination) {
_1fd += (opts.pageNumber - 1) * opts.pageSize;
}
tr.find("div.datagrid-cell-rownumber").html(_1fd);
}
}
};
opts.finder.getTr(target, rowIndex).remove();
_1fa.call(this, true);
_1fa.call(this, false);
data.total -= 1;
data.rows.splice(rowIndex, 1);
},
//在视图被呈现之前触发
onBeforeRender: function (target, rows) {
},
//在视图呗呈现之后触发
onAfterRender: function (target) {
var opts = $.data(target, "datagrid").options;
if (opts.showFooter) {
var footer = $(target).datagrid("getPanel").find("div.datagrid-footer");
footer.find("div.datagrid-cell-rownumber,div.datagrid-cell-check").css("visibility", "hidden");
}
}
};
//表格默认属性 以及事件（集成panel的属性和事件）
$.fn.datagrid.defaults = $.extend({}, $.fn.panel.defaults, {
frozenColumns: undefined,//同列属性，但是这些列将会被冻结在左侧
columns: undefined,//数据表格列配置对象，详见列属性说明中更多的细节
fitColumns: false,//真正的自动展开/收缩列的大小，以适应网格的宽度，防止水平滚动
resizeHandle: "right",//调整列的位置，可用的值有：'left','right','both'。在使用'right'的时候用户可以通过拖动右侧边缘的列标题调整列
autoRowHeight: true,//定义设置行的高度，根据该行的内容。设置为false可以提高负载性能
toolbar: null,//顶部工具栏的数据表格面板。可能的值：1) 一个数组，每个工具属性都和linkbutton一样。 2) 选择器指定的工具栏
striped: false,//是否显示斑马线效果
method: "post",//该方法类型请求远程数据
nowrap: true,//如果为true，则在同一行中显示数据。设置为true可以提高加载性能
idField: null,//指明哪一个字段是标识字段
url: null,//指明哪一个字段是标识字段
data: null,//数据加载
loadMsg: "Processing, please wait ...",//在从远程站点加载数据的时候显示提示消息
rownumbers: false,//如果为true，则显示一个行号列
singleSelect: false,//如果为true，则只允许选择一行
selectOnCheck: true,//如果为true，单击复选框将永远选择行。 如果为false，选择行将不选中复选框
checkOnSelect: true,//如果为true，当用户点击行的时候该复选框就会被选中或取消选中。 如果为false，当用户仅在点击该复选框的时候才会呗选中或取消
pagination: false,//如果为true，则在数据表格控件底部显示分页工具栏
pagePosition: "bottom",//定义分页工具栏的位置。可用的值有：'top','bottom','both'。
pageNumber: 1,//在设置分页属性的时候初始化页码
pageSize: 10,//在设置分页属性的时候初始化页面大小
pageList: [10, 20, 30, 40, 50],//在设置分页属性的时候初始化页面大小
queryParams: {},//在请求远程数据的时候发送额外的参数
sortName: null,//定义哪些列可以进行排序
sortOrder: "asc",//定义列的排序顺序，只能是'asc'或'desc'
remoteSort: true,//定义从服务器对数据进行排序
showHeader: true,//定义是否显示行头
showFooter: false,//定义是否显示行脚
scrollbarSize: 18,//滚动条的宽度(当滚动条是垂直的时候)或高度(当滚动条是水平的时候)。
//返回样式如'background:red'。带2个参数的函数： rowIndex：该行索引从0开始 rowData：与此相对应的记录行
rowStyler: function (rowIndex, rowData) {
},
//定义如何从远程服务器加载数据。返回false可以放弃本次请求动作。该函数接受以下参数：
//param：参数对象传递给远程服务器。
//success(data)：当检索数据成功的时候会调用该回调函数。
//error()：当检索数据失败的时候会调用该回调函数
loader: function (param, success, error) {
var opts = $(this).datagrid("options");
if (!opts.url) {
return false;
}
$.ajax({
type: opts.method, url: opts.url, data: param, dataType: "json", success: function (data) {
success(data);
}, error: function () {
error.apply(this, arguments);
}
});
},
//返回过滤数据显示。该函数带一个参数'data'用来指向源数据（即：获取的数据源，比如Json对象）。您可以改变源数据的标准数据格式。这个函数必须返回包含'total'和'rows'属性的标准数据对象
loadFilter: function (data) {
if (typeof data.length == "number" && typeof data.splice == "function") {
return { total: data.length, rows: data };
} else {
return data;
}
},
//定义在编辑行的时候使用的编辑器
editors: editors, finder: {
getTr: function (target, rowIndex, type, step) {
type = type || "body";
step = step || 0;
var _209 = $.data(target, "datagrid");
var dc = _209.dc;
var opts = _209.options;
if (step == 0) {
var tr1 = opts.finder.getTr(target, rowIndex, type, 1);
var tr2 = opts.finder.getTr(target, rowIndex, type, 2);
return tr1.add(tr2);
} else {
if (type == "body") {
var tr = $("#" + _209.rowIdPrefix + "-" + step + "-" + rowIndex);
if (!tr.length) {
tr = (step == 1 ? dc.body1 : dc.body2).find(">table>tbody>tr[datagrid-row-index=" + rowIndex + "]");
}
return tr;
} else {
if (type == "footer") {
return (step == 1 ? dc.footer1 : dc.footer2).find(">table>tbody>tr[datagrid-row-index=" + rowIndex + "]");
} else {
if (type == "selected") {
return (step == 1 ? dc.body1 : dc.body2).find(">table>tbody>tr.datagrid-row-selected");
} else {
if (type == "last") {
return (step == 1 ? dc.body1 : dc.body2).find(">table>tbody>tr[datagrid-row-index]:last");
} else {
if (type == "allbody") {
return (step == 1 ? dc.body1 : dc.body2).find(">table>tbody>tr[datagrid-row-index]");
} else {
if (type == "allfooter") {
return (step == 1 ? dc.footer1 : dc.footer2).find(">table>tbody>tr[datagrid-row-index]");
}
}
}
}
}
}
}
},
getRow: function (_20a, p) {
var _20b = (typeof p == "object") ? p.attr("datagrid-row-index") : p;
return $.data(_20a, "datagrid").data.rows[parseInt(_20b)];
}
},
//定义数据表格的视图
view: view,
//在载入请求数据数据之前触发，如果返回false可终止载入数据操作
onBeforeLoad: function (param) {
},
//在数据加载成功的时候触发
onLoadSuccess: function () {
},
//在数据加载成功的时候触发
onLoadError: function () {
},
//在用户点击一行的时候触发，参数包括：
//rowIndex：点击的行的索引值，该索引值从0开始。
//rowData：对应于点击行的记录
onClickRow: function (rowIndex, rowData) {
},
//在用户双击一行的时候触发，参数包括：
//rowIndex：点击的行的索引值，该索引值从0开始。
//rowData：对应于点击行的记录
onDblClickRow: function (rowIndex, onDblClickRow) {
},
//在用户点击一个单元格的时候触发
onClickCell: function (rowIndex, field, value) {
},
//在用户双击一个单元格的时候触发
onDblClickCell: function (rowIndex, field, value) {
},
//在用户排序一列的时候触发，参数包括：
//sort：排序列字段名称。
//order：排序列的顺序(ASC或DESC)
onSortColumn: function (sort, order) {
},
//在用户调整列大小的时候触发
onResizeColumn: function (field, width) {
},
//在用户选择一行的时候触发，参数包括：
//rowIndex：选择的行的索引值，索引从0开始。
//rowData：对应于所选行的记录
onSelect: function (rowIndex, rowData) {
},
// 在用户选择一行的时候触发，参数包括：
//rowIndex：选择的行的索引值，索引从0开始。
//rowData：对应于所选行的记录
onUnselect: function (rowIndex, rowData) {
},
//在用户选择所有行的时候触发
onSelectAll: function (rows) {
},
//在用户取消选择所有行的时候触发
onUnselectAll: function (rows) {
},
// 在用户勾选一行的时候触发，参数包括：
//rowIndex：选中的行索引，索引从0开始。
//rowData：对应于所选行的记录
onCheck: function (rowIndex, rowData) {
},
// 在用户取消勾选一行的时候触发，参数包括：
//rowIndex：选中的行索引，索引从0开始。
//rowData：对应于取消勾选行的记录
onUncheck: function (rowIndex, rowData) {
},
//在用户勾选所有行的时候触发
onCheckAll: function (rows) {
},
//在用户取消勾选所有行的时候触发
onUncheckAll: function (rows) {
},
// 在用户开始编辑一行的时候触发，参数包括：
//rowIndex：编辑行的索引，索引从0开始。
//rowData：对应于编辑行的记录
onBeforeEdit: function (rowIndex, rowData) {
},
// 在用户完成编辑一行的时候触发，参数包括：
//rowIndex：编辑行的索引，索引从0开始。
//rowData：对应于完成编辑的行的记录。
//changes：更改后的字段(键)/值对
onAfterEdit: function (rowIndex, rowData, changes) {
},
// 在用户取消编辑一行的时候触发，参数包括：
//rowIndex：编辑行的索引，索引从0开始。
//rowData：对应于编辑行的记录
onCancelEdit: function (rowIndex, rowData) {
},
//在鼠标右击数据表格表格头的时候触发
onHeaderContextMenu: function (e, field) {
},
//在鼠标右击一行记录的时候触发
onRowContextMenu: function (e, rowIndex, rowData) {
}
});
})(jQuery);
示例代码
这里只是对grid进行的单个插件引入的例子进行简单的说明
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Frozen Columns in DataGrid - jQuery EasyUI Demo</title>
<link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../../themes/icon.css">
<link rel="stylesheet" type="text/css" href="../demo.css"> <script type="text/javascript" src="../../jquery-1.8.0.min.js"></script>
<script src="../../plugins2/jquery.parser.js"></script> <script src="../../plugins2/jquery.panel.js"></script>
<script src="../../plugins/jquery.resizable.js"></script>
<script src="../../plugins2/jquery.linkbutton.js"></script>
<script src="../../plugins/jquery.pagination.js"></script>
<script src="../../plugins2/jquery.datagrid.js"></script>
</head>
<body>
<h2>Frozen Columns in DataGrid</h2>
<div class="demo-info">
<div class="demo-tip icon-tip"></div>
<div>You can freeze some columns that can't scroll out of view.</div>
</div>
<div style="margin:10px 0;"></div>
<table class="easyui-datagrid" title="Frozen Columns in DataGrid" style="width:700px;height:250px"
data-options="rownumbers:true,singleSelect:true,url:'datagrid_data1.aspx'">
<thead data-options="frozen:true">
<tr>
<th data-options="field:'itemid',width:100">Item ID</th>
<th data-options="field:'productid',width:120">Product</th>
</tr>
</thead>
<thead>
<tr>
<th data-options="field:'listprice',width:90,align:'right'">List Price</th>
<th data-options="field:'unitcost',width:90,align:'right'">Unit Cost</th>
<th data-options="field:'attr1',width:250">Attribute</th>
<th data-options="field:'status',width:60,align:'center'">Status</th>
</tr>
</thead>
</table> </body>
</html>