首页 > 代码库 > EasyUi DataGrid中数据编辑方式及编辑后数据获取，校验处理
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="http://www.mamicode.com/${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="http://www.mamicode.com/保 存" id="butSave"/> 91 <input type="button" class="button" value="http://www.mamicode.com/返 回" 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="http://www.mamicode.com/${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="http://www.mamicode.com/${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="http://www.mamicode.com/${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中数据编辑方式及编辑后数据获取，校验处理
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。