最近接触Layui框架,感觉还不错,就总结一下在使用layui的树形结构的使用。
在官网上查看时发现关于layui的使用都是静态添加的代码,如果我想动态添加树形节点时遇到了很大的问题,官网的静态示例代码如下:
在nodes节点中就是我们需要添加的数据,可以看出来他是一个json数组形势,当我将数据拼接成上述的字符串进行传入时,发现它并不能动态的将它编译成所需的,反而是将字符串的每一个字符进行了解析。
只好另找方法,在其官网的论坛上,发现有一人写的需要将字符串转为json数组,于是我将字符串转为json数组传入时发现还得不到预期结果,于是乎我想是否可以传入一个数组,于是乎按我的理解进行了拼接。
代码如下:
写的有点仓促还请谅解
在官网上查看时发现关于layui的使用都是静态添加的代码,如果我想动态添加树形节点时遇到了很大的问题,官网的静态示例代码如下:
layui.use(['tree', 'layer'], function(){
var layer = layui.layer
,$ = layui.jquery;
layui.tree({
elem: '#demo1' //指定元素
,target: '_blank' //是否新选项卡打开(比如节点返回href才有效)
,click: function(item){ //点击节点回调
layer.msg('当前节名称:'+ item.name + '<br>全部参数:'+ JSON.stringify(item));
console.log(item);
}
,nodes: [ //节点
{
name: '常用文件夹'
,id: 1
,alias: 'changyong'
,children: [
{
name: '所有未读(设置跳转)'
,id: 11
,href: 'http://www.layui.com/'
,alias: 'weidu'
}, {
name: '置顶邮件'
,id: 12
}, {
name: '标签邮件'
,id: 13
}
]
}, {
name: '我的邮箱'
,id: 2
,spread: true
,children: [
{
name: 'QQ邮箱'
,id: 21
,spread: true
,children: [
{
name: '收件箱'
,id: 211
,children: [
{
name: '所有未读'
,id: 2111
}, {
name: '置顶邮件'
,id: 2112
}, {
name: '标签邮件'
,id: 2113
}
]
}, {
name: '已发出的邮件'
,id: 212
}, {
name: '垃圾邮件'
,id: 213
}
]
}, {
name: '阿里云邮'
,id: 22
,children: [
{
name: '收件箱'
,id: 221
}, {
name: '已发出的邮件'
,id: 222
}, {
name: '垃圾邮件'
,id: 223
}
]
}
]
}
,{
name: '收藏夹'
,id: 3
,alias: 'changyong'
,children: [
{
name: '爱情动作片'
,id: 31
,alias: 'love'
}, {
name: '技术栈'
,id: 12
,children: [
{
name: '前端'
,id: 121
}
,{
name: '全端'
,id: 122
}
]
}
]
}
]
});
在nodes节点中就是我们需要添加的数据,可以看出来他是一个json数组形势,当我将数据拼接成上述的字符串进行传入时,发现它并不能动态的将它编译成所需的,反而是将字符串的每一个字符进行了解析。
只好另找方法,在其官网的论坛上,发现有一人写的需要将字符串转为json数组,于是我将字符串转为json数组传入时发现还得不到预期结果,于是乎我想是否可以传入一个数组,于是乎按我的理解进行了拼接。
代码如下:
function createTree(data) {
var node = [];
for (var i = 0; i< data.length; i++) {
node.push({
name:'' + data[i].name,
id: data[i].id
});
if (data[i].vehicles.length > 0) {
var child = [];
for(var j = 0; j< data[i].vehicles.length; j++) {
if(isOnLine(data[i].vehicles[j].vin)) {
child.push({
name:data[i].vehicles[j].number + '(在线)',
id: data[i].vehicles[j].vin
});
} else {
child.push({
name:data[i].vehicles[j].number + '(离线)',
id: data[i].vehicles[j].vin
});
}
arr.push(data[i].vehicles[j]);
}
node[i].children = child;
}
}
将node节点传入便可显示树形结构图。
写的有点仓促还请谅解