依赖项:
1、ztree.js 插件,官方文档地址:http://www.treejs.cn/v3/api.php
使用方法及步骤 #
步骤一:引入css 注:标红的都是很重要的~!~
//:除开layui.css额外样式
// ztree.css 是ztree.js 提供的metro皮肤
<link rel="stylesheet" href="../src/css/ztree/metro/ztree.css" media="all" />
// treeselect.css 是我自定的样式
<link rel="stylesheet" href="../src/css/treeselect.css" media="all" />
步骤二:添加html代码(和form表单代码一样简单,只不过需要设置额外的class)
<form class="layui-form" action="">
<div class="layui-form-item">
<label class="layui-form-label">多选下拉1
<div class="layui-input-block layui-input-treeselect"> //layui-input-treeselect 一定要设置
//treeselect1 Id也一定要设置且唯一
<input type="text" name="t1" id="treeselect1" required lay-verify="required" autocomplete="off" class="layui-input">
</div>
</div>
</form>
步骤二:添加js代码(和使用layui自带模块一样简单)
<script src="../plugins/layui/layui.js">
<script>
layui.config({
base: '../src/js/' //自定义组件的目录--相对路径
}).use(['form', 'treeselect'], function() {
var form = layui.form,
treeselect = layui.treeselect;
//通过调用render方法进行渲染 [render支持链式调用]
treeselect.render({ //渲染第一个
elem:'#treeselect1', //这个设置必要为id属性且必须加上#号
data:[{
id:1,
name:'父节点一'
},{
id:2,
name:'父节点二',
open:true, //是否默认打开
isParent:true, //是否为父节点
children:[{
id:3,
name:'子节点一'
},{
id:4,
name:'子节点二',
isParent:true,
children:[{
id:5,
name:'子节点2.1'
}]
}]
}]
}).render({ //渲染第二个treeselect
//参数设置如上..
});
// 监听表单提交
form.on('submit(formDemo)', function(data) {
console.log(data);
return false; //返回false阻止提交
});
});
</script>
//写在最后:ztree.js 是一个很强大的树菜单jq插件,如果当前的设置不能满足你们的需求的话,你们可以直接改源码,以实现你们的个性化需求