为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>