`
MINGMING_0302
  • 浏览: 23347 次
  • 性别: Icon_minigender_2
文章分类
社区版块
存档分类
最新评论

easyui datagrid 跨页选择

阅读更多
       项目中遇到跨页选择(项目使用easyui):有多页数据,在当前页面选择后,下一页继续选择,返回之前页面时,仍然能记住之前选中的行。最后对多页选中的数据统一提交。
       翻看easyui文档,官方并没有提供相应方法,easyui当前最新版本1.3.2也没有找到,最后使用了一个比较传统的方式,各位看官如果有更好的方式,劳烦告知,感激不尽。


声明全局数组变量
var ids = new Array();


使用easyui datagrid的四个方法处理
onSelect:function(index,row){
    addItem(row.assetsId);
},
onUnselect:function(index,row){
    removeItem(row.assetsId)
},
onSelectAll:function(rows){
    addAll(rows);
},
onUnselectAll:function(rows){
    removeAll(rows);
},


对应处理函数
//add onSelect
    function addItem(assetsId){
        var arrs = ids.join();
        console.info("arrs="+arrs);
        if(arrs.indexOf(assetsId) == -1){
            ids.push(assetsId);
        }
        console.info("ids="+ids);
    }
    
    //add current page
    function addAll(rows){
        for(var i=0; i<rows.length; i++){
            var arrs = ids.join();
            if(arrs.indexOf(rows[i].assetsId) == -1){
                ids.push(rows[i].assetsId);
            }
        }
        console.info("addAll-ids="+ids);
    }
    
    //remove unSelect
    function removeItem(assetsId){
        var arrs = ids.join();
        console.info("arrs="+arrs);
        var indexTmp = arrs.indexOf(assetsId);
        console.info("index="+indexTmp);
        if(indexTmp != -1){
            for(var i=0; i<ids.length; i++){
                if(ids[i] == assetsId){
                    ids.splice(i,1);
                }
            }
        }
        console.info("ids="+ids);
    }
    
    
    //remove current page
    function removeAll(rows){
        for(var i=0; i<rows.length; i++){
            var arrs = ids.join();
            var indexTmp = arrs.indexOf(rows[i].assetsId);
            if(indexTmp != -1){
                for(var j=0; j<ids.length; j++){
                    if(ids[j] == rows[i].assetsId){
                        ids.splice(j,1);
                    }
                }
            }
        }
        console.info("removeAll-ids="+ids);
    }


返回之前页面后,显示已经选中的数据
onLoadSuccess: function(){
            if(!ids){
                return;
            }
            var myrows = $('#assetsTable').datagrid('getRows');
            for(var i=0; i<myrows.length; i++){
                for(var j=0; j<ids.length; j++){
                    if(myrows[i].assetsId == ids[j]){
                        var index = $('#assetsTable').datagrid('getRowIndex',myrows[i]);
                        $('#assetsTable').datagrid('selectRow',index);
                    }
                }
            }
        },


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

相关推荐

    easyui datagrid 表格 打印

    在IT领域,EasyUI Datagrid是一款基于jQuery的前端数据展示组件,它提供了丰富的表格功能,如数据分页、排序、筛选等。当我们需要将Datagrid中的数据进行打印时,可能会遇到一些挑战,因为通常默认的浏览器打印功能...

    easyui datagrid 数据导出到Excel

    在IT行业中,EasyUI Datagrid是一款基于jQuery的前端数据展示组件,它提供了丰富的表格功能,如排序、分页、过滤等。在实际工作中,我们经常需要将这些展示的数据导出到Excel文件,以便进行进一步的分析或存储。下面...

    easyui datagrid 右冻结

    标题中的“easyui datagrid 右冻结”是指在使用EasyUI框架开发Web应用程序时,针对datagrid组件实现右侧列固定的功能。EasyUI是一个基于jQuery的UI库,提供了丰富的组件,包括datagrid,它是一个用于展示表格数据的...

    EasyUI DataGrid过滤用法实例

    EasyUI 是一个基于 jQuery 的 UI 框架,它提供了丰富的组件,包括表格(DataGrid)等,使得 Web 应用程序的界面开发更加便捷。在这个"EasyUI DataGrid 过滤用法实例"中,我们将深入探讨如何利用 EasyUI 的 DataGrid ...

    easyui datagrid中实现上下左右、回车切换单元格

    easyui datagrid中实现上下左右、回车切换单元格easyui datagrid中实现上下左右、回车切换单元格easyui datagrid中实现上下左右、回车切换单元格

    JS EasyUI DataGrid动态加载数据

    JS EasyUI DataGrid是一款基于jQuery和EasyUI框架的数据表格组件,它提供了丰富的功能,如数据分页、排序、过滤和自定义操作等。在实际应用中,动态加载数据是DataGrid的一个重要特性,允许用户在需要时加载更多的...

    easyui datagrid editor回车切换单元格示例,可参考

    easyui datagrid editor回车切换单元格示例,适合熟悉easyui但又不懂如何做的人员,可能参考一下源码JS。

    easyUI datagrid rownumber自适应宽度扩展JS

    easyUI datagrid 自动调整行号大小

    easyui datagrid 增加鼠标悬停弹窗事件

    如果选择修改EasyUI的源码,你需要找到处理行事件的部分,然后插入上述逻辑。这种方式可能需要对EasyUI的源码有一定的熟悉度,且修改后的库可能不再符合EasyUI的官方更新和支持。 7. **扩展实现**: 更推荐的方式...

    jquery easyui datagrid demo

    这个“jquery easyui datagrid demo”包含了一些关于如何使用 jQuery EasyUI 中 Datagrid 组件的示例和相关文档,帮助我们理解和应用 Datagrid。 首先,`datagrid.doc` 文件很可能是 Datagrid 的简要说明文档,它...

    扩展 jQuery EasyUI Datagrid 数据行鼠标悬停离开事件完整版Demo下载

    jQuery EasyUI Datagrid 用户列表鼠标悬停/离开数据行时显示人员头像(onMouseOver/onMouseOut) Demo 扩展 jQuery EasyUI Datagrid 数据行鼠标悬停离开事件,源码奉献!!!

    easyui datagrid在编辑状态下更新列的值

    在使用EasyUI框架开发Web应用时,Datagrid组件是一个非常重要的元素,它提供了一种方便的方式来展示和操作数据。在标题“easyui datagrid在编辑状态下更新列的值”中,我们关注的是如何在Datagrid的编辑模式下动态地...

    easyui datagrid 分页查询样例

    EasyUI Datagrid是一款基于jQuery的前端数据展示组件,它提供了丰富的功能,如表格布局、数据分页、排序、过滤等,常用于Web应用的数据展示。在本项目中,"easyui datagrid 分页查询样例"是利用EasyUI Datagrid与...

    EasyUI Datagrid 中文排序的问题

    ### EasyUI Datagrid 中文排序解决方案 #### 一、前言 在开发Web应用程序时,经常需要处理中文数据的排序问题。特别是在使用如EasyUI Datagrid这样的前端组件时,中文排序成为了开发者面临的一个常见挑战。本文将...

    Easyui Datagrid 实现行过滤[模糊查询]

    在IT领域,尤其是在Web开发中,EasyUI是一个广泛使用的JavaScript框架,它基于jQuery,提供了丰富的UI组件,如Datagrid,用于构建数据展示和管理的表格。在本篇中,我们将深入探讨如何在EasyUI的Datagrid中实现行...

    easyui datagrid 多条件筛选 可复选 类似淘宝筛选

    在IT领域,EasyUI是一个基于jQuery的前端框架,它提供了丰富的UI组件,如datagrid,用于构建用户界面。本文将深入探讨如何使用EasyUI datagrid实现多条件筛选功能,特别是支持可复选的筛选条件,类似于淘宝网站上的...

    easyui datagrid 动态隐藏显示列

    jquery easyui 扩展 datagrid 自定义动态隐藏显示列

    easyui datagrid 导出到excel

    Datagrid提供了一个灵活的表格布局,可以轻松地处理大量数据,并支持多种自定义选项,如列宽调整、行选择、复选框选择等。 2. 导出数据需求: 在实际工作中,用户可能需要将网页上的数据导出为Excel格式,以便于...

    解决EasyUIdataGrid列比较多,无数据,列展现不全

    ### 解决EasyUI dataGrid列较多时无数据显示不全的问题 在使用EasyUI框架进行前端开发的过程中,可能会遇到dataGrid组件在数据为空时列显示不完整的问题。这不仅影响用户体验,也降低了系统的可用性。本文将详细...

    easyUI datagrid 行上移,下移,置顶,置底的方法

    easyUI datagrid 行上移,下移,置顶,置底的方法

Global site tag (gtag.js) - Google Analytics