为Easyui的datagrid添加行编辑功能

为Easyui的datagrid添加行编辑功能

先上效果图，如下：

 

 

项目要求编辑时不要弹出新窗口，就在本行出现文本框编辑。Easyui自带的datagrid不提供此功能，其它的js库除了ext、jqgrid外都没有此功能，（ext太庞大、jqgrid功能有限）。所以还是自己修改Easyui的代码。虽然不是开源的，但是源码就是把函数名用不规律的字符替换了，并没有把代码都写成一行那种，所以改起来不是很费劲。

主要增加了editRow、cancelEdit、saveUpdate这3个函数。在th标记里增加了edit、type这2个属性来增强编辑功能。（edit="false"为不编辑，type="edit"为修改操作列，见图上最后一列）；在table标记里增加了editUrl这个属性来设置提交的url。

我是在页面上写表头，然后再绑定的。个人感觉这种方法比把表格各列的属性写在js里要直观（Easyui提供这2种方法创建datagrid），而且用这种方法以后增加、删除列改起来方便。

 

下面上页面的代码：（绿色为修改新加的属性）

<table id="usert" fit="true" editUrl="/ktkf/admin/manage" style="display:none;">

 <thead> <tr> <th field="yhm" width="60" edit="false">用户名</th> <th field="yhmqc" width="70">用户名全称</th> <th field="ssbm" width="100">所属部门</th> <th field="szdw" width="100">所在单位</th> <th field="dzyj" formatter="replace_Null" width="120">电子邮件</th> <th field="lxdh" formatter="replace_Null" width="100">联系电话</th> <th field="sjksq" width="60">数据库授权</th> <th field="zhfwsj" width="100" edit="false">最后访问时间</th><!-- 不可编辑 :标志位：edit--> <th field="bz" formatter="replace_Null" width="60">备注</th> <th width="70" type="edit">操作</th> </tr> </thead>

 </table>