zoukankan      html  css  js  c++  java
  • easyui datagrid 跨页选择

    项目中遇到跨页选择(项目使用easyui):有多页数据,在当前页面选择后,下一页继续选择,返回之前页面时,仍然能记住之前选中的行。最后对多页选中的数据统一提交。

    翻看easyui文档,官方并没有提供相应方法,easyui当前最新版本1.3.2也没有找到,最后使用了一个比较传统的方式,各位看官如果有更好的方式,劳烦告知,感激不尽。

    声明全局数组变量

    1 var ids = new Array();

    使用easyui datagrid的四个方法处理

     1 onSelect:function(index,row){
     2 addItem(row.assetsId);
     3 },
     4 onUnselect:function(index,row){
     5 removeItem(row.assetsId)
     6 },
     7 onSelectAll:function(rows){
     8 addAll(rows);
     9 },
    10 onUnselectAll:function(rows){
    11 removeAll(rows);
    12 },

    对应处理函数

     1 //add onSelect
     2     function addItem(assetsId){
     3         var arrs = ids.join();
     4         console.info("arrs="+arrs);
     5         if(arrs.indexOf(assetsId) == -1){
     6             ids.push(assetsId);
     7         }
     8         console.info("ids="+ids);
     9     }
    10     
    11     //add current page
    12     function addAll(rows){
    13         for(var i=0; i<rows.length; i++){
    14             var arrs = ids.join();
    15             if(arrs.indexOf(rows[i].assetsId) == -1){
    16                 ids.push(rows[i].assetsId);
    17             }
    18         }
    19         console.info("addAll-ids="+ids);
    20     }
    21     
    22     //remove unSelect
    23     function removeItem(assetsId){
    24         var arrs = ids.join();
    25         console.info("arrs="+arrs);
    26         var indexTmp = arrs.indexOf(assetsId);
    27         console.info("index="+indexTmp);
    28         if(indexTmp != -1){
    29             for(var i=0; i<ids.length; i++){
    30                 if(ids[i] == assetsId){
    31                     ids.splice(i,1);
    32                 }
    33             }
    34         }
    35         console.info("ids="+ids);
    36     }
    37     
    38     
    39     //remove current page
    40     function removeAll(rows){
    41         for(var i=0; i<rows.length; i++){
    42             var arrs = ids.join();
    43             var indexTmp = arrs.indexOf(rows[i].assetsId);
    44             if(indexTmp != -1){
    45                 for(var j=0; j<ids.length; j++){
    46                     if(ids[j] == rows[i].assetsId){
    47                         ids.splice(j,1);
    48                     }
    49                 }
    50             }
    51         }
    52         console.info("removeAll-ids="+ids);
    53     }

    返回之前页面后,显示已经选中的数据

     1 onLoadSuccess: function(){
     2             if(!ids){
     3                 return;
     4             }
     5             var myrows = $('#assetsTable').datagrid('getRows');
     6             for(var i=0; i<myrows.length; i++){
     7                 for(var j=0; j<ids.length; j++){
     8                     if(myrows[i].assetsId == ids[j]){
     9                         var index = $('#assetsTable').datagrid('getRowIndex',myrows[i]);
    10                         $('#assetsTable').datagrid('selectRow',index);
    11                     }
    12                 }
    13             }
    14         },

    数据提交时,直接提交ids即可,无需调用 datagrid 的 getSelections 方法,就算调用获取的数据也不完整。

  • 相关阅读:
    Vue学习之路5-v-model指令
    Vue学习之路4-v-bind指令
    Laravel 中的 Many-To-Many
    laravel获取checkbox值的小技巧
    查看 Laravel 的 SQL 语句的方法
    那些好用的插件(持续更新)
    写代码原则
    Laravel 5.5 Blade::if 简介
    Laravel 项目使用 Carbon 人性化显示文章发表时间
    php7简短而安全的数组遍历方法
  • 原文地址:https://www.cnblogs.com/hanleytang/p/2862554.html
Copyright © 2011-2022 走看看