jqueryeasyui-datagrid-扩展-支持单元格编辑

曾经终败给现在 2024-04-20 11:18 93阅读 0赞

jqueryeasyui-datagrid 很强大，可是在包含 三五十个列的时候，datagrid 行编辑器加载就忍无可忍了（这里用的 IE 浏览器，其他的浏览器稍微好些）

因为写了一个日期&时间的编辑器的扩展，发现加载纯 text 框很快，但是加载内置编辑器就会稍有延迟，所以扩展的用了延时调用（ window.setTimeout ）。

但是，内置的其它编辑器（text,textarea,checkbox,numberbox,validatebox,datebox,combobox,combotree）都有问题！

所以考虑了下，如果编辑时只加载一个单元格的一定会好点儿，结果~~~ 果然不错效果很好！

先上效果图：

![SouthEast][]

其中 gridEditCellHelper 里面用到的方法都是来自 easyui1.3.3-jquery.datagrid.js 中的代码。

用过的也知道这里面的代码被混淆过了，不过我自己手动把用到的代码反向过来了，如果有错误大家可以自己把响应

代码 copy 一份从 jquery.datagrid.js 中。

这里指做抛砖引玉了 ~~~~

\-----------------------------------------

gridEditCellHelper 对象为编辑所需的所有代码

//131012-datagrid 单元格编辑扩展

131018-更新

var gridEditCellHelper = \{  
traget:null,  
//editIndex:0,  
//开始单元格编辑  
beginCellEdit: function (\_traget, \_index, \_fieldName) \{  
gridEditCellHelper.traget = \_traget;  
//gridEditCellHelper.editIndex = \_index;  
var opts = $.data(\_traget, "datagrid").options;  
var tr = opts.finder.getTr(\_traget, \_index);  
var row = opts.finder.getRow(\_traget, \_index);  
gridEditCellHelper.endCellEdit(\_traget, \_index, false);//结束编辑单元格  
if (!tr.hasClass("datagrid-row-editing")) \{  
tr.addClass("datagrid-row-editing");  
\}  
if (opts.onBeforeEdit.call(\_traget, \_index, row) == false) \{  
return;  
\}//alert('begin')  
gridEditCellHelper.bindCellEditEvent(\_traget, \_index,true);//点击空白结束编辑  
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\]);//编辑器赋值  
\});  
gridEditCellHelper.validateEditingRow(\_traget, \_index); //编辑行输入值验证  
\},  
//点击空白区域结束grid编辑(\_isBind:true=注册事件，false=卸载事件)  
bindCellEditEvent: function(\_target,\_index,\_isBind) \{  
if (\_isBind) \{  
$(document).on("click.datagrid", function(e) \{ //点击datagrid空白区域，结束编辑  
if (\_index >= 0) \{  
$(document).off("click.datagrid");  
$(\_target).datagrid('endCellEditExt', \_index); //结束编辑单元格  
\}  
\});  
\} else \{  
$(document).off("click.datagrid");  
\}  
\},  
//结束单元格编辑  
endCellEdit:function(\_traget, \_index, \_isCancelEdit) \{//this, \_index, false  
var opts = $.data(\_traget, "datagrid").options;  
var \_updatedRows = $.data(\_traget, "datagrid").updatedRows;  
var \_insertedRows = $.data(\_traget, "datagrid").insertedRows;  
var tr = opts.finder.getTr(\_traget, \_index);  
var row = opts.finder.getRow(\_traget, \_index);  
gridEditCellHelper.bindCellEditEvent(\_traget, \_index,false);//移除事件  
if (!tr.hasClass("datagrid-row-editing")) \{  
return;  
\}//alert('end')  
var idField = opts.idField;//主键  
var idValue = row\[idField\];//主键值  
//非取消编辑，更新数据（需要：行的主键字段）  
if (!\_isCancelEdit) \{  
if (!gridEditCellHelper.validateEditingRow(\_traget, \_index)) \{  
return;  
\}  
var \_isUpdate = false;  
var \_changes = \{\};  
var \_field;  
tr.find("div.datagrid-editable").each(function () \{  
\_field = $(this).parent().attr("field");  
var ed = $.data(this, "datagrid.editor");  
var \_value = ed.actions.getValue(ed.target);  
if (row\[\_field\] != \_value) \{  
row\[\_field\] = \_value;  
\_isUpdate = true;  
\_changes\[idField\] = idValue;//记录主键字段及值  
\_changes\[\_field\] = \_value;//记录修改字段及值  
return false;  
\}  
\});  
if (\_isUpdate && idValue) \{  
//使用 idField 、idValue 找到 updaterow  
var updateRow = null;  
for(var i=0;i<\_updatedRows.length;i++) \{  
var item = \_updatedRows\[i\];  
if (item\[idField\] == idValue) \{  
updateRow = item;  
break;  
\}  
\}  
if (updateRow==null) \{  
\_updatedRows.push(\_changes);  
\} else \{  
updateRow\[\_field\] = \_changes\[\_field\];//修改或更新  
\}  
//miniTip(JsGlobals.jsonStr(\_updatedRows))  
\}  
\}  
tr.removeClass("datagrid-row-editing");  
gridEditCellHelper.\_rowEditDestroy(\_traget, \_index);  
$(\_traget).datagrid("refreshRow", \_index);  
if (!\_isCancelEdit) \{  
opts.onAfterEdit.call(\_traget, \_index, row, \_changes);  
\} else \{  
opts.onCancelEdit.call(\_traget, \_index, row);  
\}  
\},  
//验证编行  
validateEditingRow:function(\_traget, \_index) \{//\_traget, \_index  
var tr = $.data(\_traget, "datagrid").options.finder.getTr(\_traget, \_index);  
if (!tr.hasClass("datagrid-row-editing")) \{  
return true;  
\}  
var vbox = tr.find(".validatebox-text");  
vbox.validatebox("validate");  
vbox.trigger("mouseleave");  
var \_vInvalid = tr.find(".validatebox-invalid");  
return \_vInvalid.length == 0;  
\},  
//初始化单元格编辑器  
\_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());  
\}  
\},  
//销毁单元格编辑器  
\_rowEditDestroy:function(\_traget, \_index) \{//\_traget, \_index  
var opts = $.data(\_traget, "datagrid").options;  
var tr = opts.finder.getTr(\_traget, \_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", "");  
\}  
\});  
\},  
\};

