前端框架——Layui（树形表格treeGrid）需求
最近在开发⼀个⽂件库模块，需要⽤到树形表格来展现⽂件夹的层次感。
官⽅⽂档
在线
码云地址：
使⽤⽅法
⾸先我们把treeGrid.js⽂件复制到你的项⽬中去，然后在js⽂件中引⽤，在此我把最简单的实现给⼤家展现出来html⽂件
<div >
<div class="dBody">
<table class="layui-hidden" id="treeTable" lay-filter="treeTable"></table>
</div>
</div>
js⽂件
var editObj=null,ptable=null,treeGrid=null,tableId='treeTable',layer=null;
base: 'design/extend/'
}).extend({
treeGrid:'treeGrid'
}).use(['jquery','treeGrid','layer'], function(){
var $=layui.jquery;
treeGrid = Grid;//很重要
layer=layui.layer;
der({
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;
}
}
,{type:'checkbox',sort:true}
,{field:'name', title: '⽂件名称',/*edit:'text',*/sort:true}
,{field:'url',title: '⽂件路径',sort:true,templet: function(d){
var url = d.url;
if(d.state == 0){
url = "";
}
return url;
}}
]]
,page:false
});
<('tool('+tableId+')',function (obj) {
if(obj.event === 'del'){//删除⾏
del(obj);
}else if(obj.event==="add"){//添加⾏
add(obj.data);
}
});
});
function del(obj) {
obj.del();
layer.close(index);
},function (index) {//取消回调
layer.close(index);
}
);
}
返回数据格式
{
"msg": "",
"code": 0,
"data": [
{
"id": "file69a87830-fdd5-11e8-b8d8-0b4c653a3f4a",
"name": "Git",
"pId": 0,
"url": "C:/Users/admin/Desktop/RBooks/Git",
"state": 0
},
{
"id": "file69a87831-fdd5-11e8-b8d8-0b4c653a3f4a",
"name": "GitHub⼊门与实践.pdf",
"pId": "file69a87830-fdd5-11e8-b8d8-0b4c653a3f4a",
"url": "C:/Users/admin/Desktop/RBooks/Git/GitHub⼊门与实践.pdf",
"state": 1
},
{
"id": "file69a87832-fdd5-11e8-b8d8-0b4c653a3f4a",
"name": "GitLab搭建_1.0.pdf",
"pId": "file69a87830-fdd5-11e8-b8d8-0b4c653a3f4a",
"url": "C:/Users/admin/Desktop/RBooks/Git/GitLab搭建_1.0.pdf",
"state": 1
},
{
"id": "file69a89f40-fdd5-11e8-b8d8-0b4c653a3f4a",
"name": "git⼩书.pdf",
"pId": "file69a87830-fdd5-11e8-b8d8-0b4c653a3f4a",
"url": "C:/Users/admin/Desktop/RBooks/Git/git⼩书.pdf",
"state": 1
},
{
"id": "file69a89f41-fdd5-11e8-b8d8-0b4c653a3f4a",
"name": "Git版本控制管理第2版（美）罗⼒格（美）麦卡洛著.pdf",
"pId": "file69a87830-fdd5-11e8-b8d8-0b4c653a3f4a",
"url": "C:/Users/admin/Desktop/RBooks/Git/Git版本控制管理第2版（美）罗⼒格（美）麦卡洛著.pdf",                    "state": 1
},
{
"id": "file69a89f42-fdd5-11e8-b8d8-0b4c653a3f4a",
前端ui框架是什么意思"name": "Html5",
"pId": 0,
"url": "C:/Users/admin/Desktop/RBooks/Html5",
"state": 0
},
{
"id": "file69a8c650-fdd5-11e8-b8d8-0b4c653a3f4a",
"name": "14-CSS设计指南(第3版)-2013-中⽂版.pdf",
"pId": "file69a89f42-fdd5-11e8-b8d8-0b4c653a3f4a",
"url": "C:/Users/admin/Desktop/RBooks/Html5/14-CSS设计指南(第3版)-2013-中⽂版.pdf",
"state": 1
}
],
"count": 924,
"is": true,
"tip": "操作成功！"
}
这⾥我们需要注意id与PID之间的对应，也就是⽂件夹与⽂件之间的关系，相信接触过tree的⼈都会很熟悉
关于后台中⽂件夹的遍历返回在这我就不多讲了。到这基本就ok了，我给⼤家看⼀下效果图
遇到的问题
在treeGrid 的使⽤过程中，因为需求的不同还是有许多问题的，⽐如：
1. ⽂件夹的图标因为更新已经删除了，所以我们为了美观需要修改⼀下
解决办法：
2. 因为⽂件夹删除选择时，其实已经将⽂件夹与其⾥⾯的⽂件删除了，但是因为多选框的⼦节点会随⽗节点选择，所以⼦⽂件会因⼆次
删除⽽报错；以及添加⽂件夹和上传⽂件都以为⽗节点与⼦节点的关系导致报错。所以我们需要修改多选框的选择独⽴，⽗节点与⼦节点互相不关联。
解决办法：修改treeGrid.js⽂件，修改后的

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。