Jquery EasyUI如何实现treegrid上显示checkbox并取选定值

发布时间：2022-10-23 08:45:51 作者：iii
来源：亿速云阅读：287

Jquery EasyUI如何实现treegrid上显示checkbox并取选定值

引言

在Web开发中，树形表格（TreeGrid）是一种常见的数据展示方式，它结合了树形结构和表格的优点，能够清晰地展示层次化的数据。Jquery EasyUI 是一个基于 jQuery 的 UI 插件集合，提供了丰富的组件和功能，其中就包括 TreeGrid 组件。本文将详细介绍如何在 Jquery EasyUI 的 TreeGrid 上显示 checkbox，并获取用户选定的值。

1. Jquery EasyUI TreeGrid 简介

Jquery EasyUI 的 TreeGrid 组件是一个功能强大的表格控件，它允许用户以树形结构展示数据。TreeGrid 支持多级嵌套、展开/折叠、排序、分页等功能，非常适合展示层次化的数据。

1.1 TreeGrid 的基本结构

TreeGrid 的基本结构如下：

<table id="tt" class="easyui-treegrid" style="width:600px;height:400px"
        url="data.json"
        idField="id" treeField="name">
    <thead>
        <tr>
            <th field="name" width="200">Name</th>
            <th field="size" width="100">Size</th>
            <th field="date" width="150">Date</th>
        </tr>
    </thead>
</table>

idField：指定数据项的唯一标识字段。
treeField：指定用于显示树形结构的字段。
url：指定数据源的 URL。

1.2 TreeGrid 的常用方法

load：加载数据。
reload：重新加载数据。
getSelected：获取选中的节点。
getChecked：获取选中的 checkbox 节点。
expand：展开指定节点。
collapse：折叠指定节点。

2. 在 TreeGrid 上显示 Checkbox

在 Jquery EasyUI 的 TreeGrid 上显示 checkbox 非常简单，只需要在列定义中添加 checkbox 字段即可。

2.1 添加 Checkbox 列

在 TreeGrid 的列定义中添加一个 checkbox 字段：

<table id="tt" class="easyui-treegrid" style="width:600px;height:400px"
        url="data.json"
        idField="id" treeField="name">
    <thead>
        <tr>
            <th field="ck" checkbox="true"></th>
            <th field="name" width="200">Name</th>
            <th field="size" width="100">Size</th>
            <th field="date" width="150">Date</th>
        </tr>
    </thead>
</table>

field="ck"：指定该列为 checkbox 列。
checkbox="true"：启用 checkbox 功能。

2.2 初始化 TreeGrid

在页面加载完成后，初始化 TreeGrid：

$(function(){
    $('#tt').treegrid({
        url: 'data.json',
        idField: 'id',
        treeField: 'name',
        columns: [[
            {field:'ck', checkbox:true},
            {field:'name', title:'Name', width:200},
            {field:'size', title:'Size', width:100},
            {field:'date', title:'Date', width:150}
        ]]
    });
});

3. 获取选定的 Checkbox 值

在 TreeGrid 上显示 checkbox 后，用户可以通过勾选 checkbox 来选择多个节点。接下来，我们将介绍如何获取用户选定的 checkbox 值。

3.1 使用 `getChecked` 方法

Jquery EasyUI 提供了 getChecked 方法，用于获取所有选中的 checkbox 节点。该方法返回一个数组，数组中的每个元素都是一个选中的节点对象。

var checkedNodes = $('#tt').treegrid('getChecked');

3.2 遍历选中的节点

获取到选中的节点后，可以遍历这些节点，获取每个节点的数据：

var checkedNodes = $('#tt').treegrid('getChecked');
for (var i = 0; i < checkedNodes.length; i++) {
    var node = checkedNodes[i];
    console.log('ID: ' + node.id + ', Name: ' + node.name);
}

3.3 获取选中的节点 ID

如果只需要获取选中的节点 ID，可以将这些 ID 存储在一个数组中：

var checkedIds = [];
var checkedNodes = $('#tt').treegrid('getChecked');
for (var i = 0; i < checkedNodes.length; i++) {
    checkedIds.push(checkedNodes[i].id);
}
console.log(checkedIds);

