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 prototype属性使用说明
May 13 Javascript
avascript中的自执行匿名函数应用示例
Sep 15 Javascript
jquery.cookie.js用法实例详解
Dec 25 Javascript
WordPress 单页面上一页下一页的实现方法【附代码】
Mar 10 Javascript
JQuery fileupload插件实现文件上传功能
Mar 18 Javascript
vue项目中做编辑功能传递数据时遇到问题的解决方法
Dec 19 Javascript
JavaScript实现经典排序算法之选择排序
Dec 28 Javascript
使用UrlConnection实现后台模拟http请求的简单实例
Jan 04 Javascript
BootStrap便签页的简单应用
Jan 06 Javascript
vue中uni-app 实现小程序登录注册功能
Oct 12 Javascript
vue项目中openlayers绘制行政区划
Dec 24 Vue.js
Vue使用Ref跨层级获取组件的步骤
Jan 25 Vue.js
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
php 小乘法表实现代码
2009/07/16 PHP
PHP中根据IP地址判断城市实现城市切换或跳转代码
2012/09/04 PHP
深入PHP中的HashTable结构详解
2013/06/13 PHP
php inc文件使用的风险和注意事项
2013/11/12 PHP
php使用CURL模拟GET与POST向微信接口提交及获取数据的方法
2016/09/23 PHP
laravel 框架结合关联查询 when()用法分析
2019/11/22 PHP
初识JQuery 实例一(first)
2011/03/16 Javascript
原生js和jquery中有关透明度设置的相关问题
2014/01/08 Javascript
Ajax局部更新导致JS事件重复触发问题的解决方法
2014/10/14 Javascript
jQuery中height()方法用法实例
2014/12/24 Javascript
JavaScript SHA-256加密算法详细代码
2016/10/06 Javascript
原生JS和jQuery操作DOM对比总结
2017/01/19 Javascript
详解A标签中href=""的几种用法
2017/08/20 Javascript
分享ES6的7个实用技巧
2018/01/18 Javascript
vue 权限认证token的实现方法
2018/07/17 Javascript
react 兄弟组件如何调用对方的方法示例
2018/10/23 Javascript
javascript实现的字符串转换成数组操作示例
2019/06/13 Javascript
jQuery中DOM操作原则实例分析
2019/08/01 jQuery
优化Vue中date format的性能详解
2020/01/13 Javascript
原生js实现点击轮播切换图片
2020/02/11 Javascript
[01:01:35]Optic vs paiN 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
Python向MySQL批量插数据的实例讲解
2018/03/31 Python
我就是这样学习Python中的列表
2019/06/02 Python
Python发送邮件的实例代码讲解
2019/10/16 Python
在Tensorflow中查看权重的实现
2020/01/24 Python
Python爬取365好书中小说代码实例
2020/02/28 Python
Pytorch 图像变换函数集合小结
2021/02/01 Python
英国乡村时尚和宠物用品专家:Pet & Country
2018/07/02 全球购物
日语系毕业生推荐信
2013/11/11 职场文书
化工专业大学生职业生涯规划书
2014/01/14 职场文书
大学生自我鉴定评语
2014/01/27 职场文书
大堂副理的岗位职责范文
2014/02/17 职场文书
经济贸易系毕业生求职信
2014/05/31 职场文书
机关领导干部作风整顿整改措施
2014/09/19 职场文书
2015年青年志愿者协会工作总结
2015/04/27 职场文书
OpenCV-Python实现图像平滑处理操作
2021/06/08 Python