layui树形结构
来源:互联网 发布:海信网络电视价格 编辑:程序博客网 时间:2024/06/15 19:17
最近接触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节点传入便可显示树形结构图。写的有点仓促还请谅解
阅读全文
0 0
- layui树形结构
- layui源码详细分析之树形菜单
- 树形结构
- 树形结构
- 树形结构
- 树形结构
- 树形结构
- 树形结构
- 树形结构
- 树形结构
- 树形结构
- layui
- [layui
- layui
- LayUi
- 组织结构树形结构
- 树形dp+树形结构总结
- 自定义结构--一般树形结构
- IDEA Tomcat启动报错Tomcat部署项目时出错java.lang.IllegalStateException: ContainerBase.addChild:
- 决策树进阶
- swift URL 编码
- C#最简单最完整的webservice实例 VS2008
- PAT 1012. 数字分类
- layui树形结构
- TiDB 架构的演进和开发哲学
- leetcode 501. Find Mode in Binary Search Tree 二叉搜索树BST的中序遍历
- Arduino复习题 待更新修改
- Ubuntu下口袋妖怪终端主题安装
- c++笔记--数据类型
- [WebKit] JavaScriptCore解析
- 二分法(Binary Search)介绍
- C# WebService动态调用