The simple use of Jquery Easyui tree

The simple use of Jquery Easyui tree

jquery Easyui is the jquery Easyui is a set of jquery-based UI plug-ins, and the goal of jquery Easyui is to make it easier for web developers to create a feature-rich and beautiful UI interface. Developers do not need to write complex JavaScript, and do not need to have a deep understanding of CSS styles, developers need to understand only a few simple HTML tags.

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

In the project sometimes need page design, unfortunately the front-end staff is busy or other reasons, causing the code of the program ape had to do UI design, at this time can try to Easyui.

To get to the point, this article introduces the use of tree in Easyui in two parts:

First we need to refer to two files one is a theme style CSS file, one is Easyui core JS file (Easyui relies on jquery, if there is no reference, need to add a reference)

The UL plus class "Easyui-tree" that wants to generate the tree

1. Static data tree, structure determination, data is determined, data directly in HTML write dead

2. Dynamic Data tree, structure uncertainty, dynamic data, data needs to be obtained from the server side

1. static Data Tree

   Example of a static data tree code:

   <ulclass= "Easyui-tree"ID= "Nav_ul">                    <Li><ahref= "default.aspx">Information management</a> </Li>                    <Li><ahref= ' columnmanage.aspx '>Column Management</a></Li>                    <Li><ahref= "Contentmanage.aspx">Content Management</a></Li>                    <Li><ahref= "Recyclecontent.aspx">Content Recycle Bin</a></Li>                    <Li><span>Resource Management</span>                        <ul>                            <Li><ahref= "Resourcemanage-0.aspx">CSS Management</a></Li>                            <Li><ahref= "Resourcemanage-1.aspx">JS Management</a></Li>                        </ul>                        <Li><span>Template Management</span>                            <ul>                                <Li><ahref= "Resourcemanage-2.aspx">Content page Template Management</a></Li>                                <Li><ahref= "Resourcemanage-3.aspx">Section page template Management</a></Li>                            </ul>                        </Li>                    </Li>                </ul>

   The effect in the browser:, according to the style you want to implement, adjust the style, suggest adding the page inline style or inline style, do not directly modify the Easyui CSS file

3. Dynamic Data tree

   Dynamic Data tree Foreground HTML code example:

   <id= "tt"  class= "Easyui-tree"  data-options= "url : '/handlers/gettypesnodehandler.ashx ' "></ul>

   The URL represents the handler path for retrieving the tree's data from the server side.

The request parameter is "ID" and the value is the ID of the selection node after using fiddle debugging to discover each request

Server-side Handler Gettypesnodehandler.ashx Sample code:

1. 1 usingSystem;2 3 namespaceModels.formatmodel4 {5      Public classTreeModel6     {7         //Node ID8          Public intID {Get;Set; }9 Ten         //the text displayed by the node One          Public stringText {Get;Set; } A  -         //Open, closed -          Public stringState {Get{return "closed"; } } the     } -}

   TreeModel

   1 usingSystem;2 usingSystem.Collections.Generic;3 usingSystem.Linq;4 usingsystem.web;5 6 namespacewebapplication1.handlers7 {8     /// <summary>9     ///Summary description for GettypesnodehandlerTen     /// </summary> One      Public classGettypesnodehandler:ihttphandler A     { -  -          Public voidProcessRequest (HttpContext context) the         { -Context. Response.ContentType ="Text/plain"; -             intParentID =0; -             int. TryParse (context. request["ID"], outparentid); +list<models.category> types =NULL; -             Try +             { A                 //determine the value of the parent node at                 if(ParentID >0) -                 { -                     //To load a sub-level menu -Types =CommonNews.Helper.OperateContext.Current.LoadSecondaryCategory (parentid); -                 } -                 Else in                 { -                     //loading the top-level menu toTypes =CommonNews.Helper.OperateContext.Current.LoadTopCategory (); +                 } -                 //To determine if there is a value, the value is converted to the tree model and then converted to the JSON output, no value directly output an empty string the                 if(Types! =NULL) *                 { $                     //Convert to Tree modelPanax NotoginsengList<models.formatmodel.treemodel> tree = types. Select (t =NewModels.FormatModel.TreeModel () {id = T.categoryid, Text =T.categoryname}). ToList (); -                     //convert to JSON format data output the context. Response.Write (Common.ConverterHelper.ObjectToJson (tree)); +                 } A                 Else the                 { +Context. Response.Write (""); -                 } $             } $             Catch(Exception ex) -             { -                 NewCommon.loghelper (typeof(Gettypesnodehandler)). Error (ex); theContext. Response.Write ("Error"); -             }Wuyi         } the  -          Public BOOLisreusable Wu         { -             Get About             { $                 return true; -             } -         } -     } A}

   Gettypesnodehandler

The simple use of Jquery Easyui tree