• easyui datagrid关于分页的问题


    easyui框架中datagrid可以很好的来展示大量的列表数组,但是由于datagrid一般都是从控件本身传递一个页码给后台,后台进行处理。

    但是,最近项目跟webgis有关,数据查询直接是从服务中查询出来,无法像关系数据库那样,在数据库端对查询结果进行分页

    所以,采用在datagrid的前端进行“假分页”来达到分页效果

    【1】分页操作

    ///easyui前台分页操作
    function pagerFilter(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));
        return data;
    }

    【2】在datagrid进行数据绑定时,绑定上分页方法即可
    ///初始化项目列表
    function InitProjectTab(data) {
        debugger;
        $("#ProjectTab").datagrid({ loadFilter: pagerFilter }).datagrid({
            title: '项目列表',
            //url: '',
            data:data,
            method: 'POST',
             600,
            height: 500,
            singleSelect: true,
            autoRowHeight: false,
            checkOnSelect: true,
            selectOnCheck: true,
            nowrap: false, //是否换行,True 就会把数据显示在一行里
            striped: true, //True 奇偶行使用不同背景色
            sortOrder: 'desc', //排序类型
            remoteSort: true, //定义是否从服务器给数据排序
            fitColumns: true,
            columns: [[
                      {
                          title: 'OBJECTID', field: 'OBJECTID',  40, sortable: true,hidden:true
                      },
                     {
                         title: '项目ID', field: 'PRJID',  40, sortable: true
                     },
                    {
                        title: '项目名称', field: 'PRJNAME',  100, sortable: true
                    },
                     {
                         title: '项目地址', field: 'FADDRESS',  80, sortable: true
                     },
                      {
                          title: '建设单位', field: 'FCOMPANY',  80, sortable: true
                      },
            ]],
            queryParams: { "action": "query" },
            pagination: true, //是否开启分页
            pageNumber: 1, //默认索引页
            pageSize: 10, //默认一页数据条数
            rownumbers: true,//行号
            toolbar: '#projectBar',
            onLoadSuccess: function (data, param) {
                $("#projectBtn").fadeIn(100);
                $("#projectDiv").css("right", "20px");
            },
            onClickRow: function (index, row) {
               ShowRedLine(row.OBJECTID);   //定位图形 
            }
        });
    }
  • 相关阅读:
    vue前端使用JsonViewer进行json展示
    vue代理服务器proxy配置
    'vue-cli-service' 不是内部或外部命令,也不是可运行的程序 或批处理文件。
    Python中的高阶函数和内置高阶函数(abs,map,reduce,sorted,filter)
    Ant Design Vue 通过v-decorator实现数据绑定
    Vue脚手架(vue-cli)搭建和目录结构详解
    如何使用Postman从XML提取变量
    【已解决】Vue格式化js自动加上冒号和分号
    vue.js安装与搭建
    Python函数中如何返回多个值?
  • 原文地址:https://www.cnblogs.com/sguozeng/p/9230506.html
Copyright © 2020-2023  润新知