BOS Logistics Project ——— Add tree structure (ztree) _ Structure

BOS Logistics Item 09 Add tree structure ztree a ztree Description two standard JSON construction Ztree 1 Interface Demo 2 page description 3 code three simple JSON construction Ztree 1 Interface Demo 2 page description 3 Code three POST request simple JSON data to construct Ztree 1 Interface Demo 2 page description 3 code four complete code five source files location six source download

BOS Logistics Project ——— Add tree structure (ztree) first, ztree description

Ztree is a multifunctional "tree plug-in" that relies on jQuery implementations. Excellent performance, flexible configuration, a combination of multiple functions is the biggest advantage of Ztree.

Address: Http://www.treejs.cn/v3/main.php#_zTreeInfo II, standard JSON construction Ztree 2.1 interface Demo

2.2 Page description

It's easy to add a tree structure, just call the Init method. But you need to add settings and JSON.

The settings for JSON are very much required to have name representative names, children child nodes. The control it is added to must be a

2.3 Code

<!--show Ztree effects: Using standard JSON data to construct ztree-->
<ul id= "ztree1" class= "Ztree" ></ul>
<script type= "Text/javascript" >
    $ (function () {
        var setting = {};
        Construct node Data
        var znodes = [
            {"Name": "Node 1", "Children": [
                {"Name": "Node 1--1"},
                {"Name": "Node 1--2"},
                {" Name ": Node 1--3"}, {"Name":
                "Node 1--4"},
                {"Name": "Node 1--5"}
            ]},
            {"Name": "Node 2"},
            {"Name": " Node 3 "}
        ];
        The calling API initializes
        the Ztree $.fn.ztree.init ($ ("#ztree1"), setting,znodes);
</script>

Three, simple JSON construction Ztree 3.1 interface Demo

3.2 Page description

Using simple JSON constructs ztree must open related properties

var setting2 = {
        data:{
            simpledata:{
                enable:true//Using simple JSON data to construct ztree node}}
    ;

When setting up JSON, the main thing is to specify the parent node by pId

var zNodes2 = [
    {"id]:" 1 ",  " name ":" Node 1 "},
    {" id ":" One "," pid ":" 1 "," Name ":" Node 1--1 "},
    {" id ":" "," pid " : "1", "Name": "Node 1--2"},

    {"id": "2",  "name": "Node 2"},
    {"id": "", "PId": "2", "Name": "Node 2--2"},

    {"id": "3", "Name": "Node 3"}
];

3.3 Code

<ul id= "Ztree2" class= "Ztree" ></ul>
<script type= "Text/javascript" >
    $ (function () {
        var setting2 = {
            data:{
                simpledata:{
                    enable:true//Using simple JSON data to construct ztree node}}
        ;
        var zNodes2 = [
            {"id": "1",  "name": "Node 1"},
            {"id": "One", "PId": "1", "Name": "Node 1--1"},
            {"id": "12", " PId ":" 1 "," Name ":" Node 1--2 "},

            {" id ":" 2 ",  " name ":" Node 2 "},
            {" id ":" "," PId ":" 2 "," Name ":" Node 2--2 "},

            {"id": "3", "Name": "Node 3"}
        ];
        $.fn.ztree.init ($ ("#ztree2"), setting2,znodes2);
</script>

Three, POST request simple JSON data to construct Ztree 3.1 interface Demo

) 3.2 Page description

In fact, the JSON is not written dead, and is retrieved by requesting the backend. When you add, click, open the TAB 3.3 code

<ul id= "ztree3" class= "Ztree" ></ul> <script type= "Text/javascript" > $ (function () {var setting
           S3 = {data:{simpledata:{enable:true}},
                   callback:{//Ztree node to bind the Click event Onclick:function (Event,treeid,treenode) { Page This property is not empty to open the panel if (treenode.page!= undefined) {var e = $ ("#mytabs"). Tabs ("
                       Exists ", treenode.name);
                       if (e) {$ ("#mytabs"). Tabs ("select", Treenode.name);
                               }else{$ ("#mytabs"). Tabs ("Add", {title:treeNode.name, Closable:true, Content: ' <iframe frameborder= "0" height= "100%" width
                       = "100%" src= "' +treenode.page+ '" "></iframe>"});
             }      }
               }
           }
       }; Send an AJAX request for the Ajax method provided by the JSON data//jquery: Ajax, Post, get, load, Getjson, getscript var url = "${pagecontext.reque
        St.contextpath}/json/menu.json ";
        $.post (url,function (data) {$.fn.ztree.init ($ ("#ztree3"), Settings3,data);
    }, ' json ');
}); </script>

Four, complete code

<%--Created by the IntelliJ idea. user:qiwenming DATE:17/12/10 Time: PM 6:25 To change this template use File | Settings |
File Templates. --%> <%@ page contenttype= "Text/html;charset=utf-8" language= "java"%> Five, source file location
https://github.com/wimingxxx/bos-parent/blob/master/bos-web/src/main/webapp/easyui/04-ztree.jsp vi, source download

Https://github.com/wimingxxx/bos-parent