easyui分页全选（前端分页）

最新推荐文章于 2024-11-11 15:39:28 发布

Rae_C

最新推荐文章于 2024-11-11 15:39:28 发布

阅读量1.7k

点赞数

分类专栏：前端文章标签： easyui

本文链接：https://blog.youkuaiyun.com/Rae_C/article/details/81408026

版权

前端专栏收录该内容

5 篇文章

订阅专栏

本文介绍使用 EasyUI 实现的数据表格功能，包括分页、筛选、全选与取消全选等交互逻辑。通过 JavaScript 和 jQuery 插件实现对数据的有效管理和展示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

 var select_Arr = [];//选中数据
 var selectAll = [];//全部数据
$("#tplList").datagrid({
            idField: 'id',
            fit: false,
            pagination: true,
            toolbar: "#templateSearch",
            fitColumns: true,
            autoRowHeight: true,
            rownumbers: false,
            checkOnSelect:false,
            url: "showListByParam.json",
            singleSelect: false,
            loadFilter:function(data){//这里是重点
                if (typeof data.length == 'number' && typeof data.splice == 'function') {   // is array
                    data = {
                        total: data.length,
                        rows: data
                    }
                }
                var dg = $(this);
                var opts = dg.datagrid('options');
                var pager = dg.datagrid('getPager');
                pager.pagination({
                    onSelectPage: function (pageNum, pageSize) {
                        opts.pageNumber = pageNum;
                        opts.pageSize = pageSize;
                        pager.pagination('refresh', {
                            pageNumber: pageNum,
                            pageSize: pageSize
                        });
                        dg.datagrid('loadData', data);
                    }
                });
                if (!data.originalRows) {
                    data.originalRows = (data.rows);
                }
                var start = (opts.pageNumber - 1) * parseInt(opts.pageSize);
                var end = start + parseInt(opts.pageSize);
                data.rows = (data.originalRows.slice(start, end));
                selectAll=data.originalRows;
                if(select_Arr){
                    $.each(select_Arr,function(i,n){
                        $.each(data.rows,function(j,v){
                            if(n.id == v.id ){
                                // if(v.status != 0){
                                    v['checked'] = true;
                                // }
                            }
                        });
                    });
                }
                // $('#tplList').datagrid('unselectRow',index);
                return data;
            },
            onCheckAll:function (data) {
                for(var i =0;i<selectAll.length;i++){
                    // if(selectAll[i].status != 0){
                        select_Arr.push(selectAll[i]);
                    // }
                }
                // for(var i =0;i<selectAll.length;i++){
                //     if(selectAll[i].status == 0){
                //         $('#tplList').datagrid('uncheckRow',i);
                //     }
                // }
            },
            onCheck:function(index,row){
                if(row.status == 0 || row.publishStatus != 1){
                    $('#tplList').datagrid('uncheckRow',index);
                }
            },
            onUncheckAll:function () {
                select_Arr=[];
                // selectAll=null;
                // $('#tplList').datagrid("clearSelections");
            },
            onSelect:function (index,row) {
                    $.each(select_Arr,function(i,n){
                            if(n.id != row.id){
                                select_Arr.push(row.id);
                            }
                    });
                    if(row.status == 0 || row.publishStatus != 1){
                        $('#tplList').datagrid('unselectRow',index);
                    }
            },
            onUnselect:function (index,row) {
                for(var i in select_Arr){
                    if(select_Arr[i].id == row.id){
                        // delete select_Arr[i]
                        select_Arr.splice(i,1);
                    }
                }
            },
        });