總共做過三次easyui的datagrid編輯功能。前兩次都看不懂官網(wǎng)demo扰付，最后參考網(wǎng)友方案來實(shí)現(xiàn)的堤撵，這次是根據(jù)官網(wǎng)demo來實(shí)現(xiàn)，感覺官網(wǎng)的demo更精簡一些羽莺。唉实昨。。盐固。殺豬刀啊
效果圖
效果圖
代碼結(jié)構(gòu)
代碼結(jié)構(gòu)
分析
官網(wǎng)例子是這個：jquery-easyui-1.4.3\demo\datagrid\cellediting.html荒给，已經(jīng)實(shí)現(xiàn)了編輯功能。但是我們的編輯肯定不止前端編輯刁卜，還需要把數(shù)據(jù)提交到后臺志电。這里主要就是實(shí)現(xiàn)了將改變的數(shù)據(jù)提交到后臺。
- 我們給datagrid添加
onAfterEdit方法蛔趴，在這個方法中判斷數(shù)據(jù)是否有改變挑辆，是否需要提交。 - 我們把數(shù)據(jù)提交到了后臺，數(shù)據(jù)對的話我們將數(shù)據(jù)提交鱼蝉，數(shù)據(jù)錯誤我們將數(shù)據(jù)回退洒嗤。在前端頁面使用這兩個方法即可：
acceptChanges/rejectChanges
onAfterEdit:function(index,row,changes){//行號，行的所有數(shù)據(jù)魁亦，改變的數(shù)據(jù)
console.log(index);
console.log(row);
console.log(changes);
var change = false;//判斷是否需要提交
for(x in changes){
change = true;
break;
}
if(change){
console.log("在這里將改變提交到后臺渔隶。");
//執(zhí)行正常就接受改變，否則撤銷改變
if(accept){//一個全局變量吉挣，只有測試的時候用派撕。項(xiàng)目中應(yīng)該根據(jù)服務(wù)端返回的修改是否成功標(biāo)志來進(jìn)行判斷。
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("在這里將改變提交到后臺睬魂。");
//執(zhí)行正常就接受改變终吼，否則撤銷改變
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>
數(shù)據(jù)文件
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"}
]}
