zTree learning

Recently to do a thing about permissions, principles and databases already know, is a tree diagram difficult.

Originally intended to use layui because my ignorance ...... suffered a major loss, get three hours, do not fart. I can only say that ......

Later, Baidu found zTree, into learning a period of time, I can only say that is not an ordinary friendly and very easy to use. But still learning the morning, barely a little harvest.

To clear a number, I specifically set the default data is not official and the same structure.

CREATE TABLE uri(
  id BIGINT UNSIGNED PRIMARY KEY AUTO_INCREMENT COMMENT '编号',
  uri_name VARCHAR ( 10 ) the NOT  NULL the COMMENT ' URI overview ' ,
  is_have_superiors TINYINT  the NOT  NULL the COMMENT ' Is there a higher level ' ,
  superiors_id BIGINT UNSIGNED the NOT  NULL the COMMENT ' higher uri of ID ' ,
  URI VARCHAR ( 100 ) the NOT  NULL the COMMENT ' URI address ' 
) the COMMENT ' URI description table ' ;

Entity classes:

import lombok.Data;

import java.math.BigInteger;
@Data
public  class UriEntity {

    private BigInteger id;
    private String uriName;
    private Integer haveSuperiors;
    private BigInteger superiorsId;
    private String uri;
}

controller method: dao layer and service, and I do not mybatis files on, and to see the method name should know what it is

　　
　　// I set the global cross-domain 
　　@PostMapping ( "/ uris" )
     public ResponseDTO getUrisByPid (BigInteger superiorsId) {
        UriEntity uriById = uriService.getUriById(superiorsId);
        return new ResponseDTO("200", "success", uriById);
    }

html file: One should note that I do write the official api above dataFilter: ajaxDataFilter rollback is in there, but do not know why not, then Baidu saw async inside

<! DOCTYPE the HTML > 
< the HTML > 
 < the HEAD > 
  < TITLE > zTree the DEMO </ TITLE > 
  < Meta HTTP-equiv = "Content-type" Content = "text / HTML; charset = UTF-. 8" > 
  < Link the href = " CSS / zTreeStyle / zTreeStyle.css " the rel =" this stylesheet " /> 
  <-! were introduced into jquery, zTree two js files, which is a box excheck a must -> 
  < Script type =" text / JavaScript " the src =" JS / jQuery-3.4.1.js "></script>
  <script type="text/javascript" src="js/jquery.ztree.core.js"></script>
  <script type="text/javascript" src="js/jquery.ztree.excheck.js"></script>
 </head>
<BODY>
<div>
   <ul id="treeDemo" class="ztree"></ul>
   <input id="btn1" value="获取选中节点id" type="button"/>
</div>
<script>
    var zTreeObj;
    function ajaxDataFilter(treeId,parentNode,responseData) {
        return responseData.data;
    }
    var Setting = {
         // open the box, do not write on the other are the default 
        check: {
            enable: true
        },
        // name: "uriName" alias and similar 
        data: {
            key:{
                name:"uriName"
            },
            // open simple data, other default 
            // IDKey: "the above mentioned id", the PIDKEY: "superiorsId" is almost alias 
            simpleData: {
                enable: true,
                idKey: "id",
                pIdKey: "superiorsId",
                rootPId: 0
            }
        },
        // open asynchronous loading 
        async: {
            enable: true,
            url: "http://127.0.0.1:8081/uris",
            of the type: " POST " ,
             // Official api says with text to meet most needs, but also the line json 
            dataType: " text " ,
             // request parameters, here is the inquiry into his son by superiorsId uri under 
            autoparam: [ " = superiorsId ID " ],
             // filter data, because the return is ResponseDTO, which, in addition to use of other data code, msg less than what 
            // back ajaxDataFilter not add () and the parameter, which may be because the default is something it 
            dataFilter: ajaxDataFilter
        }
    };
    // initial node, a parent node must be provided, due to the asynchronous load acts only on +, and must have a parent + 
    var zNodes = [
        {"id":1,"superiorsId":0,"uriName":"删除操作",isParent:true}
    ];
    // construct a tree structure 
    $ (Document) .ready ( function () {
        zTreeObj = $.fn.zTree.init($("#treeDemo"),setting,zNodes)
    });
    // get selected after clicking the button data 
    $ ( " # btn1 " ) .on ( " the Click " , function () {
         var treeObj = $ .fn.zTree.getZTreeObj ( " treeDemo " ),   
        nodes=treeObj.getCheckedNodes(true),  
        v="";         
        for(var i=0;i<nodes.length;i++){    
            v+=nodes[i].uriName+",";           
            the console.log ( " node ID: " + Nodes [I] .id + " Node Name " + V);
        }
    })
</script>
</BODY>
</HTML>

Guess you like