先放一个效果

@eleTree插件官网

刚开始用的xtree,不知为何总是达不到效果,不得已从layui官网插件中寻得这个eleTree插件,看着还不错,用法也简单。不过还是有点坑需要大家注意

开始使用:

引入css和js

layui/css/layui.css
layui/css/eleTree.css
layui/layui.js

动态数据使用示例

<script type="text/javascript">
layui.config({
base: "${pageContext.request.contextPath}/plugins/layui/lay/modules/" //eleTree.js所在目录
}).use(['jquery','eleTree'], function(){
var $ = layui.jquery;
var eleTree = layui.eleTree;
var json = ${menuTree};
eleTree.render({
elem: '.ele1',
data:json,
showCheckbox: true,
});
});
</script>

其中动态数据menuTree的数据如下:

[{"label":"用户","id":1,"children":[{"label":"网站用户","id":4,"data":[],"checked":false},{"label":"岗位管理","id":8,"data":[],"checked":false},{"label":"新增菜单","id":9,"data":[],"checked":false}]},{"label":"危险因素","id":5,"children":[{"label":"危险因素大类","id":6,"data":[],"checked":false},{"label":"危险因素类型","id":7,"data":[],"checked":true}]},{"label":"ceshi","id":10,"children":[]}]
eleTree.js和eleTree.css可通过官网的下载中中获取。为了便于大家下载,可直接点击我下载后上传到博客园的eleTree.rar
我直接与layui官网下载的layui-v2.4.5版本合并在了一起,目录如下

												

eleTree树形插件引入的更多相关文章

  1. 插件使用一树形插件---zTree

    zTree是一款挺好用的树形插件,中文文档齐全,demo丰富. 官方网站是 http://www.treejs.cn/v3/main.php#_zTreeInfo 源码网站 https://githu ...

  2. 这是用过的"最差"树形插件

      这是用过的"最差"树形插件 !!! 或许大家听过一个bootstrap UI框架---ace皮肤.有兴趣的童鞋可以在线查看:https://www.iteblog.com/ac ...

  3. ztree树形插件

    在开发项目中需要用到树插件,近期研究了几款树插件,好记性不如烂笔头 ,写下来  以后好查 MzTreeView(梅花雪) 很经典的树形菜单脚本控件 菜单树展示加载速度快 支持1w条以上大数据 缺点-- ...

  4. 【treeview】 基于jQuery的简单树形插件

    [treeview] 效果图: 前几天想把后台的目录结构通过树形插件的方法反映到前端来,在网上搜了半天只找到了这个treeview,虽然不是很好看,不过还是够用的..用treeview的前提是要有jq ...

  5. github 码云 chrome文件树形插件

    偶然间看到github有一个树形插件,对于代码层级较多的项目来说体验提升了很多 github的chrome插件 chrome商店: https://chrome.google.com/webstore ...

  6. Eclipse插件引入jar包的方法(转)

    搞了两天,终于找到解决办法了.原来  Eclipse 插件项目引入外面的jar包不能用   build path---->add external jars的方法. 先说明两个概念:类加载器,O ...

  7. Eclipse插件引入jar包的方法

    搞了两天,终于找到解决办法了.原来  Eclipse 插件项目引入外面的jar包不能用   build path---->add external jars的方法. 先说明两个概念:类加载器,O ...

  8. P3565 由简单的树形dp 引入 长链刨分

    这道题感觉不太行 因为自己没想出来. 先说一下暴力吧,取三个点 让两两之间的距离相等怎么做呢,看起来是很复杂的样子的,但是仔细观察发现 答案出自一个点的儿子之间 或者儿子和父亲之间. 暴力枚举三个点然 ...

  9. Jquery之树形插件

    1.DynaTree (推荐使用,说明文档以及样例在下载的压缩包里\doc\samples.html) DynaTree 是一个优化的动态jQuery树查看插件,它只在需要时才创建DOM元素.支持ch ...

随机推荐

  1. Web API的接口访问安全性

    使用签名获取Token 首先我们自定义appkey.appSecret.可用GUID随机生成,AppSecret要不定期更换.然后放到配置文件中. Appkey=1AF62C68-B970-46E7- ...

  2. Oracle中 to_date和to_char用法

    to_date("要转换的字符串","转换的格式")   两个参数的格式必须匹配,否则会报错. 即按照第二个参数的格式解释第一个参数. to_char(日期,& ...

  3. WordPress版微信小程序3.1.5版的新功能

    产品的完善是无止境,每过段时间就会发现产品的新问题,使用的人越多,提的需求也会越多,我听得最多的一句话就是:如果加上某某功能就完美了.其实,完美是不存在的,每个人的视角不一样,完美的定义也是不一样的. ...

  4. (最完美)红米手机4的USB调试模式在哪里开启的经验

    每次我们使用安卓手机通过数据线连接上Pc的时候,或者使用的有些应用比如我们团队营销部门每次使用的应用引号精灵,之前的老版本就需要开启Usb开发者调试模式下使用,现每次新版本不需要了,如果手机没有开启U ...

  5. include和require的区别

    include与require除了在处理引入文件的方式不同外,最大的区别就是:include在引入不存文件时产生一个警告且脚本还会继续执行,require则会导致一个致命性错误且脚本停止执行. inc ...

  6. 基于vue和svg的树形UI

      vue-svg-tree 基于vue和svg的动态树形UI 截图 应用 npm install vue-svg-tree 示例 <template> <div> <v ...

  7. scrapy-redis

    scrapy_redis的大概思路:将爬取的url通过 hashlin.sha1生成唯一的指纹,持久化存入redis,之后的url判断是否已经存在,达到去重的效果 下载scrapy-redis git ...

  8. 在云主机上基于nginx部署基于Flask的网站服务器 (自己部署 )

    1.申请云主机 a.阿里云 (注意:阿里云的服务器需要手动添加安全规则使能80端口) b.腾讯云 2.把网站服务器程序拷贝到云主机 3.远程登录云主机 4.解压网站服务器程序 yum install ...

  9. 在IDEA中设置命令行参数

  10. mysql安装密码策略插件

    https://blog.csdn.net/kk185800961/article/details/79447754 注意linux安装密码策略的插件 validate_password.so