dtree樹形結構異步傳輸

首先引入css文件
https://gitee.com/sunzhenzhen/ziyuanmulu/blob/master/src/main/webapp/layui/css/layui.css
https://gitee.com/sunzhenzhen/ziyuanmulu/blob/master/src/main/webapp/layui/dtree/dtree.css
https://gitee.com/sunzhenzhen/ziyuanmulu/blob/master/src/main/webapp/layui/dtree/font/dtreefont.css
其次引入js文件
https://gitee.com/sunzhenzhen/ziyuanmulu/blob/master/src/main/webapp/layui/layui.js
複製代碼

<div class="layui-row layui-col-space10" style="margin-top: 10px;">
        <div class="layui-col-lg2">
            <div style="height: 600px;overflow: auto;">
                <ul id="demoTree1" class="dtree" data-id="0"></ul>
            </div>
        </div>
        <div class="layui-col-lg10">
            <div style="height: 650px; width:100%;overflow: auto;" id="iframeId">
                <iframe src="${ctx }/sys/main" id="iframe_content" class="iframe_content" name="iframe_content" frameborder="0" style="width: 100%;height: 99%;"></iframe>
            </div>
        </div>
</div>
<script>
        layui.config({
            base: 'https://gitee.com/sunzhenzhen/ziyuanmulu/tree/master/src/main/webapp/layui/lay/modules/' //配置 layui 第三方擴展組件存放的基礎目錄
        }).extend({
            dtree: 'dtree' //定義該組件模塊名
        }).use(['element','layer', 'dtree'], function(){

            var layer = layui.layer,
                dtree = layui.dtree,
                element = layui.element,
                $ = layui.$;
            dtree.render({
                elem: "#demoTree1",  //綁定元素
                method:"POST",
                url: "${ctx}/sys/getDtree",  //異步接口
                none: "這裏暫無數據哦"
            });
            //單擊節點 監聽事件
            // 綁定節點的單擊事件
            dtree.on("node('demoTree1')", function(obj){
                console.log(obj.param.nodeId)
				var id=obj.param.nodeId;
                var str='<iframe src="${ctx }/sys/main?id='+id+'" id="iframe_content" class="iframe_content" name="iframe_content" frameborder="0" style="width: 100%;height: 99%;"></iframe>';
           		$("#iframeId").html(str);
            });

        });
	</script>
複製代碼

dtree須要的json格式爲
{
  "status": {
    "code": 200,
    "message": "操做成功"
  },
  "data": [
    {
      "id": "001",
      "title": "河南",
      "href": "#",
      "checkArr": [
        {
          "type": "0",
          "isChecked": "0"
        }
      ],
      "children": [
        {
          "id": "001",
          "title": "鄭州",
          "href": "#",
          "checkArr": [
            {
              "type": "0",
              "isChecked": "0"
            }
          ],
          "children": null
        },
        {
          "id": "003",
          "title": "洛陽",
          "href": "#",
          "checkArr": [
            {
              "type": "0",
              "isChecked": "0"
            }
          ],
          "children": null
        }
      ]
    }
  ]
}
複製代碼