jQuery easyUI的datagrid，如何在翻頁之後仍能記錄被選中的行

時間 2019-11-11

標籤 jquery easyui datagrid 如何翻頁之後仍能記錄選中欄目 JQuery 简体版

原文原文鏈接

一、先給出問題解決後的代碼javascript

  1 <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
  2 <%@ taglib prefix="c" uri="http://java.sun.com/jstl/core_rt"%>
  3 <%
  4 String path = request.getContextPath();
  5 String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
  6 %>
  7 
  8 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  9 <html>
 10   <head>
 11     <base href="<%=basePath%>">
 12     <title>添加優惠券步驟2</title>
 13     <meta http-equiv="pragma" content="no-cache">
 14     <meta http-equiv="cache-control" content="no-cache">
 15     <meta http-equiv="expires" content="0">    
 16     <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
 17     <jsp:include page="../layout/script.jsp"></jsp:include>
 18     <c:set var="getDataUrl" value="${pageContext.request.contextPath}/goods/getGoodsOnSale" scope="request" />
 19     <script type="text/javascript">
 20             var $dg;
 21             var $grid;
 22             var ids = '';
 23             var idsArray = new Array();
 24             $(function() {
 25                  $dg = $("#dg");
 26                  $grid=$dg.datagrid({
 27                     url : "${getDataUrl}",
 28                     width : 'auto',
 29                     height : $(this).height()-85,
 30                     pagination:true,
 31                     rownumbers:true,
 32                     border:true,
 33                     striped:true,
 34                     singleSelect:false,
 35                     checkOnSelect:true,
 36                     selectOnCheck:true,
 37                     onBeforeLoad:function(data){
 38                         addSelectedGoodsIdToArray();
 39                     },
 40                     onLoadSuccess:function(data){
 41                         var rowsData = data.rows;
 42                         if(idsArray.length!=0){
 43                           $.each(idsArray,function(i,e){
 44                              for(var index=0;index<rowsData.length;index++){
 45                                   if(rowsData[index].goodsId==e){
 46                                        $dg.datagrid('selectRow',index);
 47                                   }
 48                              }
 49                           });
 50                         }
 51                     },
 52                     onUncheck:function(rowIndex,rowData){
 53                         if(idsArray.length == 0){
 54                         }else{
 55                             for(var index=0;index<idsArray.length;index++){
 56                                 if(idsArray[index] == rowData.goodsId){
 57                                     removeArrayValue(idsArray,rowData.goodsId);
 58                                     break;
 59                                 }
 60                             }
 61                         }
 62                     },
 63                     columns : [ [ {field:'ck',checkbox:true},
 64                                   {field : 'goodsId',hidden:true},
 65                                   {field : 'goodsName',title : '商品標題',width : parseInt($(this).width()*0.3)},
 66                                   {field : 'img1',title : '圖片',width : parseInt($(this).width()*0.1),align : 'left',
 67                                       formatter:function(value,row){
 68                                           if(row.img1 != '')
 69                                               return "<img src = '"+row.img1+"'/>";
 70                                           else
 71                                               return "<img src = '"+row.img1+"'/>";  
 72                                         }
 73                                   },
 74                                   {field : 'categoryId',title : '分類',width : parseInt($(this).width()*0.1),align : 'left',
 75                                         formatter:function(value,row){
 76                                           var cates = row.categorys;
 77                                           for(var i=0;i<cates.length;i++){
 78                                               if(cates[i].categoryId === row.categoryId){
 79                                                   return cates[i].categoryName;
 80                                               }
 81                                           } 
 82                                         }
 83                                   },
 84                                   {field : 'goodsNumber',title : '庫存',width : parseInt($(this).width()*0.1)},
 85                                   {field : 'isOnSale',title : '上架',width :parseInt($(this).width()*0.1),align : 'left',
 86                                       formatter:function(value,row){
 87                                           if(row.isOnSale){
 88                                               return "<font color=green>是<font>";
 89                                           } else{
 90                                               return "<font color=red>否<font>"; 
 91                                           }
 92                                         }
 93                                   },
 94                                   {field : 'lastUpdate',title : '上架時間',width : parseInt($(this).width()*0.1),align : 'left',
 95                                       formatter:function(value,row){
 96                                             var thisDate = new Date(row.lastUpdate);
 97                                               return formatterDate(thisDate);
 98                                       }
 99                                   }
100                                   ] ],toolbar:'#tb'
101                 });
102                 
103                 //搜索框
104                 /* $("#searchbox").searchbox({ 
105                      menu:"#mm", 
106                      prompt :'模糊查詢',
107                     searcher:function(value,name){   
108                         var str="{\"searchName\":\""+name+"\",\"searchValue\":\""+value+"\"}";
109                         var obj = eval('('+str+')');
110                         $dg.datagrid('reload',obj); 
111                     }
112                    
113                 });  */
114             });
115             
116             function addCheckedGoodIdToArray(rowIndex,rowData){
117                 console.log("_________________________");
118                 var idsArrayLength = idsArray.length;
119                         
120                 if(idsArray.length == 0){
121                     console.log("push:"+rowData.goodsId);
122                     idsArray.push(rowData.goodsId);
123                 }else{
124                     for(var index=0;index<idsArrayLength;index++){
125                         if(idsArray[index] == rowData.goodsId){
126                             console.log("remove:"+rowData.goodsId);
127                             removeArrayValue(idsArray,rowData.goodsId);
128                             break;
129                         }
130                         if(index == idsArrayLength-1){
131                             console.log("push:"+rowData.goodsId);
132                             idsArray.push(rowData.goodsId);
133                         }
134                     }
135                 }
136                 
137                 console.log("---------------");
138                 for(var index=0;index<idsArray.length;index++){
139                     console.log(idsArray[index]);
140                 }
141                 console.log("---------------");
142             }
143             
144             function addSelectedGoodsIdToArray(){
145                 var rows = $dg.datagrid('getSelections');
146                 if(rows.length>0){
147                     $.each(rows,function(i,row){
148                         if(idsArray.length == 0){
149                             idsArray.push(row.goodsId);
150                         }else{
151                             for(var index=0;index<idsArray.length;index++){
152                                 if(idsArray[index] == row.goodsId){
153                                     break;
154                                 }
155                                 if(index == idsArray.length-1){
156                                     idsArray.push(row.goodsId);
157                                     break;
158                                 }
159                             }
160                         }
161                     });
162                 }
163             }
164             
165             function removeSelectedGoodsIdToArray(rows){
166                 //var rows = $dg.datagrid('getSelections');
167                 if(rows.length>0){
168                     $.each(rows,function(i,row){
169                         if(idsArray.length > 0){
170                             for(var index=0;index<idsArray.length;index++){
171                                 removeArrayValue(idsArray,row.goodsId);
172                             }
173                         }
174                     });
175                 }
176             }
177         
178             function nextStep() {
179                 addSelectedGoodsIdToArray();
180                 console.log("ids length"+idsArray.length);
181                 if(idsArray.length>0){
182                     ids = '';
183                     for(var index=0;index<idsArray.length;index++){
184                         ids += idsArray[index];
185                         if(index != idsArray.length-1){
186                             ids += ',';
187                         }
188                     }
189                 }else{
190                     
191                 }
192                 parent.$.modalDialog({
193                     title : '商品排序',
194                     width : 1632,
195                     height : 830,
196                     href : "${pageContext.request.contextPath}/coupons/showAddStep3?goodsId="+ids,
197                     onLoad:function(){
198                         
199                     },
200                     buttons : [ {
201                         text : '下一步',
202                         iconCls : 'icon-ok',
203                         handler : function() {
204                             parent.$.modalDialog.openner= $grid;//由於添加成功以後，須要刷新這個dataGrid，因此先預約義好
205                             var f = parent.$.modalDialog.handler.find("#form");
206                             f.submit();
207                         }
208                     }, {
209                         text : '取消',
210                         iconCls : 'icon-cancel',
211                         handler : function() {
212                             parent.$.modalDialog.handler.dialog('destroy');
213                             parent.$.modalDialog.handler = undefined;
214                         }
215                     }
216                     ]
217                 });
218             }
219             //編輯
220             function editOneGood() {
221                 //console.log("run edit");
222                 var row = $dg.datagrid('getSelected');
223                 if (row) {
224                     window.location.href="${pageContext.request.contextPath}/goods/showEditGoods?goodsId="+row.goodsId;
225                 }else{
226                     parent.$.messager.show({
227                         title :"提示",
228                         msg :"請選擇一行記錄!",
229                         timeout : 1000 * 2
230                     });
231                 }
232             }
233             function addOneGood() {
234                 //console.log("run edit");
235                 window.location.href="${pageContext.request.contextPath}/goods/showAddGood";
236             }
237             
238             //高級搜索 刪除 row
239             function tbCompanySearchRemove(curr) {
240                     $(curr).closest('tr').remove();
241             }
242             //高級查詢
243             function tbsCompanySearch() {
244                 jqueryUtil.gradeSearch($dg,"#tbCompanySearchFm","jsp/company/companySearchDlg.jsp");
245             }
246             
247             /**
248              * 格式化日期（含時間）
249              */
250             function formatterDate(date) {
251                 var datetime = date.getFullYear()
252                 + "-"// "年"
253                 + ((date.getMonth() + 1) >= 10 ? (date.getMonth() + 1) : "0"
254                         + (date.getMonth() + 1))
255                 + "-"// "月"
256                 + (date.getDate() < 10 ? "0" + date.getDate() : date
257                         .getDate())
258                 + " "
259                 + (date.getHours() < 10 ? "0" + date.getHours() : date
260                         .getHours())
261                 + ":"
262                 + (date.getMinutes() < 10 ? "0" + date.getMinutes() : date
263                         .getMinutes())
264                 + ":"
265                 + (date.getSeconds() < 10 ? "0" + date.getSeconds() : date
266                         .getSeconds());
267                 return datetime;
268             }
269             
270             function removeArrayValue(arr, val) {
271               for(var i=0; i<arr.length; i++) {
272                 if(arr[i] == val) {
273                   arr.splice(i, 1);
274                   break;
275                 }
276               }
277             }
278         </script>
279   </head>
280   <body>
281       <div data-options="region:'center',border : false">
282           <div class="well well-small" style="margin-left: 5px;margin-top: 5px">
283             <span class="badge">添加優惠券步驟</span>
284             <p>
285                 1：填寫優惠券基本信息&nbsp——————————&nbsp<span class="label-info"><strong>2：選擇優惠券中的商品</strong></span>&nbsp——————————&nbsp3：保存並生成優惠券
286             </p>
287         </div>
288         <div id="tb" style="padding:2px 0">
289             <table cellpadding="0" cellspacing="0">
290                 <tr>
291                     <td style="padding-left:2px">
292                             <a href="javascript:void(0);" class="easyui-linkbutton" iconCls="icon-edit" plain="true" onclick="nextStep()">下一步</a>
293                             <a href="javascript:void(0);" class="easyui-linkbutton" iconCls="icon-edit" plain="true" onclick="">取消</a>
294                     </td>
295                     <!-- <td style="padding-left:2px">
296                         <input id="searchbox" type="text"/>
297                     </td> -->
298                     <!--  <td style="padding-left:2px">
299                         <a href="javascript:void(0);" class="easyui-linkbutton" iconCls="icon-search" plain="true" onclick="tbsCompanySearch();">高級查詢</a>
300                     </td>-->
301                 </tr>
302             </table>
303         </div>
304         <table id="dg" title="添加優惠券步驟2"></table>
305       </div>    
306   </body>
307 </html>

