EasyUi DataGrid中数据编辑方式及编辑后数据获取，校验处理

时间：2024-02-26 09:21:24

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" >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;保证金余额合计：</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" >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;纸票已使用合计：</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" >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;池调节余额合计：</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" %>
View Code