The use of Jquery-ztree

• "section Functions and properties Introduction"

• Core: Ztree (setting, [Ztreenodes])

  This function takes a JSON-formatted data object setting and a JSON-formatted data object Ztreenodes to build the Tree.

• Core parameter: Setting

  Ztree parameter configuration is done here, simply say: Tree style, events, access path, etc. are configured here

  setting Example:

  JS Code
  1. var setting = {
  2. ShowLine: True,
  3. Checkable: True
  4. };

  Core parameter: Ztreenodes

  Ztree is a collection of all node data, using a data structure composed of JSON objects, which simply says: This saves all of the tree's information in JSON format.

  The format of the ztreenodes is divided into two types: nested in JSON format to reflect parent-child relationships and array simple formatting

  ① Standard Ztreenodes Examples with parent-child relationships:

  JS Code
  2. var ztreenodes = [
  4. {"id": 1, "name":"Test1", "nodes": [
  6. {"id": one, "name":"test11", "nodes": [
  8. {"id": 111, "name":"test111"}
  10. ]},
  12. {"id": " Name": "test12"}
  14. ]},
  16. ......
  18. ];

  ② Ztreenodes Example of a simple Array format (Issimpledata) with a parent-child relationship:

  JS Code
  2. var treenodes = [
  4. {"id": 1, "PId": 0, "name":"Test1"},
  6. {"id": One, "pId": 1, "name":"test11"},
  8. {"id": " pId": 1, "name":"test12"},
  10. {"id": 111, "PId": One, "name":"test111"},
  12. ......
  14. ];

  ① in the page reference Ztree JS and CSS:

  HTML code
  2. <!--ztree tree-shaped plug-in
  4. <link rel= "stylesheet" href= "<%=root%>/web/common/css/ztreestyle/ztreestyle.css" type="Text/css">
  6. <!--<link rel= "stylesheet" href= "<%=root%>/web/common/css/ztreestyle/ztreeicons.css" type= "Text/css" >
  8. <script type="Text/javascript" src= "<%=root%>/web/common/js/jquery-ztree-2.5.min.js "></script>

  ② defining setting and Ztreenodes in the script script

  Java code
  2. var setting = {
  4. Issimpledata: True, //data is in simple Array format, default false
  6. Treenodekey: "id", //In issimpledata format, current Node ID property
  8. Treenodeparentkey: "PId", //In issimpledata format, the parent Node ID property of the current node
  10. ShowLine: True, //whether the connection between nodes is displayed
  12. Checkable: true //CheckBox is displayed on each node
  14. };
  18. var treenodes = [
  20. {"id":1, "pId":0, "name":"Test1"},
  22. {"id": one, "pId":1, "name":"test11"},
  24. {"id": " pId":1, "name":"test12"},
  26. {"id":111, "PId": one, "name":"test111"},
  28. ];

  ③ the tree structure when entering the page:

  JS Code
  1. var Ztree;
  JS Code
  1. $ (function () {
  2. Ztree = $ ("#tree"). Ztree (setting, treenodes);
  3. });

  ④ Last View effect:

  "Instance two" (Get the simple format JSON data from the background)

  ① background code encapsulates simple format JSON data:

  Java code
  2. Public void Dogetprivilegetree () throws ioexception{
  4. String S1 = "{id:1, pid:0, name:\" test1\ ", open:true}";
  6. String s2 = "{id:2, pid:1, name:\" test2\ ", open:true}";
  8. String s3 = "{id:3, pid:1, name:\" test3\ ", open:true}";
  10. String S4 = "{id:4, Pid:2, name:\" test4\ ", open:true}";
  12. list<string> lsttree = new arraylist<string> ();
  14. Lsttree.add (S1);
  16. Lsttree.add (S2);
  18. Lsttree.add (S3);
  20. Lsttree.add (S4);
  22. //Use JSON plugin to convert array to JSON format
  24. Response.getwriter (). Print (Jsonarray.fromobject (lsttree). toString ());
  26. }

  ② page using Ajax to get Ztreenodes data regenerated into a tree

  JS Code
  2. var setting = {
  4. Issimpledata: True, //data is in simple Array format, default false
  6. Treenodekey: "id", //In issimpledata format, current Node ID property
  8. Treenodeparentkey: "PId", //In issimpledata format, the parent Node ID property of the current node
  10. ShowLine: True, //whether the connection between nodes is displayed
  12. Checkable: true //CheckBox is displayed on each node
  14. };
  18. var Ztree;
  20. var treenodes;
  24. $ (function () {
  26. $.ajax ({
  28. Async: false,
  30. Cache:false,
  32. Type: ' POST ',
  34. DataType: "JSON",
  36. url:root+"/ospm/logininfo/dogetprivilegetree.action",//Requested action path
  38. Error: function () {//request failed handler
  40. Alert (' request failed ');
  42. },
  44. Success:function (data) { //request succeeded after processing.
  46. alert (data);
  48. TreeNodes = data; //Give TreeNodes a simple JSON format packaged in the background
  50. }
  52. });
  56. Ztree = $ ("#tree"). Ztree (setting, treenodes);
  58. });

  ③ Final Display effect

The use of Jquery-ztree