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 相关文章推荐
extjs3 combobox取value和text案例详解
Feb 06 Javascript
js实现延迟加载的方法
Jun 24 Javascript
封装好的javascript前端分页插件pagination
Jan 04 Javascript
js闭包引起的事件注册问题介绍
Mar 29 Javascript
jQuery插件HighCharts实现的2D堆条状图效果示例【附demo源码下载】
Mar 14 Javascript
addEventListener()与removeEventListener()解析
Apr 20 Javascript
vuejs事件中心管理组件间的通信详解
Aug 09 Javascript
详解vue项目打包后通过百度的BAE发布到网上的流程
Mar 05 Javascript
浅谈JavaScript中的“!!”作用
Aug 03 Javascript
如何在Vue.JS中使用图标组件
Aug 04 Javascript
angular8.5集成TinyMce5的使用和详细配置(推荐)
Nov 16 Javascript
JavaScript枚举选择jquery插件代码实例
Nov 17 jQuery
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/10/09 PHP
php实现cc攻击防御和防止快速刷新页面示例
2014/02/13 PHP
PHP提示Deprecated: mysql_connect(): The mysql extension is deprecated的解决方法
2014/08/28 PHP
PHP微信红包API接口
2015/12/05 PHP
PHP实现的oracle分页函数实例
2016/01/25 PHP
Yii2.0 模态弹出框+ajax提交表单
2016/05/22 PHP
Thinkphp3.2.3整合phpqrcode生成带logo的二维码
2016/07/21 PHP
Yii2框架实现注册和登录教程
2016/09/30 PHP
用Javascript实现锚点(Anchor)间平滑跳转
2009/09/08 Javascript
利用jQuery接受和处理xml数据的代码(.net)
2011/03/28 Javascript
浅析js中取绝对值的2种方法
2013/07/09 Javascript
页面图片浮动左右滑动效果的简单实现案例
2014/02/10 Javascript
DEDECMS如何为文章添加HOT NEW标志图片
2015/08/14 Javascript
jQuery Ajax页面局部加载方法汇总
2016/06/02 Javascript
jQuery 利用$.ajax 时获取原生XMLHttpRequest 对象的方法
2016/08/25 Javascript
基于JS实现横线提示输入验证码随验证码输入消失(js验证码的实现)
2016/10/27 Javascript
js实现百度登录框鼠标拖拽效果
2017/03/07 Javascript
JScript实现地址选择功能
2017/08/15 Javascript
jQuery实现动态显示select下拉列表数据的方法
2018/02/05 jQuery
详解javascript appendChild()的完整功能
2018/08/18 Javascript
通过实例了解js函数中参数的传递
2019/06/15 Javascript
超轻量级的js时间库miment使用解析
2019/08/02 Javascript
用vue写一个日历
2020/11/02 Javascript
Python DataFrame设置/更改列表字段/元素类型的方法
2018/06/09 Python
浅析python继承与多重继承
2018/09/13 Python
python 命名规范知识点汇总
2020/02/14 Python
雅诗兰黛美国官网:Estee Lauder美国
2016/07/21 全球购物
美国精品家居用品网站:US-Mattress
2016/08/24 全球购物
一些PHP的面试题
2015/05/06 面试题
25道Java面试题集合
2013/05/21 面试题
班主任寄语大全
2014/04/04 职场文书
优秀的应届生自荐信
2014/05/23 职场文书
普通党员四风问题对照检查材料
2014/09/27 职场文书
乡镇镇长个人整改措施
2014/10/01 职场文书
2014年信息技术工作总结
2014/12/16 职场文书
2015年化验员工作总结
2015/04/10 职场文书