1 Star 0 Fork 3

滨海IT / layui-treetable

forked from cdyun / layui-treetable 
加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
克隆/下载
贡献代码
同步代码
取消
提示: 由于 Git 不支持空文件夾,创建文件夹后会生成空的 .keep 文件
Loading...
README
MIT

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']。
表格会根据配置的参数判断,对需要重新渲染的部分操作。
MIT License Copyright (c) 2023 cdyun Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

简介

基于layui框架扩展treetable 展开 收起
JavaScript
MIT
取消

发行版

暂无发行版

贡献者

全部

近期动态

加载更多
不能加载更多了
JavaScript
1
https://gitee.com/BinHaiIT2/layui-treetable.git
git@gitee.com:BinHaiIT2/layui-treetable.git
BinHaiIT2
layui-treetable
layui-treetable
master

搜索帮助