二、頁面大概的樣子html

三、問題及解答，問題層層遞進，每個問題的前提是前一個問題已經解決。java

已知：一個普通的datagrid表格。jquery

問題1：如何實現翻頁。數組

前臺：pagination:true，表示顯示分頁toolbar。app

後臺：jsp

 1 @RequestMapping("/getGoodsOnSale")
 2     @ResponseBody
 3     public GridModel getGoodsOnSale(HttpServletRequest request, @RequestParam("page") Integer page,
 4             @RequestParam("rows") Integer rows) {
 5         Integer userRight = (Integer)(LoginController.getFromSession(request, ConstantsUtil.SESSION_USER_RIGHT));
 6         List<Goods> goods = new ArrayList<Goods>();
 7         Long total = new Long(0);
 8         if(userRight.equals(ConstantsUtil.USER_RIGHTS_ADMIN)){
 9             goods = goodsService.getGoodsOnSale(page, rows);
10             total = goodsService.getGoodsOnSaleCount();
11         }else{
12             List<Brand> brands = (List<Brand>)(LoginController.getFromSession(request, ConstantsUtil.SESSION_USER_BRANDS));
13             goods = goodsService.getGoodsOnSale(brands,page, rows);
14             total = goodsService.getGoodsOnSaleCount(brands);
15         }
16         GridModel gridModel = getGoods(goods, request);
17         gridModel.setTotal(total);
18         return gridModel;
19     }

