layui实现checkbox的目录树tree的例子


Posted in Javascript onSeptember 12, 2019

废话不多说啦,我就直接上代码吧,需要的朋友可以过来参考下

layui.use([ 'tree' ], function() {
$ = layui.jquery;
form = layui.form;
//获取节点数据
getTreeData();
});
 
function getTreeData()
{
$.ajax({
url : path+"/RoleController/getResourceTree.do",
type : "post",
dataType : "json",
data :{
"roleId":roleId,
"id":null,
"t":Math.random()
} ,
error : function() {
},
success : function(data) {
treeData = JSON.stringify(data);
initMenuTree();
}
});
}
 
// 加载列表
function initMenuTree() {
//json数姐转换成对象
treeData = eval( "(" + treeData + ")" );
//console.log(treeData);
// 执行渲染
treeIns = layui.tree({
elem: '#demo', //指定元素,生成的树放到哪个元素上
check: 'checkbox', //勾选风格
skin: 'as', //设定皮肤
drag: true,//点击每一项时是否生成提示信息
checkboxName: 'aa[]',//复选框的name属性值
checkboxStyle: "",//设置复选框的样式,必须为字符串,css样式怎么写就怎么写
click: function(item) { //点击节点回调
 //alert(item);
},
change: function (item){//当当前input发生变化后所执行的回调
//console.log(item);
resourceIds=item;
},
data: {//为元素添加额外数据,即在元素上添加data-xxx="yyy",可选
      hasChild: true
    },
nodes:treeData
});
return treeIns;
}

以上这篇layui实现checkbox的目录树tree的例子就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
如何用javascript控制上传文件的大小
Oct 26 Javascript
用Javascript数组处理多个字符串的连接问题
Aug 20 Javascript
javascript来定义类的规范小结
Nov 19 Javascript
JavaScript代码轻松实现网页内容禁止复制(代码简单)
Oct 23 Javascript
基于jQuery实现的美观星级评论打分组件代码
Oct 30 Javascript
利用jQuery实现WordPress中@的ID悬浮显示评论内容
Dec 11 Javascript
javascript实现不同颜色Tab标签切换效果
Apr 27 Javascript
js实现日历与定时器
Feb 22 Javascript
js实现省市级联效果分享
Aug 10 Javascript
vue.js实现会动的简历(包含底部导航功能,编辑功能)
Apr 08 Javascript
javascript sort()对数组中的元素进行排序详解
Oct 13 Javascript
Vue 路由间跳转和新开窗口的方式(query、params)
Dec 25 Javascript
layui表单提交到后台自动封装到实体类的方法
Sep 12 #Javascript
使用flow来规范javascript的变量类型
Sep 12 #Javascript
LayUI数据接口返回实体封装的例子
Sep 12 #Javascript
浅谈layui 数据表格前后台传值的问题
Sep 12 #Javascript
layui框架与SSM前后台交互的方法
Sep 12 #Javascript
layui问题之渲染数据表格时,仅出现10条数据的解决方法
Sep 12 #Javascript
解决layui表格内文本超出隐藏的问题
Sep 12 #Javascript
You might like
Yii2使用自带的UploadedFile实现的文件上传
2016/06/20 PHP
基于php数组中的索引数组和关联数组详解
2018/03/12 PHP
PHPstorm激活码2020年5月13日亲测有效
2020/09/17 PHP
js限制文本框只能输入数字方法小结
2014/06/16 Javascript
jquery和js实现对div的隐藏和显示方法
2014/09/26 Javascript
javascript框架设计读书笔记之字符串的扩展和修复
2014/12/02 Javascript
jQuery实现高亮显示的方法
2015/03/10 Javascript
JavaScript黑洞数字之运算路线查找算法(递归算法)实例
2016/01/28 Javascript
javascript 动态脚本添加的简单方法
2016/10/11 Javascript
纯JS实现弹性导航条效果
2017/03/06 Javascript
jquery实现图片上传前本地预览
2017/04/28 jQuery
vue-cli单页应用改成多页应用配置详解
2017/07/14 Javascript
JavaScript运行原理分析
2018/02/09 Javascript
微信小程序结合Storage实现搜索历史效果
2019/05/18 Javascript
JS实现拖动模糊框特效
2020/08/25 Javascript
[57:55]EG vs Fnatic 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
wxpython 学习笔记 第一天
2009/03/16 Python
python 多线程应用介绍
2012/12/19 Python
python实现一组典型数据格式转换
2018/12/15 Python
linux 下python多线程递归复制文件夹及文件夹中的文件
2020/01/02 Python
Python运行提示缺少模块问题解决方案
2020/04/02 Python
python递归函数用法详解
2020/10/26 Python
python UIAutomator2使用超详细教程
2021/02/19 Python
Pytorch模型迁移和迁移学习,导入部分模型参数的操作
2021/03/03 Python
HomeAway英国:全球领先的度假租赁在线市场
2020/02/03 全球购物
SQL数据库笔试题
2016/03/08 面试题
大学生村官心得体会范文
2014/01/04 职场文书
《第一朵杏花》教学反思
2014/04/16 职场文书
李培根演讲稿
2014/05/22 职场文书
青奥会口号
2014/06/12 职场文书
学生顶撞老师的检讨书
2014/09/17 职场文书
铣工实训报告
2014/11/05 职场文书
教师外出学习心得体会
2016/01/18 职场文书
实现AJAX异步调用和局部刷新的基本步骤
2022/03/17 Javascript
对讲机知识
2022/04/07 无线电
win10更新失败无限重启解决方法
2022/04/19 数码科技