Asp.net code deployment and server-side data acquisition example

I am going to write a ztree series tutorial based on asp.net, hoping to stick to it.

This tutorial is based on a national data file named city. xml. You can download it here.

1. Introduction to Ztree

 

ZTree is a multi-functional "tree plug-in" implemented by jQuery ". ZTree features superior performance, flexible configuration, and a combination of multiple functions.

ZTree is an open-source free software (MIT license ). If you are interested in zTree or are willing to fund the continued development of zTree, you can donate.

ZTree v3.0 separates the core code by function, and does not need to load unnecessary code.

Using the delayed loading technology, tens of thousands of nodes can be easily loaded, even in IE6, the second kill can be basically achieved

Compatible with IE, FireFox, Chrome, Opera, Safari, and other browsers

JSON data is supported.

Supports static and Ajax asynchronous loading of node data

Supports any skin replacement/custom icons (depending on css)

Supports extremely flexible checkbox or radio selection

Multiple event response callbacks

Flexible editing (addition, deletion, modification, and query) functions. You can drag and drop nodes at will or drag multiple nodes.

Multiple Tree instances can be generated simultaneously on one page.

Simple parameter configuration for flexible and variable functions

2. Deployment instructions

We copy the ztree code to your project based on the habit of code folders.

I usually do this:

BusinessJs: logic js code

The test file is under the root.

 

Note:

1. The ztreetype is used by the user. Therefore, ztreestyle.css and img are placed under a directory of the same level. Otherwise, you need to modify the image path of css.

2. Completely reference all js of ztree and reference it as needed. Basically, the tree functions are in the core:

Core Package

 

Excheck extension

 

Exedit extension

 

Exhide extension

 

3. Actual project code:

Reference jquery and ztree core js code and style:

The code is as follows:

Copy code

< Head > < Meta   Http-equiv = "Content-Type"   Content = "Text/html; charset = utf-8" />     < Title > Test </ Title >     < Link   Href = "Js/Ztree/zTreeStyle/zTreeStyle.css"   Rel = "Stylesheet"   /> </ Head > < Body >     < Ul   Id = "TreeDemo"   Class = "Ztree" > </ Ul >     < Script   Src = Js/jquery-1.9.1.js" > </ Script >     < Script   Src = "Js/Ztree/js/jquery. ztree. Core-3.5.js" > </ Script >     < Script   Src = "BusinessJs/TestJson. js" > </ Script > </ Body >

The logic js code TestJson. js implements the json string returned by the ashx on the ajax request server, and calls the ztree method for binding.

 

The code is as follows:

Copy code

Var   AjaxUrl = "Service/Cityhandler. ashx" ;             Var   Setting = {};     $ (Document). ready ( Function (){     GetCity ();       }); // Obtain Test type statistics Function   GetCity (){     $. Ajax ({         Type: "Post" ,         DataType: "Json" , Traditional: True ,         Data: {metadata: "City"   },         Url: AjaxUrl,         Async: False , // Synchronous execution         Success: Function   (Data, textStatus ){             If   (Data! = Null ){                                    $. Fn. zTree. init ($ ( "# TreeDemo" ), Setting, data );             }         },         Complete: Function   (XMLHttpRequest, textStatus ){},         Error: Function   (E ){                            Alert ( "An error occurred while obtaining the test type statistics. Please refresh the page and reload it! " );         }     }); } $. Fn. zTree. init ($ ("# treeDemo"), setting, data); is the data binding method provided by Ztree.

1. Description of setting configuration
Common use, no required parameters

For details about Display, refer to the configuration information in setting. view in the API documentation.

For changes to attributes such as name, children, and title, see the configuration information in setting. data. key in the API documentation.

2. Description of treeNode node data
Standard JSON data needs to be nested to indicate the parent-child inclusion relationship of the node

For example:

The code is as follows:	Copy code
Var nodes = [ {Name: "parent node 1", children :[ {Name: "subnode 1 "}, {Name: "subnode 2 "} ]} ];

Default expanded node. Set the treeNode. open attribute.

Parent node without child nodes. Set the treeNode. isParent attribute.

For details about other attributes, see "detailed description of treeNode node data" in the API documentation"

The server ashx is responsible for organizing json strings.