总共做过三次easyui的datagrid编辑功能。前两次都看不懂官网demo，最后参考网友方案来实现的，这次是根据官网demo来实现，感觉官网的demo更精简一些。唉。。。杀猪刀啊
效果图
效果图
代码结构
代码结构
分析
官网例子是这个：jquery-easyui-1.4.3\demo\datagrid\cellediting.html，已经实现了编辑功能。但是我们的编辑肯定不止前端编辑，还需要把数据提交到后台。这里主要就是实现了将改变的数据提交到后台。
- 我们给datagrid添加
onAfterEdit方法，在这个方法中判断数据是否有改变，是否需要提交。 - 我们把数据提交到了后台，数据对的话我们将数据提交，数据错误我们将数据回退。在前端页面使用这两个方法即可：
acceptChanges/rejectChanges
onAfterEdit:function(index,row,changes){//行号，行的所有数据，改变的数据
console.log(index);
console.log(row);
console.log(changes);
var change = false;//判断是否需要提交
for(x in changes){
change = true;
break;
}
if(change){
console.log("在这里将改变提交到后台。");
//执行正常就接受改变，否则撤销改变
if(accept){//一个全局变量，只有测试的时候用。项目中应该根据服务端返回的修改是否成功标志来进行判断。
accept = false;
console.log("接受改变");
$("#dg").datagrid("acceptChanges");
}else{
accept = true;
console.log("回退改变");
$("#dg").datagrid("rejectChanges");
}
}
}
jsp文件
WebContent/datagrid/cellediting.jsp
<%@ page language="java" contentType="text/html;charset=UTF-8" pageEncoding="UTF-8"%>
<%String path = request.getContextPath();%>
<%String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";%>
Cell Editing in DataGrid - jQuery EasyUI Demo
Cell Editing in DataGrid
Click a cell to start editing.
Item ID
Product
List Price
Unit Cost
Attribute
Status
数据文件
WebContent/datagrid/datagrid_data1.json
{"total":28,"rows":[
{"productid":"FI-SW-01","productname":"Koi","unitcost":10.00,"status":"P","listprice":36.50,"attr1":"Large","itemid":"EST-1"},
{"productid":"K9-DL-01","productname":"Dalmation","unitcost":12.00,"status":"P","listprice":18.50,"attr1":"Spotted Adult Female","itemid":"EST-10"},
{"productid":"RP-SN-01","productname":"Rattlesnake","unitcost":12.00,"status":"P","listprice":38.50,"attr1":"Venomless","itemid":"EST-11"},
{"productid":"RP-SN-01","productname":"Rattlesnake","unitcost":12.00,"status":"P","listprice":26.50,"attr1":"Rattleless","itemid":"EST-12"},
{"productid":"RP-LI-02","productname":"Iguana","unitcost":12.00,"status":"P","listprice":35.50,"attr1":"Green Adult","itemid":"EST-13"},
{"productid":"FL-DSH-01","productname":"Manx","unitcost":12.00,"status":"P","listprice":158.50,"attr1":"Tailless","itemid":"EST-14"},
{"productid":"FL-DSH-01","productname":"Manx","unitcost":12.00,"status":"P","listprice":83.50,"attr1":"With tail","itemid":"EST-15"},
{"productid":"FL-DLH-02","productname":"Persian","unitcost":12.00,"status":"P","listprice":23.50,"attr1":"Adult Female","itemid":"EST-16"},
{"productid":"FL-DLH-02","productname":"Persian","unitcost":12.00,"status":"P","listprice":89.50,"attr1":"Adult Male","itemid":"EST-17"},
{"productid":"AV-CB-01","productname":"Amazon Parrot","unitcost":92.00,"status":"P","listprice":63.50,"attr1":"Adult Male","itemid":"EST-18"}
]}