首页 > 代码库 > 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" >&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="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" %>
View Code

 

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