miniui datagrid 的客户端分页解决方案 - CS结合

在前一篇,miniui datagrid 的客户端分页解决方案 中留下了一个问题:如果前三页只需要加载一次数据,采用客户端分页,之后的每一页都仍然从服务器获取,应该怎么办?

现在就来改造 ClientPagination,让它实现这个功能。不过在此之前需要先解决上个版本中存在的一个问题:destroy() 并没有完全恢复原有的 datagrid 对象,因为忘了在 destroy() 中恢复 this._datagridloadsetData 函数。

修复一个重要的 BUG

很容易想到下面的代码,不过下面这个代码是个错误的实现

    destroy() {
        // 错误的实现
        METHODS.forEach(name => {
            this._datagrid[name] = this._origin[name];
        });
        
        // ....
    }

别忘了 this._origin 中保存的每个函数都是通过原函数 bind() 而来,所以其实已经不是原函数了。此外,也很容易想到 miniui 的 datagrid 多半是类实现,原来的 load()setData() 应该来源于原型。所以正确的解决办法是

        // in destroy's body
        METHODS.forEach(name => {
            delete this._datagrid[name];
        });

试验一下就能证明它的正确性。

改造 ClientPagination

修改 beforeload 事件处理

原来在 beforeload 事件中直接设置了 event.cancel = true 来避免远程加载,但现在情况发生了变化,只需要在页码小于3(miniui 的 pageIndex 是从 0 开始)避免远程加载,大于等于 3 的时候仍然需要从服务器获取页面数据,所以

const pageIndex = e.data.pageIndex;
if (pageIndex < 3) {
    e.cancel = true;
} else {
    // 直接返回,不需要通过 setPageData() 来设置页面数据
    return;
}

接下来该干啥

接下来还有一些细节需要处理。

首先就是 setData 中没有使用数据的 total 值,因为原来纯客户端分页的时候,数据总行数就是 total 值,但现在不一样了,设置的数据不一定是所有数据,所以需要先检查 total,如果没有 total 再使用 rows.length 代替。

setData(data) {
    const rows = Array.isArray(data)
        ? data
        : (data.data || []);

    this._data = rows;
    this._total = data.total || rows.length;
    this.setPageData(this._datagrid.getPageIndex(), this._datagrid.getPageSize());
}

相应的,还需要在 setPageData() 里修改一个 setTotalCount() 的实参

grid.setTotalCount(this._total);

搞定!

源代码

ClientPagination mini_clientpagination.js

const METHODS = ["setData", "load"];

class ClientPagination {
    static wrap(datagrid) {
        return new ClientPagination(datagrid);
    }

    constructor(datagrid) {
        this._datagrid = datagrid;
        this._origin = {};
        this.setup();
    }

    setup() {
        const grid = this._datagrid;
        const origin = this._origin = {};

        METHODS.forEach(name => {
            // 绑定到原对象的原方法
            origin[name] = grid[name].bind(grid);
            // 替换为本类中定义的新方法
            grid[name] = this[name].bind(this);
        });

        // 暂存事件处理函数,以便后面注销
        this._onBeforeLoad = this.onBeforeLoad.bind(this);
        grid.on("beforeload", this._onBeforeLoad);
    }

    destroy() {
        // 恢复原方法(来自 datagrid 类的 prototype)
        // 只需要删除附加到对象上的同名方法即可
        METHODS.forEach(name => {
            delete this._datagrid[name];
        });

        this._origin = {};
        this._datagrid.un("beforeload", this._onBeforeLoad);
        this._datagrid = null;
    }

    onBeforeLoad(e) {
        // 根据官方的解决方案而来
        const pageIndex = e.data.pageIndex;
        if (pageIndex < 3) {
            e.cancel = true;
        } else {
            // NOTE 一般来说不需要修改 url,直接通过 pageIndex 参数即可从后台获取不同页的数据
            // 这里因为是用的静态 JSON 数据,所以需要修改 url
            e.url = `data/page${pageIndex}.json`;
            return;
        }
        let pageSize = e.data.pageSize;
        this.setPageData(pageIndex, pageSize);
    }

    load(params, success, fail) {
        const grid = this._datagrid;
        const pageIndex = grid.getPageIndex();
        const url = grid.getUrl();

        params = $.extend(pageIndex < 3
            ? {}
            : { pageIndex: pageIndex, pageSize: grid.getPageSize() },
            params);

        const settings = {
            type: "get",
            dataType: "json",
            data: params
        };

        $.ajax(url, settings)
            .then(data => {
                this.setData(data);
                if (typeof success === "function") {
                    success(data);
                }
            }, () => {
                if (typeof fail === "function") {
                    fail();
                }
            });
    }

    setData(data) {
        const rows = Array.isArray(data)
            ? data
            : (data.data || []);

        this._data = rows;
        this._total = data.total || rows.length;
        this.setPageData(this._datagrid.getPageIndex(), this._datagrid.getPageSize());
    }

