Easyui-Manipulating the Tree control

Effect:

HTML code:

• Using the template page

<asp:content id="Content1"Contentplaceholderid="ContentPlaceHolder1"runat="Server"> <div id="accordions" class="easyui-accordion"> <div title="All Users"data-options="iconcls: ' Icon-save ', Selected:true"style ="padding:0 0 0 10px;"> <ul id="Tree"></ul> </div> <div title="Password Operation"data-options="iconcls: ' Icon-reload '">Content2</div> <div title="Search Operations"data-options="iconcls: ' Icon-reload '">Content3</div> </div></asp:Content>

JavaScript code:

$ (function () {    $ ('#Tree'). Tree ({        "json/tree_ Node.ashx",        Datatype:json,        true,        True  ,        onclick:function (node) {            + node.id);        }    );})

ASHX code (generic handler):

usingSystem.Data;usingsystem.web;usingEasyui.dal;usingSystem.Text;namespaceeasyui.json{/// <summary>    ///Summary description of Tree_node/// </summary>     Public classTree_node:ihttphandler {DataSet ds=NewDataSet ();  Public voidProcessRequest (HttpContext context) {context. Response.ContentType="Text/plain"; DataTable DT=Selectdt (); stringJSON = gettreejsonbytable (DT,"ID","CategoryName","URL","ParentID"," +"); Context.            Response.Write (JSON); Context.        Response.End (); }        #regionGenerate a Easyui tree JSON structure based on a DataTableStringBuilder Result=NewStringBuilder (); StringBuilder SB=NewStringBuilder (); /// <summary>          ///generate a Easyui tree JSON structure based on a DataTable/// </summary>          /// <param name= "tabel" >Data Source</param>          /// <param name= "Idcol" >ID Column</param>          /// <param name= "Txtcol" >Text Column</param>          /// <param name= "url" >node URL</param>          /// <param name= "RelA" >Relationship Fields</param>          /// <param name= "PId" >Parent ID</param>          Private stringGettreejsonbytable (DataTable tabel,stringIdcol,stringTxtcol,stringUrlstringRelaObjectpId) {result. Append (sb.)            ToString ()); Sb.            Clear (); if(Tabel. Rows.Count >0) {sb. Append ("["); stringfiler =string. Format ("{0}= ' {1} '", RelA, pId); datarow[] Rows=tabel.                Select (filer); if(Rows. Length >0)                {                    foreach(DataRow rowinchrows) {sb. Append ("{\ "id\": \ ""+ Row[idcol] +"\ ", \" text\ ": \""+ Row[txtcol] +"\ ", \" attributes\ ": \""+ Row[url] +"\ ", \" state\ ": \" open\ ""); if(Tabel. Select (string. Format ("{0}= ' {1} '", RelA, Row[idcol]). Length >0) {sb. Append (", \ "children\":");                            Gettreejsonbytable (Tabel, Idcol, Txtcol, URL, RelA, Row[idcol]); Result. Append (sb.)                            ToString ()); Sb.                        Clear (); } result. Append (sb.)                        ToString ()); Sb.                        Clear (); Sb. Append ("},"); } SB= sb. Remove (sb.) Length-1,1); } sb. Append ("]"); Result. Append (sb.)                ToString ()); Sb.            Clear (); }            returnresult.        ToString (); }        #endregion        #regionCreate data/// <summary>        ///getting categorical data from a database/// </summary>        /// <returns></returns>        protected StaticDataTable Selectdt () {DataTable dt=NewSystem.Data.DataTable (); DT= Sqlhelper.executetable ("Select ID, CategoryName, Url, parentid from Tb_apcategory", System.Data.CommandType.Text); returnDT; }        #endregion         Public BOOLisreusable {Get            {                return false; }        }    }}

Format data as JSON data (core code, intercepted from above):

#regionGenerate a Easyui tree JSON structure based on a DataTableStringBuilder Result=NewStringBuilder (); StringBuilder SB=NewStringBuilder ();/// <summary>  ///generate a Easyui tree JSON structure based on a DataTable/// </summary>  /// <param name= "tabel" >Data Source</param>  /// <param name= "Idcol" >ID Column</param>  /// <param name= "Txtcol" >Text Column</param>  /// <param name= "url" >node URL</param>  /// <param name= "RelA" >Relationship Fields</param>  /// <param name= "PId" >Parent ID</param>  Private stringGettreejsonbytable (DataTable tabel,stringIdcol,stringTxtcol,stringUrlstringRelaObjectpId) {result. Append (sb.)    ToString ()); Sb.    Clear (); if(Tabel. Rows.Count >0) {sb. Append ("["); stringfiler =string. Format ("{0}= ' {1} '", RelA, pId); datarow[] Rows=tabel.        Select (filer); if(Rows. Length >0)        {            foreach(DataRow rowinchrows) {sb. Append ("{\ "id\": \ ""+ Row[idcol] +"\ ", \" text\ ": \""+ Row[txtcol] +"\ ", \" attributes\ ": \""+ Row[url] +"\ ", \" state\ ": \" open\ ""); if(Tabel. Select (string. Format ("{0}= ' {1} '", RelA, Row[idcol]). Length >0) {sb. Append (", \ "children\":");                    Gettreejsonbytable (Tabel, Idcol, Txtcol, URL, RelA, Row[idcol]); Result. Append (sb.)                    ToString ()); Sb.                Clear (); } result. Append (sb.)                ToString ()); Sb.                Clear (); Sb. Append ("},"); } SB= sb. Remove (sb.) Length-1,1); } sb. Append ("]"); Result. Append (sb.)        ToString ()); Sb.    Clear (); }    returnresult. ToString ();}#endregion

View Code

Complete.

Easyui-Manipulating the Tree control