Asp.net+jquery+ztree Implement dynamic Binding Data example

First look at the effect of the picture:

1, the code used to get the JSON data:

The code is as follows	Copy Code
<%@ Page language= "C #" autoeventwireup= true "codebehind=" RegionData.aspx.cs "inherits=" at. Web.Ajax.RegionData "%>

Background code:

The code is as follows

Copy Code

Using at. Business.dal; Using at. Business.idao; Using Newtonsoft.json; Using System; Using System.Collections.Generic; Using System.Data; Using System.Linq; Using System.Web; Using System.Web.UI; Using System.Web.UI.WebControls; Namespace at. Web.ajax { public partial class RegionData:System.Web.UI.Page { Private At_system_idao Systemidao = new At_system_dal (); protected void Page_Load (object sender, EventArgs e) { Try { Get the method name of the foreground Ajax request String ajaxmethod = request["Ajaxmethod"]. ToString (); System.Reflection.MethodInfo method = this. GetType (). GetMethod (Ajaxmethod); if (method!= null) { Point to corresponding method by method name Method. Invoke (this, new object[] {}); } } catch (Exception) { Throw } Finally { Response.End (); } } <summary> To load the child nodes of the current node asynchronously </summary> public void Ansydata () { list<object> Lsnode = new list<object> (); Try { String parentid = request.params["id"]; DataTable dtregion = This.systemidao.GetRegionList (); DataView dv = new DataView (dtregion); Dv. RowFilter = "pregion_id = '" + parentid + "'"; Lsnode = GetList (DV); htm = htm& (Jsonconvert.serializeobject (Lsnode)); } catch (Exception) { Throw } } <summary> Determine if the current node still has child nodes </summary> <param name= "ParentID" > Parent node id</param> <returns>bool type </returns> public bool Isparenttrue (string parentid) { Try { DataTable dtregion = This.systemidao.GetRegionList (); DataView dv = new DataView (dtregion); Dv. RowFilter = "pregion_id = '" + parentid + "'"; Return DV. Count >= 1? True:false; } catch (Exception) { Throw } } <summary> Initialize first node load </summary> public void Firstansydata () { Try { DataTable dtregion = This.systemidao.GetRegionList (); DataView dv = new DataView (dtregion); Dv. RowFilter = "pregion_id = ' 0 '"; list<object> Lsnode = new list<object> (); Lsnode = GetList (DV); Using Newtonsoft.dll to convert to JSON format. htm = htm& (Jsonconvert.serializeobject (Lsnode)); } catch (Exception) { Throw } } <summary> Convert data form to ztree JSON data format </summary> <param name= "Table" ></param> <returns></returns> Public list<object> getlist (DataView table) { Try { list<object> Lsnode = new list<object> (); bool Isparent = true; foreach (DataRowView drv in table) { var parentid = string. IsNullOrEmpty (drv["pregion_id"). ToString ())? "0": drv["pregion_id"]. ToString (); if (Isparenttrue (drv["region_id"). ToString ())) { Isparent = true; } Else { Isparent = false; } var ztreedata = new { id = drv["region_id"], PId = string. IsNullOrEmpty (ParentID)? "0": ParentID, Name = drv["Region_name"], Isparent = Isparent }; Lsnode.add (Ztreedata); } return lsnode; } catch (Exception) { Throw } } } }

2, for the display of the Ztree Directory tree page code:

The code is as follows

Copy Code

<%@ Page language= "C #" autoeventwireup= true "codebehind=" WebForm1.aspx.cs "inherits=" at. Web.webform1 "%> <! DOCTYPE html> <meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/> <title>ztree Tree-shape Example </title> <link href= "Themes/styles/ztreestyle/ztreestyle.css" rel= "stylesheet"/> <script src= "Themes/scripts/jquery-1.8.2.min.js" type= "Text/javascript" ></script> <script src= "Themes/scripts/artdialog/artdialog.source.js" type= "Text/javascript" ></script> <script src= "Themes/scripts/artdialog/iframetools.source.js" type= "Text/javascript" ></script> <script src= "Themes/scripts/functionjs.js" type= "Text/javascript" ></script> <script type= "Text/javascript" > </script> <script src= "Themes/scripts/jquery.ztree.core-3.5.min.js" ></script> <script type= "Text/javascript" > var znodes; var Ztree; Setting settings for asynchronous loading var setting = { Async: { Enable:true,//means the asynchronous load takes effect URL: "Ajax/regiondata.aspx",//page accessed when loading asynchronously Autoparam: ["id"],//The parameter of the parent node property that is automatically committed at the time of loading Otherparam: ["Ajaxmethod", ' Ansydata '], parameters submitted upon request//ajax Type: ' Post ', DataType: ' JSON ' }, Checkable:true, Showicon:true, Showline:true,//ztree display cable Data: {//PID to identify parent-child node relationships Simpledata: { Enable:true } }, Expandspeed: "",//Set Ztree node expand, collapse animation speed, default to "Fast", "" means no animation Callback: {//callback function Onclick:ztreeonclick,/Click the mouse event Asyncsuccess:ztreeonasyncsuccess//Asynchronous Load Success Events } }; $ (document). Ready (function () { Initregion (); $.fn.ztree.init ($ ("#treeDemo"), setting, znodes); }); Initializing load Nodes function Initregion () { $.ajax ({ URL: ' ajax/regiondata.aspx ', Type: ' Post ', DataType: ' JSON ', Async:false, Data: {' Ajaxmethod ': ' Firstansydata '}, Success:function (data) { Znodes = data; } }); }; Gets the ID of the Ztree node when clicked, and values of value function Ztreeonclick (event, Treeid, TreeNode, Clickflag) { var treevalue = treenode.id + "," + treenode.name; Click to assign a value to a text box var Id = treenode.pid; var v = ""; if (Id = = ' ' | | Id = = Undefined | | Id = = null) { v = treenode.name + "-Parent section"; } else { v = treenode.name + "-sub-section"; } Top. role_form.get_region_id (Treenode.id, v); Double-click to close the pop-up box OpenClose (); Alert (v + "," + treenode.name); }; function Ztreeonasyncsuccess (event, Treeid, TreeNode, msg) { } </script> <body> <form id= "Form1" runat= "Server" > <ul id= "Treedemo" class= "Ztree" ></ul> </form> </body>

Description

1, after the completion of JS loading, call the server ASP.net method, generate data

2. Bound Data data