說明：後臺從request.getParameter裏取兩個參數，page和rows，分別表明當前的頁數及每頁顯示幾行數據。total是總數據數。測試

GridModel類：ui

public class GridModel {
    private List  rows= new ArrayList();
    private Long total=0L;
    public List getRows() {
        return rows;
    }
    public void setRows(List rows) {
        this.rows = rows;
    }
    public Long getTotal() {
        return total;
    }
    public void setTotal(Long total) {
        this.total = total;
    }
}

問題2：如何在datagrid表格裏第一列顯示checkbox，而且讓行選中和checkbox選中等同? this

答：

一、singleSelect：false，設置表格爲複選模式

二、{field:'ck',checkbox:true}，這裏面的checkbox:true表示該列顯示覆選按鈕。

二、查看easyUI的文檔：http://www.jeasyui.net/plugins/183.html能夠得知兩個屬性——checkOnSelect和selectOnCheck。

checkOnSelect:若是設置爲 true，當用戶點擊某一行時，則會選中/取消選中複選框。若是設置爲 false 時，只有當用戶點擊了複選框時，纔會選中/取消選中複選框。

selectOnCheck:若是設置爲 true，點擊複選框將會選中該行。若是設置爲 false，選中該行將不會選中複選框。

因此，將這兩個屬性置爲true。

