JQuery Ztree Load Tree menu feature _jquery

Because the project needs to design a tree-shaped menu function, so Baidu find relevant information, found that a lot of information ztree, feel pretty good, and Ztree official also has API documentation, introduced very detailed, after a churn, finally to get out, so then write down, It is also considered as a summary of learning Ztree.

Ztree's introduction:

1, Ztree is the use of JQuery's core code, to achieve a complete set of most common functions of the tree plug-in

2, Ztree v3.0 the core code according to the function of the segmentation, unwanted code can not be loaded

3, the use of delayed loading technology, tens of thousands of nodes easy to load, even under the IE6 can basically do a second kill

4, compatible with IE, FireFox, Chrome, Opera, Safari and other browsers

5. Support JSON Data

6. Support Static and Ajax load node data asynchronously

7, support any change of skin/Custom icon (depending on CSS)

8, support extremely flexible checkbox or radio selection function

9, provide a variety of event response callback

10, flexible editing (Add/delete/change/check) function, can drag and drop nodes, but also multiple nodes drag yo

11. Multiple tree instances can be generated in one page at the same time

Introduction to the core functions and properties:

Core:ztree (setting, [Ztreenodes])

This function takes a JSON-formatted data object setting and a JSON-formatted data object Ztreenodes to create a tree.

Core parameters:setting

Ztree parameter configuration is done here, simply: The tree's style, events, access paths, etc. are configured here

var setting = { 
  showline:true, 
  checkable:true 
 };

Because there are too many parameters, the specific parameters are described in Ztreeapi

Core parameters:ztreenodes

Ztree's collection of all node data, using a data structure composed of JSON objects, simply: Here you save all the information for the tree using the JSON format

1, ztree official website: Http://www.ztree.me/v3/main.php#_zTreeInfo

In the official website can download to Ztree source code, instance and API, in which the author PDF API writes very detailed

The method of obtaining the node data of Ztree is divided into static (directly defined) and dynamic (background database loading).

Specific configuration steps:

The first step --Introduction of relevant documents

<link rel= "stylesheet" href= "Ztree/css/ztreestyle/ztreestyle.css" type= "Text/css" >
<script type= "text /javascript "src=" js/jquery/jquery-1.9.1.min.js "></script> <script type=" Text/javascript "src="
Ztree/js/jquery.ztree.core-3.5.min.js "></script>
<script type=" Text/javascript "src=" ztree/js/ Jquery.ztree.excheck-3.5.min.js "></script>

Note:

1), the first (ZTREESTYLE.CSS) is a ztree style CSS file, introduced this, in order to present a tree-shaped structure style,

2, the second (jquery-1.9.1.min.js) is a jquery file, because to use,

3), the third (jquery.ztree.core-3.5.min.js) is the core of Ztree JS file, this is necessary,

4, the last (js/jquery.ztree.excheck-3.5.min.js) is to expand the file, mainly for the Radio box and check box function, because the use of the check box, so also want to introduce.

The second step --related configuration (detailed configuration, please go to the official website reference detailed API documentation)

