代码拉取完成,页面将自动刷新
同步操作将从 cdyun/layui-treetable 强制同步,此操作会覆盖自 Fork 仓库以来所做的任何修改,且无法恢复!!!
确定后同步将在后台操作,完成时将刷新页面,请耐心等待。
基于layui框架table扩展的treeTable
{
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){},//回调
}
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>
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',
...
})
treeTable.openAll(re);
treeTable.closeAll(re);
var data = treeTable.getChecked(re);
layer.msg(JSON.stringify(data));
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']。
表格会根据配置的参数判断,对需要重新渲染的部分操作。
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。