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 13 Javascript
Javascript中的getUTCDay()方法使用详解
Jun 10 Javascript
jquery+CSS实现的多级竖向展开树形TRee菜单效果
Aug 24 Javascript
JQuery异步加载PartialView的方法
Jun 07 Javascript
百度搜索框智能提示案例jsonp
Nov 28 Javascript
JavaScript中日常收集常见的10种错误(推荐)
Jan 08 Javascript
AngularJs表单校验功能实例代码
Feb 09 Javascript
Vue AST源码解析第一篇
Jul 19 Javascript
JavaScript定时器setTimeout()和setInterval()详解
Aug 18 Javascript
使用Vue自定义数字键盘组件(体验度极好)
Dec 19 Javascript
jquery实现侧边栏左右伸缩效果的示例
Dec 19 jQuery
JavaScript实现点击切换验证码及校验
Jan 10 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中的日期及时间
2006/11/23 PHP
PHP读取XML值的代码(推荐)
2011/01/01 PHP
php将图片保存入mysql数据库失败的解决方法
2014/12/27 PHP
PHP查看当前变量类型的方法
2015/07/31 PHP
使用PHP和JavaScript判断请求是否来自微信内浏览器
2015/08/18 PHP
PHP使用PHPExcel删除Excel单元格指定列的方法
2016/07/06 PHP
php curl批处理实现可控并发异步操作示例
2018/05/09 PHP
PDO::setAttribute讲解
2019/01/29 PHP
PHP levenshtein()函数用法讲解
2019/03/08 PHP
幻宇的层模拟窗口效果-提供演示和下载
2007/01/20 Javascript
用apply让javascript函数仅执行一次的代码
2010/06/27 Javascript
js调用activeX获取u盘序列号的代码
2011/11/21 Javascript
查找Oracle高消耗语句的方法
2014/03/22 Javascript
javascript获取dom的下一个节点方法
2014/09/05 Javascript
javascript记录文本框内文字个数检测文字个数变化
2014/10/14 Javascript
js倒计时简单实现方法
2015/12/17 Javascript
一道JS前端闭包面试题解析
2015/12/25 Javascript
JS实现Ajax的方法分析
2016/12/20 Javascript
JS实现DOM节点插入操作之子节点与兄弟节点插入操作示例
2018/07/30 Javascript
javascript中UMD规范的代码推演
2018/08/29 Javascript
jQuery Ajax实现Select多级关联动态绑定数据的实例代码
2018/10/26 jQuery
jQuery实现的鼠标拖动浮层功能示例【拖动div等任何标签】
2018/12/29 jQuery
vue中axios的二次封装实例讲解
2019/10/14 Javascript
Vue+Node实现商品列表的分页、排序、筛选,添加购物车功能详解
2019/12/07 Javascript
js实现滑动进度条效果
2020/08/21 Javascript
javascript实现点击产生随机图形
2021/01/25 Javascript
[06:16]《DAC最前线》之地区预选赛全面回顾
2015/01/19 DOTA
[48:18]DOTA2-DPC中国联赛 正赛 RNG vs Dynasty BO3 第二场 1月29日
2021/03/11 DOTA
python实现决策树分类算法
2017/12/21 Python
python3.5+tesseract+adb实现西瓜视频或头脑王者辅助答题
2018/01/17 Python
基于Python List的赋值方法
2018/06/23 Python
对python cv2批量灰度图片并保存的实例讲解
2018/11/09 Python
pycharm远程连接vagrant虚拟机中mariadb数据库
2020/06/05 Python
捷克厨房用品购物网站:Tescoma
2018/07/13 全球购物
一帮一活动总结
2014/05/08 职场文书
2019入党申请书格式和范文
2019/06/25 职场文书