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
        }
      ]
    }
  ]
}
复制代码

转载于:https://juejin.im/post/5d1579de6fb9a07eb67da2d1