碼上歡樂
相關內容    簡體    繁體

EasyUi DataGrid中數據編輯方式及編輯后數據獲取，校驗處理

本文轉載自   查看原文   2016-12-07 16:16   3708    可編輯行/ onChange/ DataGrid/ 獲取光標所在行的行號/ Editor/ EasyUi

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

 


免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。



猜您在找 EasyUI-datagrid獲取編輯行的數據 easyui datagrid行編輯中數據聯動 easyui datagrid 批量編輯和提交數據 EasyUI學習-----表格DataGrid獲取數據的方式 easyui的datagrid用js插入數據等編輯功能的實現 在js中獲取easyui datagrid的數據 EasyUI之dataGrid的行內編輯 EasyUI之dataGrid的行內編輯 easyui datagrid的列編輯 Dev中GridView篩選后的數據獲取
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM