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中使用正则匹配多条,且获取每条中的分组数据
Nov 30 Javascript
自写的jQuery异步加载数据添加事件
May 15 Javascript
JS获取客户端IP地址、MAC和主机名的7个方法汇总
Jul 21 Javascript
jQuery+PHP实现可编辑表格字段内容并实时保存
Oct 09 Javascript
JavaScript中获取时间的函数集
Aug 16 Javascript
AngularJs  unit-testing(单元测试)详解
Sep 02 Javascript
jQuery ui autocomplete选择列表被Bootstrap模态窗遮挡的完美解决方法
Sep 23 Javascript
jQuery插件HighCharts绘制2D半圆环图效果示例【附demo源码下载】
Mar 09 Javascript
vue.js国际化 vue-i18n插件的使用详解
Jul 07 Javascript
JS基于对象的特性实现去除数组中重复项功能详解
Nov 17 Javascript
vue slot与传参实例代码讲解
Apr 28 Javascript
详解如何提升JSON.stringify()的性能
Jun 12 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
mysql时区问题
2008/03/26 PHP
php 中的4种标记风格介绍
2012/05/10 PHP
php中判断数组相等的方法以及数组运算符介绍
2015/03/30 PHP
PHP使用PDO调用mssql存储过程的方法示例
2017/10/07 PHP
createElement动态创建HTML对象脚本代码
2008/11/24 Javascript
把jquery 的dialog和ztree结合实现步骤
2013/08/02 Javascript
jQuery is()函数用法3例
2014/05/06 Javascript
JavaScript中的类数组对象介绍
2014/12/30 Javascript
JavaScript实现基于Cookie的存储类实例
2015/04/10 Javascript
使用Node.js实现HTTP 206内容分片的教程
2015/06/23 Javascript
jQuery拖动元素并对元素进行重新排序
2015/12/30 Javascript
JS深度拷贝Object Array实例分析
2016/03/31 Javascript
微信小程序组件 contact-button(客服会话按钮)详解及实例代码
2017/01/10 Javascript
详解node单线程实现高并发原理与node异步I/O
2017/09/21 Javascript
vue组件生命周期详解
2017/11/07 Javascript
javascript函数的节流[throttle]与防抖[debounce]
2017/11/15 Javascript
vuex的简单使用教程
2018/02/02 Javascript
Vuejs 单文件组件实例详解
2018/02/09 Javascript
JavaScript this在函数中的指向及实例详解
2019/10/14 Javascript
JavaScript实现随机点名程序
2020/03/25 Javascript
Node.js API详解之 net模块实例分析
2020/05/18 Javascript
vue循环中点击选中再点击取消(单选)的实现
2020/09/10 Javascript
js实现验证码干扰(静态)
2021/02/22 Javascript
[03:17]史诗级大片应援2018DOTA2国际邀请赛 致敬每一位坚守遗迹的勇士
2018/07/20 DOTA
[43:43]完美世界DOTA2联赛PWL S2 FTD.C vs Rebirth 第一场 11.22
2020/11/24 DOTA
windows系统下Python环境搭建教程
2017/03/28 Python
Python操作Oracle数据库的简单方法和封装类实例
2018/05/07 Python
解决Python pandas plot输出图形中显示中文乱码问题
2018/12/12 Python
python3.x 生成3维随机数组实例
2019/11/28 Python
python的json包位置及用法总结
2020/06/21 Python
澳大利亚首屈一指的在线购物目的地:Kogan.com
2017/02/02 全球购物
美国在线家具网站:GDFStudio
2021/03/13 全球购物
优秀士兵个人事迹材料
2014/01/19 职场文书
校园安全教育广播稿
2014/02/17 职场文书
2014法制宣传日活动总结范文
2014/11/01 职场文书
MySQL磁盘碎片整理实例演示
2022/04/03 MySQL