    setPageData(pageIndex, pageSize) {
        const allData = this._data;
        let start = pageIndex * pageSize;
        if (start >= allData.length) {
            start = 0;
            pageIndex = 0;
        }
        const end = Math.min(start + pageSize, allData.length);

        const pageData = [];
        for (let i = start; i < end; i++) {
            pageData.push(allData[i]);
        }

        const grid = this._datagrid;
        grid.setTotalCount(this._total);
        grid.setPageIndex(pageIndex);
        grid.setPageSize(pageSize);
        this._origin.setData(pageData);
    }
}

测试页面 index.html

<!DOCTYPE html />
<html>

<head>
    <title>Client Pagination</title>
    <link href="miniui/themes/default/miniui.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
        body {
            margin: 0;
            padding: 5px;
        }
    </style>
</head>

<body>
    <div class="mini-fit">
        <div class="mini-datagrid" id="grid" pageSize="6" url="data/all.json" style="height: 100%">
            <div property="columns">
                <div type="indexcolumn"></div>
                <div type="checkboxcolumn" width="32"></div>
                <div field="order" width="60">序号</div>
                <div field="name" width="80">名称</div>
                <div field="autofit" width="auto"></div>
            </div>
        </div>
    </div>
    <script src="jquery-1.6.2.min.js"></script>
    <script src="miniui/miniui.js"></script>
    <script src="mini_clientpagination.js"></script>
    <script>
        mini.parse();
        const grid = mini.get("grid");
        ClientPagination.wrap(grid);
        grid.load();
    </script>
</body>

</html>

当然还有 data 目录下的数据源 all.jsonpage3.json

  • all.json 中是前3页的数据
  • page3.json 中是第4页的数据

数据结构(仅结构

{
    "data": [],
    "total": 50
}

其中 data 的每一项结构

{
    "order": 1108,
    "name": "bridge"
}

完整的测试数据就自己拼吧,当然最好是还是用服务端数据,通过参数来返回不同的数据行。

我懒,懒得为了个实验还去写服务端


边城客栈
全栈技术专栏,公众号「边城客栈」,[链接]

一路从后端走来,终于走在了前端!

57.3k 声望
27.6k 粉丝
0 条评论
推荐阅读
树,计算父节点的值
前段时间回答了一个类似的问题,产生了写一篇博客的想法。这个问题确实存在一些常见的的应用场景,比如一个多层组织结构中,已知每个员工的绩效分,希望计算各级部门的绩效分以便对部门评优。

边城5阅读 208评论 2

封面图
正则表达式实例
收集在业务中经常使用的正则表达式实例,方便以后进行查找,减少工作量。常用正则表达式实例1. 校验基本日期格式 {代码...} {代码...} 2. 校验密码强度密码的强度必须是包含大小写字母和数字的组合,不能使用特殊...

寒青56阅读 8.4k评论 11

JavaScript有用的代码片段和trick
平时工作过程中可以用到的实用代码集棉。判断对象否为空 {代码...} 浮点数取整 {代码...} 注意:前三种方法只适用于32个位整数,对于负数的处理上和Math.floor是不同的。 {代码...} 生成6位数字验证码 {代码...} ...

jenemy48阅读 7k评论 12

从零搭建 Node.js 企业级 Web 服务器(十五):总结与展望
总结截止到本章 “从零搭建 Node.js 企业级 Web 服务器” 主题共计 16 章内容就更新完毕了,回顾第零章曾写道:搭建一个 Node.js 企业级 Web 服务器并非难事,只是必须做好几个关键事项这几件必须做好的关键事项就...

乌柏木75阅读 7.1k评论 16

再也不学AJAX了!(二)使用AJAX ① XMLHttpRequest
「再也不学 AJAX 了」是一个以 AJAX 为主题的系列文章,希望读者通过阅读本系列文章,能够对 AJAX 技术有更加深入的认识和理解,从此能够再也不用专门学习 AJAX。本篇文章为该系列的第二篇,最近更新于 2023 年 1...

libinfs42阅读 6.8k评论 12

封面图
从零搭建 Node.js 企业级 Web 服务器(一):接口与分层
分层规范从本章起,正式进入企业级 Web 服务器核心内容。通常,一块完整的业务逻辑是由视图层、控制层、服务层、模型层共同定义与实现的,如下图:从上至下,抽象层次逐渐加深。从下至上,业务细节逐渐清晰。视图...

乌柏木45阅读 8.5k评论 6

从零搭建 Node.js 企业级 Web 服务器(二):校验
校验就是对输入条件的约束,避免无效的输入引起异常。Web 系统的用户输入主要为编辑与提交各类表单,一方面校验要做在编辑表单字段与提交的时候,另一方面接收表单的接口也要做足校验行为,通过前后端共同控制输...

乌柏木35阅读 6.7k评论 10

一路从后端走来,终于走在了前端!

57.3k 声望
27.6k 粉丝
宣传栏