layui 第三方组件平台

返回首页 发布组件

得益于 layui 良好的设计,可以顺利扩展 treeGrid 插件。支持树状表格、支持折叠记忆功能、支持动态新增行、支持动态删除行、支持行内过滤,支持方法式打开或折叠任意节点等等。内部对原来table的渲染方法进行了拆分,以便更精准控制table的行为。

更新:2019-10-31 创建:2018-8-28

文档


插件使用要求
1、浏览器(极速模式、ie11或以上、google浏览器)

代码以及例子
使用本插件,请务必以码云中的代码为准,例子文件为index.html
在线 代码

常见问题及注意:
1、例子不支持本地C://test/inde.html形式运行
2、根节点在第一个
3、确保url请求到数据(多数人员在此环节存在问题)

如何提问:
treeGrid第二版 中提问或建议。

更新日志:
20180904
1、json数据源顺序不再需要根节点在第一位,可以是无序(从数据库中只需要查询,不需要排序)
2、增加icon控制,默认开启图标,提供默认图标,可自定义图标
3、多选:默认选中,禁止选中等功能。
4、提供展开折叠全部节点功能,提供默认值控制展开或折叠节点
在layui2.3的table组件基础上独立扩展出来针对普通表格和树状表格的插件,主要增加如下功能。
1、【增加】支持树状表格
2、【增加】支持折叠记忆功能(折叠的节点不受父节点折叠状态影响)
3、【增加】动态新增行(一行或多行)
4、【优化】动态删除行(一行或多行)
5、【增加】行内过滤(每次提交会自动提交此区域的参数,需要结合后台使用)
6、【增加】方法式打开或折叠任意节点(table.treeNodeOpen(o,isOpen))
7、【增加】数据刷新query方法(与reload方法区别在于,只刷新数据区域,而不是重新渲染整个table)
8、内部对原来table的渲染方法进行了拆分,以便更精准控制table的行为(分别是生成单元格、生成tr、渲染分页、渲染行内过滤区域、渲染全部、渲染节点内容等等)
效果图:
整体效果:


折叠记忆:


新增节点:


删除节点:


删除多个节点:


节点初始化隐藏、显示控制
1、数据源设置is_open
{"id":"111", "pId":"1", "name":"苹果","lay_is_open":false}
效果


多选操作(选中父节点,子节点被选中;全部子节点被选中,父节点也被选中;自己看效果)




<script>
var editObj=null,ptable=null,treeGrid=null,tableId='treeTable',layer=null;
layui.config({
base: 'design/extend/'
}).extend({
treeGrid:'treeGrid'
}).use(['jquery','treeGrid','layer'], function(){
var $=layui.jquery;
treeGrid = layui.treeGrid;//很重要
layer=layui.layer;
ptable=treeGrid.render({
id:tableId
,elem: '#'+tableId
,idField:'id'
,url:'/data2.json'
,cellMinWidth: 100
,treeId:'id'//树形id字段名称
,treeUpId:'pId'//树形父id字段名称
,treeShowName:'name'//以树形式显示的字段
,cols: [[
{width:100,title: '操作', align:'center'/*toolbar: '#barDemo'*/
,templet: function(d){
var html='';
var addBtn='<a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="add">添加</a>';
var delBtn='<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>';
return addBtn+delBtn;
}
}
,{field:'name', edit:'text',width:300, title: '水果名称'}
,{field:'id',width:100, title: 'id'}
,{field:'pId', title: 'pid'}
]]
,page:false
});

treeGrid.on('tool('+tableId+')',function (obj) {
if(obj.event === 'del'){//删除行
del(obj);
}else if(obj.event==="add"){//添加行
add(obj.data);
}
});
});

function del(obj) {
layer.confirm("你确定删除数据吗?如果存在下级节点则一并删除,此操作不能撤销!", {icon: 3, title:'提示'},
function(index){//确定回调
obj.del();
layer.close(index);
},function (index) {//取消回调
layer.close(index);
}
);
}


var i=1000;
//添加
function add(pObj) {
var param={};
param.name='水果'+Math.random();
param.id=++i;
param.pId=pObj?pObj.id:0;
treeGrid.addRow(tableId,pObj?pObj.LAY_TABLE_INDEX+1:0,param);
}

function print() {
console.log(treeGrid.cache[tableId]);
var loadIndex=layer.msg("对象已打印,按F12,在控制台查看!", {
time:3000
,offset: 'auto'//顶部
,shade: 0
});
}
</script>

下载

去码云下载
该扩展组件由第三方用户主动投递,并由其自身进行维护,本站仅做收集。