jEasyUI 树形网格添加分页学习笔记

在使用 jEasyUI 的树形网格控件时，经常会遇到数据量较大的情况，这时候需要添加分页功能来提升用户体验。下面是具体的实现步骤。

步骤一：引入必需的文件

首先需要引入 jEasyUI 相关的文件，包括 jQuery 库、jEasyUI 库以及相关 CSS 文件。

htmlCopy Code
<!-- 引入 jQuery 库 -->
<script src="https://cdn.bootcss.com/jquery/3.6.0/jquery.min.js"></script>

<!-- 引入 jEasyUI 库 -->
<script src="https://cdn.bootcss.com/jquery-easyui/1.9.22/jquery.easyui.min.js"></script>

<!-- 引入 jEasyUI 主题 CSS 文件 -->
<link rel="stylesheet" href="https://cdn.bootcss.com/jquery-easyui/1.9.22/themes/default/easyui.css">
<link rel="stylesheet" href="https://cdn.bootcss.com/jquery-easyui/1.9.22/themes/icon.css">

步骤二：创建树形网格

接着在页面中创建一个树形网格控件，并设置相关属性。其中 pagination 属性设置为 true 表示启用分页功能。

htmlCopy Code
<table id="dg" class="easyui-treegrid" style="width:100%;height:400px"
        data-options="
            url:'data.json',
            method:'get',
            rownumbers:true,
            idField:'id',
            treeField:'text',
            pagination:true,
            pageSize:10,
            pageList:[10,20,30,40,50],
            columns:[[
                {title:'ID',field:'id',width:80},
                {title:'名称',field:'text',width:120},
                {title:'大小',field:'size',width:80},
                {title:'创建时间',field:'createTime',width:150},
                {title:'修改时间',field:'modifyTime',width:150}
            ]]
        ">
</table>

步骤三：创建分页工具栏

最后需要在页面中添加一个分页工具栏，用来显示分页信息和操作。

htmlCopy Code
<div id="dg-toolbar">
    <a href="javascript:void(0)" class="easyui-linkbutton"
        data-options="iconCls:'icon-add',plain:true"
        onclick="addNode()">添加节点</a>
    <a href="javascript:void(0)" class="easyui-linkbutton"
        data-options="iconCls:'icon-remove',plain:true"
        onclick="removeNode()">删除节点</a>
    <div style="float:right;padding:5px 0;">
        <span>每页显示：</span>
        <select id="dg-pager-pageSize" class="easyui-combobox" style="width:60px;"
            data-options="
                valueField: 'value',
                textField: 'text',
                panelHeight: 'auto',
                onSelect: function(record){
                    var pageSize = record.value;
                    $('#dg').treegrid('options').pageSize = pageSize;
                    $('#dg').treegrid('reload');
                }
            ">
            <option value="10">10</option>
            <option value="20">20</option>
            <option value="30">30</option>
            <option value="40">40</option>
            <option value="50">50</option>
        </select>
    </div>
</div>

<div id="dg-pager" class="easyui-pagination" style="margin:10px 0;"
        data-options="
            total:0,
            pageSize:10,
            pageList:[10,20,30,40,50],
            onSelectPage:function(pageNumber,pageSize){
                $('#dg').treegrid('options').pageNumber = pageNumber;
                $('#dg').treegrid('options').pageSize = pageSize;
                $('#dg').treegrid('reload');
            }
        ">
</div>

步骤四：编写数据源接口

最后需要编写一个数据源接口，返回跟节点的数据。在这个例子中，我们使用 JSON 格式的文件来存储数据。

jsonCopy Code
// data.json
[
    {
        "id":1,
        "text":"根节点",
        "size":"-",
        "createTime":"2023-06-01 09:12:27",
        "modifyTime":"2023-06-02 14:36:42",
        "children":[
            {
                "id":2,
                "text":"节点 A",
                "size":"21 KB",
                "createTime":"2023-06-01 09:37:08",
                "modifyTime":"2023-06-02 14:36:42"
            },
            {
                "id":3,
                "text":"节点 B",
                "size":"5 KB",
                "createTime":"2023-06-01 09:38:11",
                "modifyTime":"2023-06-02 14:36:42"
            },
            {
                "id":4,
                "text":"节点 C",
                "size":"11 KB",
                "createTime":"2023-06-01 09:39:16",
                "modifyTime":"2023-06-02 14:36:42"
            },
            {
                "id":5,
                "text":"节点 D",
                "size":"3 KB",
                "createTime":"2023-06-01 10:07:36",
                "modifyTime":"2023-06-02 14:58:18"
            }
        ]
    }
]

至此，jEasyUI 树形网格添加分页的实现就完成了。可以根据实际需求修改相应的参数和样式，以达到更好的效果。