var Ztree;
var setting = {
 view: {
  dblclickexpand:false,//whether the identity of the parent node is automatically expanded when the node is clicked
  showline:true,//whether the connection
  between nodes is displayed fontcss:{' color ': ' Black ', ' font-weight ': ' bold '},//font style function
  selectedmulti:false//settings allow multiple nodes to be selected at
 the
 same time check:{
  //chkboxtype: {"Y": "PS", "N": "PS"},
  Chkstyle: "checkbox"//check box type
  enable:true//per node display CheckBox 
 },
 data: {
  simpledata: {//Simple data Mode
   enable:true,
   idkey: "id",
   pidkey: "PId",
   rootpid: ""
  }
 },
 callback: {
  beforeclick:function (Treeid, TreeNode) {
   Ztree = $. FN.ZTREE.GETZTREEOBJ ("User_tree");
   if (treenode.isparent) {
    ztree.expandnode (treeNode);//If the parent node, expand the node
   }else{
    Ztree.checknode ( TreeNode,!treenode.checked, True, True);/click Tick, click Uncheck again}}
   }
;

Step three --node data loading, rendering the tree-shaped structure

1, HTML page, directly put a UL can, the data will eventually automatically load into this UL element inside

<body>
 <div class= "Ztreedemobackground left" >
  <ul id= "User_tree" class= "Ztree" style= "border" : 1px solid #617775; overflow-y: scroll;height:500px; ></ul>
 </div>
</body>

2), JS in the loading of data

static mode (direct definition)

var znodes =[
 {id:1, pid:0, Name: "Test 1", Open:false},
 {id:11, pid:1, Name: "Test 1-1", open:true},
 {id:11 1, Pid:11, Name: "Test 1-1-1"},
 {id:112, pid:11, Name: "Test 1-1-2"},
 {id:12, pid:1, Name: "Test 1-2", open:true} ,
     ];
     
$ (document). Ready (function () {
 $.fn.ztree.init ($ ("#user_tree"), setting, znodes);
});
function Oncheck (e,treeid,treenode) {
 var treeobj=$.fn.ztree.getztreeobj ("User_tree"),
 nodes= Treeobj.getcheckednodes (True),
 v= "";
 for (Var i=0;i<nodes.length;i++) {
  v+=nodes[i].name + ",";
  alert (nodes[i].id); Get the value of the selected node
 }
}

Second, dynamic mode (from the background database loading)

/**
 * Page Initialization * * (
document). Ready (function () {
 onloadztree ();
});

/**
 * Load tree structure data *
/function Onloadztree () {
 var treenodes;
 $.ajax {
  async:false,//whether or not
  to use cache
  type: ' Post ',//Request mode: Post
  dataType: ' json ',/ /Data transfer format: JSON
  url:$ (' #ctx '). Val () + "Sendnoticemsgservlet?action=loadusertree",//Requested action path
  error: function () {
   //Request Failure Handler
   alert (' Pro, request failed! ');
  },
  success:function (data) {
//  console.log (data);
   After the request succeeds, the handler function
   TreeNodes = data;//The simple JSON format encapsulated in the background to the TreeNodes
  }
 });
 
 var t = $ ("#user_tree");
 t = $.fn.ztree.init (t, setting, TreeNodes);
}

Java Background load Data code:

1, define tree's Vo class, this also can not be defined, because I want to use other operations, to facilitate some

/**
 * Ztree tree structure object VO class
 * 
 * @author Administrator */Public
class Treevo {
 private String id;//Node ID
 private String pid;//parent node PId I must capitalize
 private string name;//node name
 private String open = "false";/ Whether to expand the tree node, default does not expand public

 String getId () {return
  ID;
 }

 public void SetId (String id) {
  this.id = ID;
 }

 Public String Getpid () {return
  pId;
 }

 public void Setpid (String pId) {
  this.pid = pid;
 }

 Public String GetName () {return
  name;
 }

 public void SetName (String name) {
  this.name = name;
 }

 Public String Getopen () {return
  open;
 }

 public void Setopen (String open) {
  this.open = open;
 }

2, query the database, and the structure of the SQL field also if Id,pid,name,open (optional) This format (note: PId in the middle of I must be uppercase), and then encapsulate the results into the Treevo class.

/**
  * Load tree structure Data
  * @param request
  * @param response
  * @throws IOException
 /public void Loadusertree (HttpServletRequest request, httpservletresponse response) throws ioexception{Weixinuserservice
  Weixinuserservice = new Weixinuserserviceimpl ();
  list<treevo> user_tree_list = Weixinuserservice.getusertreelist ();
  String Treenodesjson = Jsonarray.fromobject (user_tree_list). ToString ()//Convert list List to JSON format return
  
  printwriter out = Response.getwriter ();
  Use the JSON plug-in to convert array to JSON format 
  out.print (Treenodesjson);
  
  Release Resource
  out.close ();
 }

Here is completed the whole operation, eh, writing is not good, the organization language naturally not how, everybody forgive! Learn together and grow together!