EasyUi DataGrid中数据编辑方式及编辑后数据获取，校验处理
Posted hyiam
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了EasyUi DataGrid中数据编辑方式及编辑后数据获取，校验处理相关的知识，希望对你有一定的参考价值。
EasyUi中的DataGrid提供前台编辑的相关函数。
实现客户选中DataGrid中一列后，对选中列中的一个字段进行编辑，并对数据进行实时校验后，传递至后台保存的需求，
主要涉及到DataGrid中设置编辑单元格，获取编辑单元格，编辑单元格的onchange事件处理，通过当前光标所在编辑单元格获取所在行。
1. 设置编辑单元格
在列定义中增加editor属性，参数为type，options
eg:
{title:\'上级分配额度\',field:\'assigned_amount_temp\',width:150,sortable:true,align:\'right\',editor:{type:\'numberbox\',options:{precision:2,groupSeparator:\',\'}}}
通过beginEdit方法设置行开始编辑，参数为行号（index），设置后，列会变成可输入状态
eg：
$(\'#datagrid\').datagrid(\'beginEdit\', index);
2. 获取编辑单元格，
通过getEditor方法获取单元格，参数为options，使用行号和列名可以唯一定位cell
eg：
var ed = $(\'#datagrid\').datagrid(\'getEditor\', {index:index,field:\'assigned_amount_temp\'});
3. 为编辑单元格增加onChange事件
获取到编辑单元格后，可以为其增加onChange事件
eg：
1 $(ed.target).numberbox({ onChange: function () { 2 // 获取编辑对象的value 3 $(ed.target).numberbox(\'getValue\'); 4 // 设置编辑对的value 5 $(ed.target).numberbox(\'setValue\',removeAmountFormat(rowData[\'assigned_amount_temp\'])); 6 });
4. 通过当前光标所在编辑单元格获取所在行
在编辑单元格的onChange方法中，获取当前行
eg：
$(ed.target).numberbox({ onChange: function (newValue,oldValue) {
// 获取光标所在行的行号 通过当前对象往上获取第一个datagrid-row的tr，然后那它的datagrid-row-index属性值
var rowIndex = $(this).closest("tr.datagrid-row").attr("datagrid-row-index");
var rows = $("#datagrid").datagrid(\'getRows\');
});
附录：
EasyUi 官方API文档 http://www.jeasyui.com/documentation/#
功能页面展示：
此次功能核心的jsp代码：
1 <%@ page language="java" contentType="text/html; charset=UTF-8"%> 2 3 <%-- 引入页面头 --%> 4 <%@ include file="/pageHead.jsp" %> 5 6 <form name="queryform" id="queryform" action="" method="post"> 7 <input type="hidden" id="draftGroupPoolId" name="draftGroupPoolId" value="${draftGroupPool.id}" /> 8 <div class="pageMain"> 9 <div class="pageTitle">票据池额度分配</div> 10 <div class="pageBody"> 11 <table class="tableFrom"> 12 <tr> 13 <td class="td01"></td> 14 <td class="td02">集团客户名称：</td> 15 <td class="td04">${draftGroupPool.client.name}</td> 16 <td class="td01"></td> 17 <td class="td02">集团票据池名称：</td> 18 <td class="td04">${draftGroupPool.group_pool_name}</td> 19 </tr> 20 21 <tr> 22 <td class="td01"></td> 23 <td class="td02" ><b>集团池余额合计：</b></td> 24 <td class="td04"> 25 <b> 26 <script type="text/javascript">document.write(new Number(\'${draft_amount}\').add(new Number(\'${bond_amount}\')).add(new Number(\'${pool_adjust_amount}\')).formatMoney(2,"",",","."));</script> 27 </b> 28 </td> 29 30 <td class="td01"></td> 31 <td class="td02" ><b>集团池已使用余额合计：</b></td> 32 <td class="td04"> 33 <b> 34 <script type="text/javascript">document.write(new Number(\'${ebill_used_amount}\').add(new Number(\'${used_amount}\')).formatMoney(2,"",",","."));</script> 35 </b> 36 </td> 37 </tr> 38 39 <tr> 40 <td class="td01"></td> 41 <td class="td02" >其中：在池票据余额合计：</td> 42 <td class="td04"> 43 <script type="text/javascript">document.write(new Number(\'${draft_amount}\').formatMoney(2,"",",","."));</script> 44 </td> 45 <td class="td01"></td> 46 <td class="td02" >其中：电票已使用合计：</td> 47 <td class="td04"> 48 <script type="text/javascript">document.write(new Number(\'${ebill_used_amount}\').formatMoney(2,"",",","."));</script> 49 </td> 50 </tr> 51 <tr> 52 <td class="td01"></td> 53 <td class="td02" > 保证金余额合计：</td> 54 <td class="td04"> 55 <script type="text/javascript">document.write(new Number(\'${bond_amount}\').formatMoney(2,"",",","."));</script> 56 </td> 57 58 <td class="td01"></td> 59 <td class="td02" > 纸票已使用合计：</td> 60 <td class="td04"> 61 <script type="text/javascript">document.write(new Number(\'${used_amount}\').formatMoney(2,"",",","."));</script> 62 </td> 63 </tr> 64 <tr> 65 <td class="td01"></td> 66 <td class="td02" > 池调节余额合计：</td> 67 <td class="td04"> 68 <script type="text/javascript">document.write(new Number(\'${pool_adjust_amount}\').formatMoney(2,"",",","."));</script> 69 </td> 70 <td class="td01"></td> 71 <td class="td02" ></td> 72 <td class="td04"> 73 </td> 74 </tr> 75 76 <tr> 77 <td class="td01"></td> 78 <td class="td02" ><b>集团调配后余额合计：</b></td> 79 <td class="td04" > 80 <b><div id="after_assign_amount"><script type="text/javascript">document.write(new Number(\'${after_assign_amount}\').formatMoney(2,"",",","."));</script></div></b> 81 </td> 82 <td class="td01"></td> 83 <td class="td02" ></td> 84 <td class="td04"> 85 86 </td> 87 </tr> 88 <tr> 89 <td class="td03" colspan="6" align="right"> 90 <input type="button" class="button" value="保 存" id="butSave"/> 91 <input type="button" class="button" value="返 回" id="butBack"/> 92 </td> 93 </tr> 94 </table> 95 96 <table width="100%"> 97 <tr> 98 <td> 99 <table id="datagrid"></table> 100 </td> 101 </tr> 102 </table> 103 </div> 104 </div> 105 106 <div id="dialog" > 107 </div> 108 109 </form> 110 <script type="text/javascript"> 111 var url = ""; 112 var after_assign_amount = new Number(\'${after_assign_amount}\'); 113 var rowIndex = 0; 114 var tableTitle = $(".pageTitle").html(); 115 $(document).ready(function(){ 116 //客户放大镜 117 $("#manage_clientname").magnifier({ 118 url:\'${systemctx}/commonmagnifier/queryClientMagnifier.json\', 119 columns:[[ 120 {title:\'序号\',field:\'id\',hidden:true, formel:\'manage_clientid\'}, 121 {title:\'管理单位名称\',field:\'name\',width:180,sortable:true, formel:\'manage_clientname\'}, 122 {title:\'管理单位编号\',field:\'code\',width:180} 123 ]], 124 sortName:\'code\', 125 sortOrder:\'asc\', 126 formid:\'queryform\', 127 linkName:\'name\', 128 onBeforeOpen:function(p){//打开放大镜前 129 var queryParams = {//放大镜查询SQL所需的参数 130 agency_type:\'1002\', 131 clientcode:$("input[name=\'manage_clientname\']").val() 132 }; 133 return queryParams; 134 } 135 }); 136 137 $(\'#datagrid\').datagrid({ 138 width:document.documentElement.clientWidth - 50, 139 height:\'400\', 140 nowrap:true, 141 formid:\'queryform\', 142 autoRowHeight:false, 143 striped:true, 144 url:\'${systemctx}/draft/draftPool/queryDraftPoolAssignInfo4DataGrid.json?draftGroupPoolId=${draftGroupPool.id}\', 145 sortName:\'pool_name\', 146 sortOrder:\'desc\', 147 remoteSort:false, 148 pagination:true, 149 rownumbers:true, 150 showFooter:true, 151 columns:[[ 152 {field:\'ck\', checkbox:true}, 153 {title:\'id\',field:\'id\',hidden:true}, 154 {title:\'票据池名称\',field:\'pool_name\',width:135,sortable:true,align:\'center\'}, 155 {title:\'在池票据余额\',field:\'draft_amount\',width:150,sortable:true,align:\'right\'}, 156 {title:\'保证金帐户余额\',field:\'bond_amount\',width:150,align:\'right\'}, 157 // {title:\'电票质押金额\',field:\'ebill_pledge_amount\',width:100,align:\'right\'}, 158 {title:\'池调节额度\',field:\'pool_adjust_amount\',width:100,align:\'right\'}, 159 {title:\'纸票已用额度\',field:\'used_amount\',width:150,sortable:true,align:\'right\'}, 160 {title:\'电票已用额度\',field:\'ebill_used_amount\',width:150,sortable:true,align:\'right\'}, 161 // {title:\'剩余额度\',field:\'surplus_amount\',width:130,sortable:true,align:\'right\'}, 162 {title:\'上级分配额度\',field:\'assigned_amount_temp\',width:150,sortable:true,align:\'right\',editor:{type:\'numberbox\',options:{precision:2,groupSeparator:\',\'}}} 163 ]], 164 toolbar:[ 165 { 166 text:\'导出当前列表\',iconCls:\'icon-export\',handler:function(){ 167 datagridExcelExport(\'datagrid\',\'queryform\',tableTitle,0); 168 } 169 }, 170 { 171 text:\'导出所有列表\',iconCls:\'icon-export\',handler:function(){ 172 datagridExcelExport(\'datagrid\',\'queryform\',tableTitle,1); 173 } 174 } 175 ], 176 onUncheck:function(index, rowData){ 177 after_assign_amount = totalAssignAmount(); 178 var ed = $(\'#datagrid\').datagrid(\'getEditor\', {index:index,field:\'assigned_amount_temp\'}); 179 // 加上数据库中存储的上级分配金额减去输入的金额 180 after_assign_amount = after_assign_amount.sub(new Number(removeAmountFormat($(ed.target).numberbox(\'getValue\')))).add(new Number(removeAmountFormat(rowData[\'assigned_amount_temp\']))); 181 document.getElementById("after_assign_amount").innerHTML=after_assign_amount.formatMoney(2,"",",","."); 182 // 更新集团调配后余额合计 183 $(\'#datagrid\').datagrid(\'cancelEdit\', index); 184 185 }, 186 onCheck:function(index, rowData){ 187 $(\'#datagrid\').datagrid(\'beginEdit\', index); 188 var ed = $(\'#datagrid\').datagrid(\'getEditor\', {index:index,field:\'assigned_amount_temp\'}); 189 $(ed.target).numberbox({ onChange: function () { 190 // 校验下级分配的额度不能小于单位已使用的额度 191 if(new Number(removeAmountFormat($(ed.target).numberbox(\'getValue\')))<new Number(removeAmountFormat(rowData[\'used_amount\'])).add(new Number(removeAmountFormat(rowData[\'ebill_used_amount\'])))){ 192 alert("上级给下级分配的票据池额度，不能小于当前已使用的余额"); 193 $(ed.target).numberbox(\'setValue\',removeAmountFormat(rowData[\'assigned_amount_temp\'])); 194 } 195 after_assign_amount = totalAssignAmount(); 196 // 更新集团调配后余额合计 197 document.getElementById("after_assign_amount").innerHTML=after_assign_amount.formatMoney(2,"",",","."); 198 } 199 }); 200 $(ed.target).focus(); 201 }, 202 onCheckAll:function(rows){ 203 for(var i=0;i<rows.length;i++){ 204 // 上级分配金额列置为编辑状态 205 $(\'#datagrid\').datagrid(\'beginEdit\', i); 206 var ed = $(\'#datagrid\').datagrid(\'getEditor\', {index:i,field:\'assigned_amount_temp\'}); 207 // 为编辑对象设置onChange事件 208 $(ed.target).numberbox({onChange: function (newValue,oldValue) { 209 // 获取光标所在行的行号 210 var rowIndex = $(this).closest("tr.datagrid-row").attr("datagrid-row-index"); 211 var rows = $("#datagrid").datagrid(\'getRows\'); 212 // 校验下级分配的额度不能小于单位已使用的额度 213 if(new Number(removeAmountFormat(newValue))<new Number(removeAmountFormat(rows[rowIndex][\'used_amount\'])).add(new Number(removeAmountFormat(rows[rowIndex][\'ebill_used_amount\'])))){ 214 alert("上级给下级分配的票据池额度，不能小于当前已使用的余额"); 215 $(this).numberbox(\'setValue\',removeAmountFormat(oldValue)); 216 $(this).focus(); 217 } 218 after_assign_amount = totalAssignAmount(); 219 // 更新集团调配后余额合计 220 document.getElementById("after_assign_amount").innerHTML=after_assign_amount.formatMoney(2,"",",","."); 221 } 222 }); 223 } 224 }, 225 onUncheckAll:function(rows){ 226 for(var index=0;index<rows.length;index++){ 227 $(\'#datagrid\').datagrid(\'cancelEdit\', index); 228 } 229 after_assign_amount = new Number(\'${after_assign_amount}\'); 230 // 更新集团调配后余额合计 231 document.getElementById("after_assign_amount").innerHTML=after_assign_amount.formatMoney(2,"",",","."); 232 }, 233 onClickRow:function(index,row){ 234 rowIndex = index; 235 alert(rowIndex); 236 } 237 }); 238 $("#butBack").click(function(){ 239 window.location.href="${systemctx}/draft/draftPool/grouppool/groupPoolAssignQuery.jsp"; 240 }); 241 $("#butSave").click(function(){ 242 $.messager.confirm(\'选择\', \'是否保存选中票据池分配额度\', function(r){ 243 if(r){ 244 var selected_rows = $("#datagrid").datagrid(\'getSelections\'); 245 if(selected_rows==""||selected_rows.length==0) { 246 alert("列表中没有选中的数据"); 247 return; 248 }else { 249 // 下级分配的金额不能大于调配前的票据池余额 250 if(after_assign_amount>new Number(\'${draft_amount}\').add(new Number(\'${bond_amount}\')).add(new Number(\'${pool_adjust_amount}\'))){ 251 alert("集团调配后的余额合计不能大于调配前的池余额合计"); 252 return; 253 } 254 // 选中的id,分配金额收集 255 var ids=""; 256 var assignAmounts =""; 257 var rows = $("#datagrid").datagrid(\'getRows\'); 258 for(var i=0; i<rows.length; i++){ 259 var ed = $(\'#datagrid\').datagrid(\'getEditor\', {index:i,field:\'assigned_amount_temp\'}); 260 if(ed!=null){ 261 ids = rows[i]["id"] + "," + ids; 262 assignAmounts = $(ed.target).numberbox(\'getValue\') + "," + assignAmounts; 263 } 264 } 265 ids = ids.substring(0, ids.length-1); 266 assignAmounts = assignAmounts.substring(0, assignAmounts.length-1); 267 showSending(); 268 $.ajax({ 269 type:\'POST\', 270 url:"${systemctx}/draft/draftPool/saveDraftPoolAssign.json", 271 data:{draftPoolAssignIds:ids,assignAmounts:assignAmounts}, 272 dataType:\'json\', 273 success:function(data){ 274 closeSending(); 275 if(data.messagetype==1){ 276 $.messager.alert("操作提示",data.message , "info", function (){ 277 window.location.href="${systemctx}/draft/draftPool/grouppool/groupPoolAssignQuery.jsp"; 278 }); 279 }else if(data.messagetype==2){ 280 $.messager.alert("操作提示",data.message , "error"); 281 } 282 }, 283 error:function(XMLHttpRequest,textStatus,errorThrown){ 284 try{ 285 }catch (e){} 286 } 287 }); 288 } 289 } 290 }); 291 }); 292 293 }); 294 295 function fnPoolDetail(id,canRevMargin){ 296 window.location.href="${systemctx}/draft/query/draftpoolinfoquery/draftPoolMarginQuery.jsp?poolId="+id+"&canRevMargin="+canRevMargin; 297 } 298 // 循环合计金额 299 function totalAssignAmount(){ 300 var after_assign_amount = 0.00; 301 var rows = $("#datagrid").datagrid(\'getRows\'); 302 for(var i=0;i<rows.length;i++){ 303 var ed = $(\'#datagrid\').datagrid(\'getEditor\', {index:i,field:\'assigned_amount_temp\'}); 304 if(ed!=null){ 305 after_assign_amount = after_assign_amount.add(new Number(removeAmountFormat($(ed.target).numberbox(\'getValue\')))); 306 }else{ 307 after_assign_amount = after_assign_amount.add(new Number(removeAmountFormat(rows[i][\'assigned_amount_temp\']))); 308 } 309 } 310 return after_assign_amount; 311 } 312 313 </script> 314 <%-- 引入页面尾 --%> 315 <%@ include file="/pageFloor.jsp" %>
以上是关于EasyUi DataGrid中数据编辑方式及编辑后数据获取，校验处理的主要内容，如果未能解决你的问题，请参考以下文章
EasyUI datagrid 明细表格中编辑框 事件绑定 及灵活计算 可根据此思路 扩展其他
easyui问题，怎样获取datagrid中编辑列combobox的value值与text值