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(一)jquery选择符 必备知识点
Nov 25 Javascript
如何确保JavaScript的执行顺序 之实战篇
Mar 03 Javascript
Js 时间函数getYear()的使用问题探讨
Apr 01 Javascript
javascript读取Xml文件做一个二级联动菜单示例
Mar 17 Javascript
JavaScript中九种常用排序算法
Sep 02 Javascript
JavaScript中的函数声明和函数表达式区别浅析
Mar 27 Javascript
jQuery Html控件基本操作(日常收集整理)
Mar 11 Javascript
详解Vue2.0之去掉组件click事件的native修饰
Apr 20 Javascript
详解HTML5 使用video标签实现选择摄像头功能
Oct 25 Javascript
JavaScript程序设计高级算法之动态规划实例分析
Nov 24 Javascript
JavaScript复制内容到剪贴板的两种常用方法
Feb 27 Javascript
微信小程序使用component自定义toast弹窗效果
Nov 27 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
简单的cookie计数器实现源码
2013/06/07 PHP
jQuery+PHP实现的掷色子抽奖游戏实例
2015/01/04 PHP
Laravel中使用FormRequest进行表单验证方法及问题汇总
2016/06/19 PHP
支持汉转拼和拼音分词的PHP中文工具类ChineseUtil
2018/02/23 PHP
Codeigniter里的无刷新上传的实现代码
2019/04/14 PHP
做网页的一些技巧(续)
2007/02/01 Javascript
ExtJS判断IE浏览器类型的方法
2014/02/10 Javascript
js实现鼠标经过时图片滚动停止的方法
2015/02/16 Javascript
asp.net中oracle 存储过程(图文)
2015/08/12 Javascript
JavaScript学习笔记整理_用于模式匹配的String方法
2016/09/19 Javascript
jQuery Ajax File Upload实例源码
2016/12/12 Javascript
javascript表单正则应用
2017/02/04 Javascript
javascript事件的传播基础实例讲解(35)
2017/02/14 Javascript
js canvas实现放大镜查看图片功能
2017/06/08 Javascript
Element-UI Table组件上添加列拖拽效果实现方法
2018/04/14 Javascript
vue input输入框关键字筛选检索列表数据展示
2020/10/26 Javascript
openlayers4实现点动态扩散
2020/08/17 Javascript
微信小游戏中three.js离屏画布的示例代码
2020/10/12 Javascript
Python 列表list使用介绍
2014/11/30 Python
使用Python的PEAK来适配协议的教程
2015/04/14 Python
深入理解Python中各种方法的运作原理
2015/06/15 Python
python数据预处理之数据标准化的几种处理方式
2019/07/17 Python
在python shell中运行python文件的实现
2019/12/21 Python
Python爬虫爬取、解析数据操作示例
2020/03/27 Python
Django media static外部访问Django中的图片设置教程
2020/04/07 Python
pandas to_excel 添加颜色操作
2020/07/14 Python
世界上最大的餐具公司:Oneida
2016/12/17 全球购物
英国一家集合了众多有才华设计师品牌的奢侈店:Wolf & Badger
2018/04/18 全球购物
Michael Kors澳大利亚官网:世界知名的奢侈饰品和成衣设计师
2020/02/13 全球购物
英国自行车商店:AW Cycles
2021/02/24 全球购物
实体的生命周期
2013/08/31 面试题
高中地理教学反思
2014/01/29 职场文书
体育教师研修感悟
2015/11/18 职场文书
Java elasticsearch安装以及部署教程
2021/06/28 Java/Android
Golang 并发编程 SingleFlight模式
2022/04/26 Golang
本地搭建minio文件服务器(使用bat脚本启动)的方法
2022/07/15 Servers