eleTree樹形插件引入

先放一個效果

 

@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版本合並在了一起，目錄如下