ztree学习---将默认勾选的展开

这里只给出前台页面上的代码，数据可以从后台获取，注意，在封装数据的时候，注意：Id（节点的id，可以是数字也可以是字符串） , pid（父亲节点的id） , name（节点名称）不能少。

html页面插入的代码：

    <div id="dialog-confirm" class="hide">

            <input type="hidden" id="uid" value=""/>

            <div class="zTreeDemoBackground left">

                <ul id="roleTree" class="ztree" ></ul>

            </div>

        </div>

将后台获取的数据展示成树状，默认勾选的将展开：

从后台获取数据，并展示成树状

 //弹出框分配角色

         function GetJqGridRowValue(id) {

             //window.open("[(${#request.getContextPath()})]/api/v1/registerService/manage");

             $( "#dialog-confirm" ).removeClass('hide').dialog({

                 resizable: true,

                 width: '500',

                 height:'400',//设置弹框的长度和高度，如果内容超过限制，则会出现滚动条

                 modal: true,

                 title: "<div class='widget-header'><h4 class='smaller'>分配角色</h4></div>",

                 title_html: true,

                 buttons: [

                     {

                         html: "<i class='ace-icon fa fa-check'></i>&nbsp; 保存",

                         "class" : "btn btn-primary btn-minier",

                         click: function() {

                             //点击保存事件触发的事件                             $( this ).dialog( "close" );

                         }

                     }

                     ,

                     {

                         html: "<i class='ace-icon fa fa-times bigger-110'></i>&nbsp; 取消",

                         "class" : "btn btn-minier",

                         click: function() {

                             $( this ).dialog( "close" );

                         }

                     }

                 ]

             });

                          var setting = {

                 check: {

                     enable: true,

                     nocheckInherit: true

                 },

                 data: {

                     simpleData: {

                         enable: true //这里启用简单数据格式，请务必设置id， pId，并且让数据满足父子关系，即对后台数据的要求，并且根节点pid为0

                     }

                 }

             };

             $.ajax({

                 type: "get",

                 url: "[(${#request.getContextPath()})]/api/v1/***,//从后台获取数据的url

                 data: {},

                 dataType: "json",

                 success: function(data){

                     $.fn.zTree.init($("#roleTree"), setting, data); //根据后台传过来的List<Map(String,String>>数据组装成树结构，map中包含id,pid,name，checked等key。

                     //树状结构,默认展开被勾选的 start

                     var tree = $.fn.zTree.getZTreeObj("roleTree");

                     var nodes=tree.getCheckedNodes(true);

                     for(var j=0;j<nodes.length;j++){

                           var node = tree.getNodeByParam("id",nodes[j].id);

                           var parent = node.getParentNode();

                           if(!parent.open){

                              tree.expandNode(parent,true,true);

                           }

                           tree.checkNode(node , true,true);

                     }

                     //end

                 },

                 error: function(XMLHttpRequest, textStatus, errorThrown) {

                     alert(XMLHttpRequest.status);

                     alert(XMLHttpRequest.readyState);

                     alert(textStatus);

                 },

             });

         }

设置默认展开勾选核心代码：

 //树状结构,默认展开被勾选的 start

                     var tree = $.fn.zTree.getZTreeObj("roleTree");

                     var nodes=tree.getCheckedNodes(true);

                     for(var j=0;j<nodes.length;j++){

                           var node = tree.getNodeByParam("id",nodes[j].id);

                           console.log("strs[j]"+nodes[j]+"node.id="+nodes[j].id)

                           var parent = node.getParentNode();

                           if(!parent.open){

                              tree.expandNode(parent,true,true);

                           }

                           tree.checkNode(node , true,true);

                     }

效果如下图：

List<Map<String,String> >结构如下：

map .put("pid","0")，map.put("id","111")，map.put("name","public")

map .put("pid","111")，map.put("id","admin")，map.put("name","管理员")

..........

最后将map加入到list中返回给前台

巴特西

ztree学习---将默认勾选的展开

最新文章

热门文章