Easy-to-Use TreeTable Plugin

Add-ons

2026-07-26 04:15 4 次浏览 • 0 次下载 112.7KB

Plugin Description: Implements the layui tree table treeTable by extending the layui data table.

Note: An external JSON data file is loaded. Local previews may encounter cross-origin issues, so the project must be run on a server.

treetable-lay

Implementation of the layui Tree Table treeTable

1. Introduction

Implemented as an extension of the layui data table.

2. Usage method

2.12. Import the Module

Download the entire module/treetable-lay folder and place it in your project. Then use it through the module loading mechanism:

layui.config({
    base: 'module/'
}).extend({
    treetable: 'treetable-lay/treetable'
}).use(['treetable'], function () {
    var treetable = layui.treetable;
     
});

2.2.Render the Table

<table id="table1" class="layui-table" lay-filter="table1"></table>
<script>
layui.use(['treetable'], function () {
    var treetable = layui.treetable;
     
    // Render the table
    treetable.render({
        treeColIndex: 2,          // New treeTable parameter
        treeSpid: -1,             // New treeTable parameter
        treeIdName: 'd_id',       // New treeTable parameter
        treePidName: 'd_pid',     // New treeTable parameter
        treeDefaultClose: true,   // New treeTable parameter
        treeLinkage: true,        // New treeTable parameter
        elem: '#table1',
        url: 'json/data1.json',
        cols: [[
            {type: 'numbers'},
            {field: 'id', title: 'id'},
            {field: 'name', title: 'name'},
            {field: 'sex', title: 'sex'},
            {field: 'pid', title: 'pid'},
        ]]
    });
});
</script>

Note:

You can pass data using either url or data. When using url, the parameters are passed through the where field, consistent with the usage of the layui data table.

Data Format

In short, the data must use the id and pid structure rather than the subMenus structure. Of course, the names of the id and pid fields can be customized:

{
  "code": 0,
  "msg": "ok",
  "data": [{
      "id": 1,
      "name": "xx",
      "sex": "male",
      "pid": -1
    },{
      "id": 2,
      "name": "xx",
      "sex": "male",
      "pid": 1
    }
  ]
}

2.3.Parameter Description

All parameters supported by the layui data table are available. In addition, treeTable introduces the following parameters:

Parameters	Type	Required	Description
treeColIndex	int	Yes	Column index where the tree icons are displayed
treeSpid	object	Yes	ID of the top-level parent
treeIdName	string	No	Name of the id field
treePidName	string	No	Name of the pid field
treeDefaultClose	boolean	No	Whether to collapse by default
treeLinkage	boolean	No	Whether to automatically expand all child nodes when a parent node is expanded

treeColIndex

Column index where the tree icons (arrows, folders, and file icons) are displayed. The index corresponds to the array index in the cols array.

treeSpid

The ID of the top-level parent. For example, you can define pid as 0 or -1 to represent the top-level directory.

treeIdName

treetable renders a tree structure using the id and pid fields. If your data does not contain id and pid fields, you can specify custom field names for them.

treePidName

The name of the pid field in your data.

treeDefaultClose

By default, all nodes are expanded. To collapse all nodes by default, simply add treeDefaultClose:true.

treeLinkage

Whether to automatically expand all child nodes when a parent node is expanded

2.4.Note

Pagination is not supported. Even if you set page:true, this parameter will be ignored.
Sorting is not supported. Do not enable sorting.
table.reload() cannot refresh the table. Please refer to the refresh implementation in the demo.
Except for the treetable.xxx methods documented in the documentation, use table.xxx for all other data table methods.
It is recommended to refresh (re-render) the table after completing delete or update requests on the backend. Avoid using obj.delete to delete records.

2.5.Other Methods

Expand All

1	`treetable.expandAll('#table1');`

Collapse All

1	`treetable.foldAll('#table1');`

2.6.How to Change Icons

Modify icons using CSS. The content property contains the Unicode character of the icon.

Change the folder icons:

/** Collapsed */
.treeTable-icon .layui-icon-layer:before {
    content: "\e638";
}
/** Expanded */
.treeTable-icon.open .layui-icon-layer:before {
    content: "\e638";
}
Change the file icons:
.treeTable-icon .layui-icon-file:before {
    content: "\e621";
}
Change the arrow icons:
/** Collapsed */
.treeTable-icon .layui-icon-triangle-d:before {
    content: "\e623";
}
/** Expanded */
.treeTable-icon.open .layui-icon-triangle-d:before {
    content: "\e625";
}