jqueryeasyui-datagrid 很强大，可是在包含 三五十个列的时候，datagrid 行编辑器加载就忍无可忍了（这里用的 IE 浏览器，其他的浏览器稍微好些）
因为写了一个日期&时间的编辑器的扩展，发现加载纯 text 框很快，但是加载内置编辑器就会稍有延迟，所以扩展的用了延时调用（ window.setTimeout ）。
但是，内置的其它编辑器（text,textarea,checkbox,numberbox,validatebox,datebox,combobox,combotree）都有问题！
所以考虑了下，如果编辑时只加载一个单元格的一定会好点儿，结果~~~ 果然不错效果很好！
先上效果图：
其中 gridEditCellHelper 里面用到的方法都是来自 easyui1.3.3-jquery.datagrid.js 中的代码。
用过的也知道这里面的代码被混淆过了，不过我自己手动把用到的代码反向过来了，如果有错误大家可以自己把响应
代码 copy 一份从 jquery.datagrid.js 中。
这里指做抛砖引玉了 ~~~~
-----------------------------------------
gridEditCellHelper 对象为编辑所需的所有代码
//131012-datagrid 单元格编辑扩展
var gridEditCellHelper = {//开始单元格编辑
beginCellEdit: function (_traget, _index, _fieldName) {
var opts = $.data(_traget, "datagrid").options;
var tr = opts.finder.getTr(_traget, _index);
var row = opts.finder.getRow(_traget, _index);
$(_traget).datagrid('endEdit', _index);
gridEditCellHelper.bindCellEditEvent(_traget, _index);
if (tr.hasClass("datagrid-row-editing")) {
//return; //原：处在编辑状态时不进行编辑
//单元格取消编辑操作
} else {
tr.addClass("datagrid-row-editing");
}
if (opts.onBeforeEdit.call(_traget, _index, row) == false) {
return;
}
//tr.addClass("datagrid-row-editing");
gridEditCellHelper._initCellEditor(_traget, _index, _fieldName);//初始化编辑器
gridEditCellHelper._resizeEditors(_traget);//调整编辑器大小
tr.find("div.datagrid-editable").each(function () {
var _field = $(this).parent().attr("field");
if (_field != _fieldName) return true;
var ed = $.data(this, "datagrid.editor");
ed.actions.setValue(ed.target, row[_field]);//编辑器赋值
});
//_validateEditingRow(_traget, _index); //??? --编辑行输入值验证
},
//初始化单元格编辑器
_initCellEditor: function (_traget, _index, _fieldName) {
var opts = $.data(_traget, "datagrid").options;
var tr = opts.finder.getTr(_traget, _index);
tr.children("td").each(function () {
var cell = $(this).find("div.datagrid-cell");
var _field = $(this).attr("field");
if (_field != _fieldName) return true;
var col = gridEditCellHelper._findField(_traget, _field);
if (col && col.editor) {
var _editorType, _editorOpts;
if (typeof col.editor == "string") {
_editorType = col.editor;
} else {
_editorType = col.editor.type;
_editorOpts = col.editor.options;
}
var _editor = opts.editors[_editorType];
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: _editorType, oldHtml: _html });
window.setTimeout(function () {
cell.children("table").find("input").select();
}, 100);
}
}
});
gridEditCellHelper._setRowHeight(_traget, _index, true);//设置行高度
},
//查找字段
_findField:function(_traget, _field) {
function _getCol(_columns) {
if (_columns) {
for (var i = 0; i < _columns.length; i++) {
var cc = _columns[i];
for (var j = 0; j < cc.length; j++) {
var c = cc[j];
if (c.field == _field) {
return c;
}
}
}
}
return null;
};
var _opts = $.data(_traget, "datagrid").options;
var col = _getCol(_opts.columns);
if (!col) {
col = _getCol(_opts.frozenColumns);
}
return col;
},
//调整编辑器大小
_resizeEditors:function (_traget) {
var dc = $.data(_traget, "datagrid").dc;
dc.view.find("div.datagrid-editable").each(function () {
var _ad = $(this);
var _field = _ad.parent().attr("field");
var colOpts = $(_traget).datagrid("getColumnOption", _field);
_ad.outerWidth(colOpts.width);
var ed = $.data(this, "datagrid.editor");
if (ed.actions.resize) {
ed.actions.resize(ed.target, _ad.width());
}
});
},
_setRowHeight:function(_traget, _index, _isSet) {//_traget, _index, true
var _rows = $.data(_traget, "datagrid").data.rows;
var _opts = $.data(_traget, "datagrid").options;
var dc = $.data(_traget, "datagrid").dc;
if (!dc.body1.is(":empty") && (!_opts.nowrap || _opts.autoRowHeight || _isSet)) {
if (_index != undefined) {
var tr1 = _opts.finder.getTr(_traget, _index, "body", 1);
var tr2 = _opts.finder.getTr(_traget, _index, "body", 2);
_setTrHeight(tr1, tr2);
} else {
var tr1 = _opts.finder.getTr(_traget, 0, "allbody", 1);
var tr2 = _opts.finder.getTr(_traget, 0, "allbody", 2);
_setTrHeight(tr1, tr2);
if (_opts.showFooter) {
var tr1 = _opts.finder.getTr(_traget, 0, "allfooter", 1);
var tr2 = _opts.finder.getTr(_traget, 0, "allfooter", 2);
_setTrHeight(tr1, tr2);
}
}
}
_resizeView(_traget);
if (_opts.height == "auto") {
var _body1Parent = dc.body1.parent();
var _body2 = dc.body2;
var _bodySize = _getBodySize(_body2);
var _bodyHeight = _bodySize.height;
if (_bodySize.width > _body2.width()) {
_bodyHeight += 18;
}
_body1Parent.height(_bodyHeight);
_body2.height(_bodyHeight);
dc.view.height(dc.view2.height());
}
dc.body2.triggerHandler("scroll");
function _setTrHeight(_tr1, _tr2) {//tr1, tr2
for (var i = 0; i < _tr2.length; i++) {
var tr1 = $(_tr1[i]);
var tr2 = $(_tr2[i]);
tr1.css("height", "");
tr2.css("height", "");
var _maxHeight = Math.max(tr1.height(), tr2.height());
tr1.css("height", _maxHeight);
tr2.css("height", _maxHeight);
}
};
function _getBodySize(cc) {
var _3d = 0;
var _3e = 0;
$(cc).children().each(function () {
var c = $(this);
if (c.is(":visible")) {
_3e += c.outerHeight();
if (_3d < c.outerWidth()) {
_3d = c.outerWidth();
}
}
});
return { width: _3d, height: _3e };
};
function _resizeView(_traget) {
var _opts = $.data(_traget, "datagrid").options;
var dc = $.data(_traget, "datagrid").dc;
var _panel = $.data(_traget, "datagrid").panel;
var _width = _panel.width();
var _height = _panel.height();
var _view = dc.view;
var _view1 = dc.view1;
var _view2 = dc.view2;
var _header1 = _view1.children("div.datagrid-header");
var _header2 = _view2.children("div.datagrid-header");
var _table1 = _header1.find("table");
var _table2 = _header2.find("table");
_view.width(_width);
var _2b = _header1.children("div.datagrid-header-inner").show();
_view1.width(_2b.find("table").width());
if (!_opts.showHeader) {
_2b.hide();
}
_view2.width(_width - _view1.outerWidth());
_view1.children("div.datagrid-header,div.datagrid-body,div.datagrid-footer").width(_view1.width());
_view2.children("div.datagrid-header,div.datagrid-body,div.datagrid-footer").width(_view2.width());
var hh;
_header1.css("height", "");
_header2.css("height", "");
_table1.css("height", "");
_table2.css("height", "");
hh = Math.max(_table1.height(), _table2.height());
_table1.height(hh);
_table2.height(hh);
_header1.add(_header2).outerHeight(hh);
if (_opts.height != "auto") {
var _2c = _height - _view2.children("div.datagrid-header").outerHeight() - _view2.children("div.datagrid-footer").outerHeight() - _panel.children("div.datagrid-toolbar").outerHeight();
_panel.children("div.datagrid-pager").each(function () {
_2c -= $(this).outerHeight();
});
dc.body1.add(dc.body2).children("table.datagrid-btable-frozen").css({ position: "absolute", top: dc.header2.outerHeight() });
var _2d = dc.body2.children("table.datagrid-btable-frozen").outerHeight();
_view1.add(_view2).children("div.datagrid-body").css({ marginTop: _2d, height: (_2c - _2d) });
}
_view.height(_view2.height());
};
},
bindCellEditEvent: function(_target,_index) {
//131014-点击空白区域结束grid编辑
$(document).on("click.datagrid", function(e)
{ //点击datagrid空白区域，结束编辑
if (_index>=0) {
$(_target).datagrid('endEdit', _index);
}
});
}
};
-------------------------------------
-- datagrid 扩展方法
$.extend($.fn.datagrid.methods, {
//开始编辑单元格：param={ index: _index, field: _field, value: _value, traget: _traget }
beginCellEditExt: function (jq, param) {
return jq.each(function() {
gridEditCellHelper.beginCellEdit(this,param.index,param.field);
});
},
});
-------------------------------------
使用方法：
$('#grid1').datagrid({
//其它grid 构建参数就不写了~~~
onClickCell: function (_index, _field, _value) {
//开始编辑单元格
$(this).datagrid('beginCellEditExt', { index: _index, field: _field, value: _value, traget: _traget });
}
})
--------------------------------------