easyui的datagrid编辑（参考官网demo添加提交功能
2016-08-03 本文已影响1063人
全栈未遂工程师
总共做过三次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+"/";%>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<base href="<%=basePath %>">
<title>Cell Editing in DataGrid - jQuery EasyUI Demo</title>
<link rel="stylesheet" type="text/css" href="jquery-easyui-1.4.3/themes/bootstrap/easyui.css">
<link rel="stylesheet" type="text/css" href="jquery-easyui-1.4.3/themes/icon.css">
<script type="text/javascript" src="jquery-easyui-1.4.3/jquery.min.js"></script>
<script type="text/javascript" src="jquery-easyui-1.4.3/jquery.easyui.min.js"></script>
</head>
<body>
<h2>Cell Editing in DataGrid</h2>
<p>Click a cell to start editing.</p>
<div style="margin:20px 0;"></div>
<table id="dg" title="Cell Editing in DataGrid" style="width:700px;height:auto"
data-options="
iconCls: 'icon-edit',
singleSelect: true,
url: 'datagrid/datagrid_data1.json',
method:'get'
">
<thead>
<tr>
<th data-options="field:'itemid',width:80">Item ID</th>
<th data-options="field:'productid',width:100,editor:'text'">Product</th>
<th data-options="field:'listprice',width:80,align:'right',editor:{type:'numberbox',options:{precision:1}}">List Price</th>
<th data-options="field:'unitcost',width:80,align:'right',editor:'numberbox'">Unit Cost</th>
<th data-options="field:'attr1',width:250,editor:'text'">Attribute</th>
<th data-options="field:'status',width:60,align:'center',editor:{type:'checkbox',options:{on:'P',off:''}}">Status</th>
</tr>
</thead>
</table>
<script type="text/javascript">
$.extend($.fn.datagrid.methods, {
editCell: function(jq,param){
return jq.each(function(){
var opts = $(this).datagrid('options');
var fields = $(this).datagrid('getColumnFields',true).concat($(this).datagrid('getColumnFields'));
for(var i=0; i<fields.length; i++){
var col = $(this).datagrid('getColumnOption', fields[i]);
col.editor1 = col.editor;
if (fields[i] != param.field){
col.editor = null;
}
}
$(this).datagrid('beginEdit', param.index);
var ed = $(this).datagrid('getEditor', param);
if (ed){
if ($(ed.target).hasClass('textbox-f')){
$(ed.target).textbox('textbox').focus();
} else {
$(ed.target).focus();
}
}
for(var i=0; i<fields.length; i++){
var col = $(this).datagrid('getColumnOption', fields[i]);
col.editor = col.editor1;
}
});
},
enableCellEditing: function(jq){
return jq.each(function(){
var dg = $(this);
var opts = dg.datagrid('options');
opts.oldOnClickCell = opts.onClickCell;
opts.onClickCell = function(index, field){
if (opts.editIndex != undefined){
if (dg.datagrid('validateRow', opts.editIndex)){
dg.datagrid('endEdit', opts.editIndex);
opts.editIndex = undefined;
} else {
return;
}
}
dg.datagrid('selectRow', index).datagrid('editCell', {
index: index,
field: field
});
opts.editIndex = index;
opts.oldOnClickCell.call(this, index, field);
}
});
}
});
$(function(){
$('#dg').datagrid({
onAfterEdit:function(index,row,changes){
console.log(index);
console.log(row);
console.log(changes);
var change = false;
//console.log(row);
//console.log(changes);
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");
}
}
}
}).datagrid('enableCellEditing');
});
var accept = true;
</script>
</body>
</html>
数据文件
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"}
]}
