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 相关文章推荐
js对象数组按属性快速排序
Jan 31 Javascript
javascript返回顶部效果(自写代码)
Jan 06 Javascript
JavaScript让网页出现渐隐渐显背景颜色的方法
Apr 21 Javascript
常用的js方法合集
Mar 10 Javascript
JS获取短信验证码倒计时的实现代码
May 22 Javascript
微信小程序获取循环元素id以及wx.login登录操作
Aug 17 Javascript
js中json对象和字符串的理解及相互转化操作实现方法
Sep 22 Javascript
vue中Axios的封装与API接口的管理详解
Aug 09 Javascript
在vue-cli的组件模板里使用font-awesome的两种方法
Sep 28 Javascript
js实现弹出框的拖拽效果实例代码详解
Apr 16 Javascript
解决nuxt 自定义全局方法,全局属性,全局变量的问题
Nov 05 Javascript
JavaScript 中的执行上下文和执行栈实例讲解
Feb 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
PHP中使用gettext来支持多语言的方法
2011/05/02 PHP
PHP小程序支付功能完整版【基于thinkPHP】
2019/03/26 PHP
JSON 编辑器实现代码
2009/12/06 Javascript
jQuery对象与DOM对象之间的转换方法
2010/04/15 Javascript
将json对象转换为字符串的方法
2014/02/20 Javascript
javascript异步编程代码书写规范Promise学习笔记
2015/02/11 Javascript
基于zepto.js实现仿手机QQ空间的大图查看组件ImageView.js详解
2015/03/05 Javascript
jquery ztree异步搜索(搜叶子)实践
2016/02/25 Javascript
AngularJS bootstrap启动详解及实例代码
2016/09/14 Javascript
CSS+jQuery实现简单的折叠菜单
2016/12/20 Javascript
js实现可以点击收缩或张开的悬浮窗
2017/09/18 Javascript
从源码看angular/material2 中 dialog模块的实现方法
2017/10/18 Javascript
JavaScript屏蔽Backspace键的实现代码
2017/11/02 Javascript
对Vue2 自定义全局指令Vue.directive和指令的生命周期介绍
2018/08/30 Javascript
Vue.set() this.$set()引发的视图更新思考及注意事项
2018/08/30 Javascript
实例介绍JavaScript中多种组合继承
2019/01/20 Javascript
Element中的Cascader(级联列表)动态加载省\市\区数据的方法
2019/03/27 Javascript
JavaScript Array对象基本方法详解
2019/09/03 Javascript
VUE 实现element upload上传图片到阿里云
2020/08/12 Javascript
Webpack5正式发布,有哪些新特性
2020/10/12 Javascript
js canvas实现五子棋小游戏
2021/01/22 Javascript
[01:22:28]DOTA2-DPC中国联赛 正赛 SAG vs RNG BO3 第一场 1月18日
2021/03/11 DOTA
详谈Python基础之内置函数和递归
2017/06/21 Python
Python实现按照指定要求逆序输出一个数字的方法
2018/04/19 Python
对python自动生成接口测试的示例讲解
2018/11/30 Python
Python装饰器用法与知识点小结
2020/03/09 Python
tensorflow图像裁剪进行数据增强操作
2020/06/30 Python
如何通过命令行进入python
2020/07/06 Python
Canvas获取视频第一帧缩略图的实现
2020/11/11 HTML / CSS
伦敦的高级牛仔布专家:Trilogy
2018/08/06 全球购物
Charlotte Tilbury澳大利亚官网:英国美妆品牌
2018/10/05 全球购物
Coggles美国/加拿大:高级国际时装零售商
2018/10/23 全球购物
优秀大学生推荐信范文
2013/11/28 职场文书
教导主任竞聘演讲稿
2014/05/16 职场文书
高考1977观后感
2015/06/04 职场文书
MySQL COUNT函数的使用与优化
2021/05/10 MySQL