zTree树的生成

最新推荐文章于 2024-01-25 12:00:00 发布

key_zhaojd

最新推荐文章于 2024-01-25 12:00:00 发布

阅读量1.7k

点赞数

分类专栏： zTree 文章标签： zTree

本文链接：https://blog.csdn.net/ZJDWHD/article/details/60875758

版权

zTree 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

--js代码：
$(function() {
      var $ztree = $('#lockTree');

      var setting = {
            check : {
                  enable : true,
                  chkStyle : "checkbox"
            },
            async : {
                  enable : true,
                  url : ctx + "permission/tree",
                  autoParam : [ "id=pid" ],
                  dataFilter : function(treeId, parentNode, childNodes) {
                        console.log(childNodes);
                        if (childNodes == null)
                              return null;
                        var nodes = childNodes.data;
                        return nodes;
                  }
            },
            data : {
                  simpleData : {
                        enable : true,
                        idKey : "id",
                        pIdKey : "pid",
                        rootPId : ""
                  }
            },
      };

      var znode = [ {
            id : '',
            name : '根目录',
            isParent : true,
            pid : ''
      } ];

      var ztree = $.fn.zTree.init($ztree, setting, znode);
}

html代码：
<button class="btn btn-default btn-sm permission" data-toggle="modal" data-target="#lockModal">
     <span class="glyphicon glyphicon-plus"></span> 新增</button>

<!-- 人员架构树模态框 -->
<div class="modal fade" id="lockModal" tabindex="-1" role="dialog" data-backdrop='static' aria-hidden="true">
     <div class="modal-dialog" role="document">
          <div class="modal-content">
               <div class="modal-body" style="text-align: center;">
                    <ul id="lockTree" class="ztree"></ul></div>

               <div class="modal-footer">
                    <button type="button" class="btn btn-primary">确定</button>
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button></div>
           </div>
     </div>
</div>