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 相关文章推荐
几行代码轻松搞定jquery实现flash8类似的连接效果
May 03 Javascript
jquery tab标签页的制作
May 10 Javascript
jquery中的 $("#jb51")与document.getElementById("jb51") 的区别
Jul 26 Javascript
javascript SpiderMonkey中的函数序列化如何进行
Dec 05 Javascript
JavaScript与DOM组合动态创建表格实例
Dec 23 Javascript
深入解读JavaScript中的Iterator和for-of循环
Jul 28 Javascript
不间断循环滚动效果的实例代码(必看篇)
Oct 08 Javascript
基于Node的React图片上传组件实现实例代码
May 10 Javascript
JavaScript30 一个月纯 JS 挑战中文指南(英文全集)
Jul 23 Javascript
快速解决vue在ios端下点击响应延时的问题
Aug 27 Javascript
django使用channels2.x实现实时通讯
Nov 28 Javascript
使用vue打包进行云服务器上传的问题
Mar 02 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 intval的测试代码发现问题
2008/07/27 PHP
Windows 下的 PHP-PEAR 安装方法
2010/11/20 PHP
php使用post数组的键值创建同名变量并赋值的方法
2015/04/03 PHP
PHP5.2中PDO的简单使用方法
2016/03/25 PHP
PHP正则替换函数preg_replace()报错:Notice Use of undefined constant的解决方法分析
2017/02/04 PHP
基于PHP实现邮箱验证激活过程详解
2020/10/28 PHP
javascript 播放器 控制
2007/01/22 Javascript
基于jquery的图片懒加载js
2010/06/30 Javascript
js通过googleAIP翻译PHP系统的语言配置的实现代码
2011/10/17 Javascript
JavaScript基本数据类型及值类型和引用类型
2015/08/25 Javascript
移动适配的几种方案(三种方案)
2016/11/25 Javascript
基于JQuery实现的跑马灯效果(文字无缝向上翻动)
2016/12/02 Javascript
vue实现动态显示与隐藏底部导航的方法分析
2019/02/11 Javascript
vue3.0中的双向数据绑定方法及优缺点
2019/08/01 Javascript
微信小程序如何获取用户头像和昵称
2019/09/23 Javascript
JavaScript实现简单随机点名器
2019/11/21 Javascript
python中合并两个文本文件并按照姓名首字母排序的例子
2014/04/25 Python
Python学习笔记之常用函数及说明
2014/05/23 Python
Python中动态获取对象的属性和方法的教程
2015/04/09 Python
Django中处理出错页面的方法
2015/07/15 Python
详解Golang 与python中的字符串反转
2017/07/21 Python
python实现根据文件关键字进行切分为多个文件的示例
2018/12/10 Python
python路径的写法及目录的获取方式
2019/12/26 Python
Python逐行读取文件内容的方法总结
2020/02/14 Python
Django REST 异常处理详解
2020/07/15 Python
HTML5全屏(Fullscreen)API详细介绍
2015/04/24 HTML / CSS
飞利浦法国官网:Philips法国
2019/07/10 全球购物
优秀大学生推荐信范文
2013/11/28 职场文书
结婚邀请函范文
2014/01/14 职场文书
小学美术教学反思
2014/02/01 职场文书
10的分与合教学反思
2014/04/30 职场文书
锅炉工岗位职责
2015/02/13 职场文书
评估“风险”创业计划的几大要点
2019/08/12 职场文书
Vue和Flask通信的实现
2021/05/19 Vue.js
Python还能这么玩之用Python做个小游戏的外挂
2021/06/04 Python
Python异常类型以及处理方法汇总
2021/06/05 Python