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客户端脚本的设计和应用
Aug 21 Javascript
JQuery动态给table添加、删除行 改进版
Jan 19 Javascript
各种常用的JS函数整理
Oct 25 Javascript
JavaScript省市联动实现代码
Feb 15 Javascript
jQuery实现炫酷的鼠标轨迹特效
Feb 01 Javascript
JavaScript实现16进制颜色值转RGB的方法
Feb 09 Javascript
JavaScript实现跑马灯抽奖活动实例代码解析与优化(二)
Feb 16 Javascript
JavaScript实现微信号随机切换代码
Mar 09 Javascript
vue-router 起步步骤详解
Mar 26 Javascript
图解javascript作用域链
May 27 Javascript
解决Layui 表格自适应高度的问题
Nov 15 Javascript
vue制作toast组件npm包示例代码
Oct 29 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
剧场版动画《PSYCHO-PASS 3 FIRST INSPECTOR》3月27日日本上映!
2020/03/06 日漫
山进SANGEAN ATS-909X电路分析
2021/03/02 无线电
php 随机数的产生、页面跳转、件读写、文件重命名、switch语句
2009/08/07 PHP
PHP 网络开发详解之远程文件包含漏洞
2010/04/25 PHP
ThinkPHP实现跨模块调用操作方法概述
2014/06/20 PHP
php实现微信公众平台发红包功能
2018/06/14 PHP
PHP大文件切割上传功能实例分析
2019/07/01 PHP
javascript flash下fromCharCode和charCodeAt方法使用说明
2008/01/12 Javascript
写出更好的JavaScript程序之undefined篇(中)
2009/11/23 Javascript
jQuery学习笔记之jQuery构建函数的7种方法
2014/06/03 Javascript
jQuery实现平滑滚动页面到指定锚点链接的方法
2015/07/15 Javascript
JS版微信6.0分享接口用法分析
2016/10/13 Javascript
webpack手动配置React开发环境的步骤
2018/07/02 Javascript
javascript实现异形滚动轮播
2019/11/28 Javascript
vue实现商品列表的添加删除实例讲解
2020/05/14 Javascript
Vue中引入svg图标的两种方式
2021/01/14 Vue.js
python list语法学习(带例子)
2013/11/01 Python
详解Python中的文本处理
2015/04/11 Python
Python内置函数delattr的具体用法
2017/11/23 Python
python3.6环境下安装freetype库和基本使用方法(推荐)
2020/05/10 Python
Django ForeignKey与数据库的FOREIGN KEY约束详解
2020/05/20 Python
Python如何实现FTP功能
2020/05/28 Python
Pandas的数据过滤实现
2021/01/15 Python
css3的动画特效之动画序列(animation)
2017/12/22 HTML / CSS
HTML5 Web Workers之网站也能多线程的实现
2013/04/24 HTML / CSS
HTML5学习笔记之html5与传统html区别
2016/01/06 HTML / CSS
Maje德国官网:法国女性成衣品牌
2017/02/10 全球购物
GUESS Factory加拿大:牛仔裤、服装及配饰
2019/09/20 全球购物
英国折扣高尔夫商店:Discount Golf Store
2019/11/19 全球购物
新电JAVA笔试题目
2014/08/31 面试题
编辑求职信样本
2013/12/16 职场文书
国际贸易求职信
2014/07/05 职场文书
2015年度房地产工作总结
2015/04/09 职场文书
2015年农村党员公开承诺事项
2015/04/28 职场文书
介绍信怎么写
2015/05/05 职场文书
2015法院个人工作总结范文
2015/05/25 职场文书