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

 

 

评论

5 楼 kisbo110 2013-01-24  

写的什么是什么啊？现在高版本的都已近国有编辑功能了

4 楼 noblemoon 2011-08-01  

你好，咨询个问题。我在使用datagrid编辑时，输入项使用了editor进行校验，“endedit”时，如果输入项未通过校验，那么我再使用“getselectted”获得当前row时，拿不到每一个cell中的最新数据，只能拿到该row初始化进来的值；

举个例子，我在后台拿到user的username：Tome和password：123456，
对其进行修改，将username变成‘’，这样校验条件就不满足了，提示了个叹号。
我在点击保存时，js通过“getSelected”拿到的row.username仍然是我最初从数据库查出来的那个Tom，无法判断是否通过校验，能告诉下有什么方法么？
谢谢

3 楼 haisheng 2010-10-22  

EasyUi1.1.1以前的版本是没有行编辑功能的

2 楼 MZhangShao 2010-10-15  

EasyUi 本身是提供datagrid编辑行功能的，而且功能很强大，楼主还是多看看API吧

1 楼 danny.chiu 2010-05-30  

上面代码有误，replace_null是什么，如果想和大家分享就把代码发全一些，谢谢