\--------------------------------------

[SouthEast]: https://img-blog.csdn.net/20131014174517609?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQveHhqX2ppbmc=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast

发表评论取消回复

表情：

评论列表（有 0 条评论，93人围观）

还没有评论，来说两句吧...

相关阅读

相关 jqueryeasyui-datagrid-扩展-支持单元格编辑

queryeasyui-datagrid 很强大，可是在包含三五十个列的时候，datagrid 行编辑器加载就忍无可忍了（这里用的 IE 浏览器，其他的浏览器稍微好些）...

曾经终败给现在/ 2024年04月20日 11:18/ 0 赞/ 94 阅读

相关 Markdown编辑表格实现合并单元格、单元格内容换行

Markdown虽然没有合并单元格的语法，但是Markdown是兼容HTML的，因此，我们可以通过HTML的方式实现单元格合并。跨行合并使用 rowspan 属性跨

冷不防/ 2023年01月22日 05:54/ 0 赞/ 44 阅读

相关 elementui可编辑单元格_EXCEL工作表编辑与管理

\新作者扶植计划第二期\ 工作表编辑：建立一个工作簿，并对它进行编辑和格式化。(1)建立工作表：根据下列数据建立一个EXCEL工作簿，将该工作簿存入“自己的文件夹”，名为“

痛定思痛。/ 2023年01月03日 14:02/ 0 赞/ 218 阅读

相关 EasyUI DataGrid 编辑单元格

之前文章 [EasyUI DataGrid可编辑单元格 ][EasyUI DataGrid_]实现可编辑单元格，如果有多列都需要可编辑当点击一个单元格则此整行都会进行编辑

曾经终败给现在/ 2022年08月21日 02:12/ 0 赞/ 302 阅读

相关 EasyUI DataGrid可编辑单元格

效果如图： ![SouthEast][] 首先在需要可编辑的列上添加一个editor属性，列定义为numberbox编辑类型 <th field="SCOR

本是古典何须时尚/ 2022年08月02日 12:53/ 0 赞/ 308 阅读

相关 easyui-datagrid 编辑单元格

在做itoo成绩的时候，有个需求是教师判分，学生成绩有两部分组成：平时成绩和期末成绩，然后根据两种成绩比例算出总成绩。现在是有了平时成绩和成绩比例，输入期末成绩，计算出总成绩，

古城微笑少年丶/ 2022年07月03日 18:24/ 0 赞/ 292 阅读

相关 ant design Table实现可编辑的单元格

需求 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmN

向右看齐/ 2022年04月03日 10:48/ 0 赞/ 1498 阅读

相关扩展:datagrid鼠标经过提示单元格内容

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="

妖狐艹你老母/ 2021年11月22日 11:04/ 0 赞/ 259 阅读

相关 DevExpress设置单元格不可编辑，选单元格则选中一行

DevExpress设置单元格不可编辑，选单元格则选中一行，目的是只展示数据，不提供修改功能： DevexpressGridControl禁止点击单元格修改 1. 设置

淩亂°似流年/ 2021年07月26日 17:06/ 0 赞/ 866 阅读

相关扩展:datagrid鼠标经过提示单元格内容

$.extend($.fn.datagrid.methods, { / 开打提示功能 @pa

╰半橙微兮°/ 2021年06月24日 14:00/ 0 赞/ 454 阅读