LayUI treeselect.js

摘要:

//LayUI扩展组件之treeselect.js by:Van

这是一个基于ztree.js和layui扩展的树形下拉多选组件


作者 :Van

社区主页: http://fly.layui.com/u/784224/

E-mail:zheng_jinfan@126.com

QQ交流群:248049395 加时请注明来意.

KITADMIN: http://kit.zhengjinfan.cn/ 基于LayUI 2.x 扩展的一个后台管理模板.

下载地址:http://kit.zhengjinfan.cn/res/layui-treeselect.zip

Demo 演示
辅助文字
使用文档

依赖项:

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插件,如果当前的设置不能满足你们的需求的话,你们可以直接改源码,以实现你们的个性化需求