📌  相关文章
📜  jQWidgets jqxTreeGrid 完整参考(1)

📅  最后修改于: 2023-12-03 15:16:58.012000             🧑  作者: Mango

jQWidgets jqxTreeGrid 完整参考

简介

jQWidgets jqxTreeGrid是一个动态的、高效的jQuery插件，用于创建树形结构的表格，可实现展开/折叠节点、排序、过滤、编辑、多列选择等功能。

安装
  1. 引入jQuery库和jQWidgets jqxTreeGrid插件库：
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<link href="https://jqwidgets.com/public/jqwidgets/styles/jqx.base.css" rel="stylesheet">
<script src="https://jqwidgets.com/public/jqwidgets/jqx-all.js"></script>
  1. 创建HTML元素：
<div id="treeGrid"></div>
  1. 初始化插件：
$("#treeGrid").jqxTreeGrid({
    // 配置项...
});
配置项

jQWidgets jqxTreeGrid插件提供了丰富的配置项，可根据不同的需求进行定制。以下为常用的配置项：

  • width：设置表格宽度，默认为100%。
  • height：设置表格高度，默认为100%。
  • source：绑定数据源，可接收本地数组或远程URL地址。
  • sortable：启用排序功能，默认为false。
  • filterable：启用过滤功能，默认为false。
  • editable：启用编辑功能，默认为false。

更多配置项可参考官方文档：jQWidgets TreeGrid Options

方法

jQWidgets jqxTreeGrid插件也提供了多个可供调用的方法，以下为常用的方法：

  • expandRow(id)：展开指定行。
  • collapseRow(id)：折叠指定行。
  • expandAll()：展开全部行。
  • collapseAll()：折叠全部行。
  • selectRow(id)：选中指定行。
  • unselectRow(id)：取消选中指定行。
  • getSelectedRows()：获取选中的行数据。
  • updateBoundData()：刷新表格数据。

更多方法可参考官方文档：jQWidgets TreeGrid Methods

事件

jQWidgets jqxTreeGrid插件也提供了多个事件，以下为常用的事件：

  • cellbeginedit(event)：单元格开始编辑时触发。
  • cellendedit(event)：单元格结束编辑时触发。
  • rowselect(event)：行选中时触发。
  • rowunselect(event)：行取消选中时触发。
  • sort(event)：排序时触发。
  • filter(event)：过滤时触发。

更多事件可参考官方文档：jQWidgets TreeGrid Events

示例

以下为一个基本的示例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>jqxTreeGrid Demo</title>
    <link href="https://jqwidgets.com/public/jqwidgets/styles/jqx.base.css" rel="stylesheet">
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <script src="https://jqwidgets.com/public/jqwidgets/jqx-all.js"></script>
</head>
<body>
    <div id="treeGrid"></div>
    <script>
        var source = {
            dataType: "json",
            dataFields: [
                { name: "id", type: "number" },
                { name: "name", type: "string" },
                { name: "parentId", type: "number" }
            ],
            hierarchy: {
                keyDataField: { name: "id" },
                parentDataField: { name: "parentId" }
            },
            id: "id",
            url: "data.json"
        };

        var dataAdapter = new $.jqx.dataAdapter(source);

        $("#treeGrid").jqxTreeGrid({
            width: "100%",
            height: 400,
            source: dataAdapter,
            columns: [
                { text: "ID", dataField: "id", width: "20%" },
                { text: "Name", dataField: "name", width: "60%" },
                { text: "Parent ID", dataField: "parentId", width: "20%" }
            ],
            sortable: true,
            filterable: true,
            editable: true
        });
    </script>
</body>
</html>
总结

jQWidgets jqxTreeGrid是一个功能强大、易用的jQuery插件，用于创建树形结构的表格。通过对配置项、方法、事件的掌握，可以快速地开发出满足业务需求的树状表格。