Simple use of Jquery easyui Tree, jqueryeasyui

Simple use of Jquery easyui Tree, jqueryeasyui

Simple use of Jquery easyui Tree

Jquery easyui is a set of jQuery-based UI plug-ins. The goal of jQuery EasyUI is to help web developers easily create a rich and beautiful UI interface. Developers do not need to write complex javascript or have a deep understanding of css styles. Developers only need to know some simple html tags.

Jquery easyui Official Website: http://jeasyui.com/, Chinese site: http://www.jeasyui.net/,jquery easyui: http://jeasyui.com/download/index.php

Sometimes page design is required in the Project. Unfortunately, the front-end staff of the artist is busy or for other reasons, causing the program that knocks on the code to have to perform uidesign. At this time, you can try easyui.

Go to the topic. This article introduces the use of trees in easyui in two parts:

First, we need to reference two files: one is the theme style css file and the other is the easyui core js file (easyui depends on jquery. If there is no reference, add reference)

Add class "easyui-tree" to the ul of the tree to be generated"

 

1. Static Data Tree, structure confirmation, and data determination. Data is directly written to the dead end in html.

2. Dynamic Data Tree, uncertain structure, dynamic data, data needs to be obtained from the server

 

After debugging with Fiddle, you can find that the request parameter is "id" and the value is the id of the selected node.

 

Sample Code of the server processing program getTypesNodeHandler. ashx:

Remove the current selection item of the tree. When a node of the selected tree is selected, the corresponding node will have one more class "tree-node-selected" style, remove this style to remove the selected tree option.

$(".tree-node-selected").removeClass("tree-node-selected");

 

1 using System; 2 3 namespace Models. formatModel 4 {5 public class TreeModel 6 {7 // node id 8 public int id {get; set;} 9 10 // The text displayed on the node 11 public string text {get; set;} 12 13 // open, closed14 public string state {get {return "closed" ;}} 15} 16}TreeModel 1 using System; 2 using System. collections. generic; 3 using System. linq; 4 using System. web; 5 6 namespace WebApplication1.Handlers 7 {8 /// <summary> 9 /// Summary description for getTypesNodeHandler10 /// </summary> 11 public class getTypesNodeHandler: IHttpHandler12 {13 14 public void ProcessRequest (HttpContext context) 15 {16 context. response. contentType = "text/plain"; 17 int parentId = 0; 18 int. tryParse (context. request ["id"], out parentId); 19 List <Models. category> types = null; 20 try21 {22 // judge the value of the parent node 23 if (parentId> 0) 24 {25 // load the child menu 26 types = CommonNews. helper. operateContext. current. loadSecondaryCategory (parentId); 27} 28 else29 {30 // load top-level menu 31 types = CommonNews. helper. operateContext. current. loadTopCategory (); 32} 33 // determine whether a value exists. if a value exists, convert it to the tree model and then to the json output. if no value exists, directly output the Null String 34 if (types! = Null) 35 {36 // convert to tree model 37 List <Models. formatModel. treeModel> tree = types. select (t => new Models. formatModel. treeModel () {id = t. categoryId, text = t. categoryName }). toList (); 38 // convert to json format and output 39 context. response. write (Common. converterHelper. objectToJson (tree); 40} 41 else42 {43 context. response. write (""); 44} 45} 46 catch (Exception ex) 47 {48 new Common. logHelper (typeof (getTypesNodeHandler )). error (ex); 49 context. response. write ("error"); 50} 51} 52 53 public bool IsReusable54 {55 get56 {57 return true; 58} 59} 60} 61}GetTypesNodeHandler