3.4 获取选中的节点数据

如果需要获取选中的节点的完整数据，可以将这些数据存储在一个数组中：

var checkedData = [];
var checkedNodes = $('#tt').treegrid('getChecked');
for (var i = 0; i < checkedNodes.length; i++) {
    checkedData.push(checkedNodes[i]);
}
console.log(checkedData);

4. 完整示例

下面是一个完整的示例，展示了如何在 Jquery EasyUI 的 TreeGrid 上显示 checkbox，并获取用户选定的值。

4.1 HTML 代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>TreeGrid with Checkbox</title>
    <link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/default/easyui.css">
    <script type="text/javascript" src="https://www.jeasyui.com/easyui/jquery.min.js"></script>
    <script type="text/javascript" src="https://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
</head>
<body>
    <table id="tt" class="easyui-treegrid" style="width:600px;height:400px"
            url="data.json"
            idField="id" treeField="name">
        <thead>
            <tr>
                <th field="ck" checkbox="true"></th>
                <th field="name" width="200">Name</th>
                <th field="size" width="100">Size</th>
                <th field="date" width="150">Date</th>
            </tr>
        </thead>
    </table>
    <button onclick="getCheckedNodes()">Get Checked Nodes</button>
    <script>
        $(function(){
            $('#tt').treegrid({
                url: 'data.json',
                idField: 'id',
                treeField: 'name',
                columns: [[
                    {field:'ck', checkbox:true},
                    {field:'name', title:'Name', width:200},
                    {field:'size', title:'Size', width:100},
                    {field:'date', title:'Date', width:150}
                ]]
            });
        });

        function getCheckedNodes() {
            var checkedNodes = $('#tt').treegrid('getChecked');
            for (var i = 0; i < checkedNodes.length; i++) {
                var node = checkedNodes[i];
                console.log('ID: ' + node.id + ', Name: ' + node.name);
            }
        }
    </script>
</body>
</html>

4.2 数据源 `data.json`

[
    {
        "id": 1,
        "name": "Folder 1",
        "size": "",
        "date": "",
        "children": [
            {
                "id": 11,
                "name": "File 1-1",
                "size": "100KB",
                "date": "2023-10-01"
            },
            {
                "id": 12,
                "name": "File 1-2",
                "size": "200KB",
                "date": "2023-10-02"
            }
        ]
    },
    {
        "id": 2,
        "name": "Folder 2",
        "size": "",
        "date": "",
        "children": [
            {
                "id": 21,
                "name": "File 2-1",
                "size": "150KB",
                "date": "2023-10-03"
            },
            {
                "id": 22,
                "name": "File 2-2",
                "size": "250KB",
                "date": "2023-10-04"
            }
        ]
    }
]

4.3 运行效果

页面加载后，TreeGrid 会显示数据，并在每行前面显示一个 checkbox。
用户可以通过勾选 checkbox 来选择多个节点。
点击 “Get Checked Nodes” 按钮，控制台会输出所有选中的节点的 ID 和 Name。

5. 总结

本文详细介绍了如何在 Jquery EasyUI 的 TreeGrid 上显示 checkbox，并获取用户选定的值。通过简单的配置和方法调用，开发者可以轻松实现这一功能。希望本文对你在使用 Jquery EasyUI 进行 Web 开发时有所帮助。

Jquery EasyUI如何实现treegrid上显示checkbox并取选定值

Jquery EasyUI如何实现treegrid上显示checkbox并取选定值

引言

1. Jquery EasyUI TreeGrid 简介

1.1 TreeGrid 的基本结构

1.2 TreeGrid 的常用方法

2. 在 TreeGrid 上显示 Checkbox

2.1 添加 Checkbox 列

2.2 初始化 TreeGrid

3. 获取选定的 Checkbox 值

3.1 使用 getChecked 方法

3.2 遍历选中的节点

3.3 获取选中的节点 ID

3.4 获取选中的节点数据

4. 完整示例

4.1 HTML 代码

4.2 数据源 data.json

4.3 运行效果

5. 总结

相关阅读

3.1 使用 `getChecked` 方法

4.2 数据源 `data.json`