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 相关文章推荐
做网页的一些技巧(续)
Feb 01 Javascript
用JavaScript调用WebService的示例
Apr 07 Javascript
WordPress JQuery处理沙发头像
Jun 22 Javascript
js 实现无干扰阴影效果 简单好用(附文件下载)
Dec 27 Javascript
jQuery页面刷新(局部、全部)问题分析
Jan 09 Javascript
手机Web APP如何实现分享多平台功能
Aug 19 Javascript
Bootstrap Table使用心得总结
Nov 29 Javascript
JS仿淘宝搜索框用户输入事件的实现
Jun 19 Javascript
ES6知识点整理之模块化的应用详解
Apr 15 Javascript
js实现弹出框的拖拽效果实例代码详解
Apr 16 Javascript
jquery实现简单拖拽效果
Jul 20 jQuery
vant 时间选择器--开始时间和结束时间实例
Nov 04 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
php发送post请求函数分享
2014/03/06 PHP
PHP实现的各类hash算法长度及性能测试实例
2017/08/27 PHP
使用户点击后退按钮使效三行代码
2007/07/07 Javascript
JSQL SQLProxy 的 php 版本代码
2010/05/05 Javascript
jQuery页面滚动浮动层智能定位实例代码
2011/08/23 Javascript
兼容IE、FireFox、Chrome等浏览器的xml处理函数js代码
2011/11/30 Javascript
关于eval 与new Function 到底该选哪个?
2013/04/17 Javascript
javascript实现的弹出层背景置灰-模拟(easyui dialog)
2013/12/27 Javascript
Js判断CSS文件加载完毕的具体实现
2014/01/17 Javascript
node.js中watch机制详解
2014/11/17 Javascript
vue.js如何更改默认端口号8080为指定端口的方法
2017/07/14 Javascript
Vue.js实现表格渲染的方法
2018/09/07 Javascript
Angular使用ControlValueAccessor创建自定义表单控件
2019/03/08 Javascript
Vue-CLI 3.X 部署项目至生产服务器的方法
2019/03/22 Javascript
layui之数据表格--与后台交互获取数据的方法
2019/09/29 Javascript
JS实现纵向轮播图(初级版)
2020/01/18 Javascript
JavaScript 替换所有匹配内容及正则替换方法
2020/02/12 Javascript
vue+animation实现翻页动画
2020/06/29 Javascript
你应该知道的python列表去重方法
2017/01/17 Python
python dataframe向下向上填充,fillna和ffill的方法
2018/11/28 Python
python3 实现验证码图片切割的方法
2018/12/07 Python
pyqt5中QThread在使用时出现重复emit的实例
2019/06/21 Python
Python 元组拆包示例(Tuple Unpacking)
2019/12/24 Python
Win10用vscode打开anaconda环境中的python出错问题的解决
2020/05/25 Python
PyQt5如何将.ui文件转换为.py文件的实例代码
2020/05/26 Python
解决import tensorflow导致jupyter内核死亡的问题
2021/02/06 Python
荷兰游戏商店:Allyouplay
2019/03/16 全球购物
英国最大的割草机购买网站:Just Lawnmowers
2019/11/02 全球购物
丝芙兰意大利官方网站:Sephora.it
2019/12/13 全球购物
学习标兵获奖感言
2014/02/20 职场文书
技术比武方案
2014/05/19 职场文书
员工安全生产责任书
2014/07/22 职场文书
纪念九一八事变演讲稿:牢记历史,捍卫主权
2014/09/14 职场文书
2014乡镇班子个人对照检查材料思想汇报
2014/09/26 职场文书
2014年综合治理工作总结
2014/11/20 职场文书
2015医德医风个人工作总结
2015/04/02 职场文书