問題3：如何在執行翻頁之前將被選中的行的主鍵保存起來

答：此問題可分解爲如下兩個問題：

一、如何將勾選中的行保存起來

由於翻頁是從新到後臺取下一頁數據，也就是數據從新加載的過程，因此能夠考慮在onBeforeLoad時作相關處理。

先定義好一個數組idsArray用來保存選中行的主鍵，再用$dg.datagrid('getSelections')取得選中的行。也就是105行的方法addSelectedGoodsIdToArray作的事情。

下面看上邊發的大概樣子圖片，點擊「下一步」是將當前datagrid中被選中的內容提交到後臺處理，即頁面中的function nextStep()要作的事，因此在netStep()中須要首先執行

一下addSelectedGoodsIdToArray，將選中的內容保存起來，不然當數據提交後臺時，當前這一頁選中的行並無存起來，由於當前這一頁的addSelectedGoodsIdToArray並未觸發執行。

二、如何將選中之後又取消選中的行從保存的記錄中刪除

通過測試，在我將checkOnSelect和selectOnCheck都設爲true之後， onClickRow在被調用時會自動調用onCheck或onUncheck(請注意此處的拼寫，後一個check的首字母是小寫，若是誤

寫成大寫就會失效)，而onCheck和onUncheck在執行時並不會自動調用onClickRow。因此，若是咱們想要在用戶取消勾選一行之後作點事，只要在onUncheck裏作就好了。這就是52行

作的事。

問題4：如何在datagrid數據加載完以後自動將被選中的行選中？

答：由於翻頁是從新到後臺取下一頁數據，也就是數據從新加載的過程。因此只要在onLoadSuccess中解決這個勾選的問題，那麼當向前翻頁的時候，以前選中的行也會實現自動勾選。

一、onLoadSuccess方法中傳進來的data參數，它的data.rows()表示當前datagrid中的數據。

二、$dg.datagrid('selectRow',index);將第index行的數據選中。這裏的index從零開始，index不等於當前行的數據的主鍵，而是表格的天然行號。

三、data.rows().goodsId:取得當前行數據的goodsId屬性的值

知道了以上三點，大概就清楚了，遍歷idsArray，將當前行的主鍵與之匹配，匹配上了就勾選。

注意第三點，咱們選擇一列值的前提是該列被顯示在表格中，若是想隱藏它，只需hidden:true。

參考文章：http://www.jeasyui.net/plugins/183.html

http://my.oschina.net/u/1410278/blog/185614

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。