# layui-treetable

**Repository Path**: BinHaiIT2/layui-treetable

## Basic Information

- **Project Name**: layui-treetable
- **Description**: 基于layui框架扩展treetable
- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 3
- **Created**: 2024-03-05
- **Last Updated**: 2024-03-05

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# layui-treetable

## 介绍

基于layui框架table扩展的treeTable

## 使用说明

#### 1.可配置参数(可自由搭配)

```
{
	elem: '#tree-table',// 必须为ID属性值
	data: [{},{},{},...],
	url: 'data/table-tree.json',//异步get请求 （url和data参数必须设置一个）
	where: {},//异步请求参数
	headers:{},//异步请求Header
	code: 0,//异步请求响应结构code初始值
	parseData:: function(res){ //解析异步请求响应原始返回的数据
        return {
          "code": res.status, //解析接口状态
          "msg": res.message, //解析提示文本
          "data": res.data //解析数据列表
          };
        }, 
	toolbar: false,//是否开启头部工具栏
	icon_key: 'title',// 必须
	top_value: 0,//最顶级父级值
	primary_key: 'id',//主键
	parent_key: 'pid',//父子关联键
	hide_class: 'layui-hide',
	icon: {//icon图标
		open: 'layui-icon layui-icon-triangle-d',
		close: 'layui-icon layui-icon-triangle-r',
		left: 16,
	},
	cols: [{ //设置表头
		key: 'title',
		title: '名称',
		width: '100px',
		template: function(item){return '显示内容'}
	},{},...],
	checked: {//复选框初始赋值
		key: 'id',
		data: [0,1,4,10,11,5,2,6,7,3,8,9],
	},
	is_checkbox: false,//是否开启复选框
	is_cache: true,//是否开启缓存
	end: function(e){},//回调
}
```

#### 2. 部分参数解析
   
a. 头部工具栏toolbar

默认值false，表示不开启。可赋值自定义工具栏模板选择器（例：#toolbar）

```
<script type="text/html" id="toolbar">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-primary layui-btn-sm" lay-event="create">新增</button>
        ...
    </div>
</script>
```

b. 设置表头cols

```
{
    key:'字段名', //表格数据列的唯一标识
    title:'标题名', //标题名称
    width: '100', //宽度（不带‘px’）
    align: 'left', //单元格排列方式。可选值有：left、center、right
    template: function (item) { //只支持回调函数
        return '';
    },
    tool: '#actionBar', //单元格工具栏，可赋值自定义工具栏模板选择器（例：#actionBar）
}

<script type="text/html" id="actionBar">
    <a class="layui-btn-xs layui-font-blue" lay-event="edit">编辑</a>
    <a class="layui-btn-xs layui-font-blue" lay-event="delete">删除</a>
    ...
</script>
```
#### 3. 事件
a. 头部工具栏事件
```
treeTable.on('toolbar(tree-table)', function (obj) { //tree-table指ID属性值
    switch (obj.event) {
        case 'create':
            layer.msg('添加');
            break;
        default:
            layer.msg('缺少方法：' + obj.event);
            break;
    }
})
```

b. 单元格工具栏事件
```
treeTable.on('tool(tree-table)', function (obj) { //tree-table指ID属性值
    var data = obj.data, event = obj.event;
    switch (obj.event) {
        case 'delete':
            layer.confirm('确定删除吗？', function (index) {
                obj.del();
                layer.close(index);
            });
            break;
        case 'edit':
            layer.msg(JSON.stringify(data));
            break;
        default:
            layer.msg('未定义方法:' + event);
            break;
    }
})
```

## 内置函数

```
var re = treeTable.render({
    elem: '#demo',
    ...
})
```
#### 1.展开所有节点
```
treeTable.openAll(re);
```

#### 2.关闭所有节点
```
treeTable.closeAll(re);
```
#### 3.获取复选框选中值
```
var data = treeTable.getChecked(re);
layer.msg(JSON.stringify(data));
```
#### 4.重新载入表格
```
treeTable.reload(re);

或者（配置参数options）

treeTable.reload(re,options);

options可赋值布尔值true，或者object参数。

当值为true时，表格会深度重载，即Dom重新渲染头部工具栏，表格表头thead和表格内容tbody三个部分。

当值为object参数，可配置参数有['where', 'headers', 'parseData', 'cols', 'data', 'url', 'top_value', 'primary_key', 'parent_key', 'icon', 'is_checkbox', 'checked', 'code', 'toolbar']。
表格会根据配置的参数判断，对需要重新渲染的部分操作。
```