AjaxPro.NET框架生成高效率的Tree的步骤
(一). 说明
用Tree显示菜单及物品列表(从服务端获取数据)比较方便,当前显示Tree 主要有两种方式:
1. 在Tree初始化时将数据全部一次性从服务端获取,获取完数据后页面展开或收缩时就不再需要获取数据,
这样,获取完数据使用时效率比较高, 但当树节点很多时, 在每次初始化时会有较大的延迟.
2. 初始化时只加载展开的节点, 当用户需要查看某个节点下的数据时, 再去取数据, 这样, 初始化时延迟会相
对减少, 但每次单击节点时要获取数据, 页面每次都要刷新, 所以也会产生延迟.
此事例用Ajax实现第二种方式, 每次只动态加载要展开的节点数据(闭合节点不展开时,则不获取其子节点的
数据), 另外加载节点时页面不会刷新.
(二). 运行示例图
(三). AjaxPro.NET简介
首先对AjaxPro.NET作一下介绍, AjaxPro.NET是一个优秀的Ajax框架, 在实际应用中只要添加其DLL
引用并进行简单的配置,即可以非常方便的在客户端直接调用服务端方法, 来获取Tree节点.
(四).使用AjaxPro.NET预配置
1. 添加 AjaxPro.dll 文件的引用(示例代码中已经包含,直接COPY过来使用即可).
2. 在Web.config文件中添加以下配置,
1<httpHandlers>
2<addverb="POST,GET"path="ajaxpro/*.ashx"type="AjaxPro.AjaxHandlerFactory,AjaxPro"/>
3 </httpHandlers>
2<addverb="POST,GET"path="ajaxpro/*.ashx"type="AjaxPro.AjaxHandlerFactory,AjaxPro"/>
3 </httpHandlers>
3. 在要使用AjaxPro.NET框架的页面 *.aspx.cs 的 Page_Load事件中加如下代码:
AjaxPro.Utility.RegisterTypeForAjax(typeof(_Default));
4. 经过以上三步骤后, 只要在后台服务端的方法前面增加属性[AjaxMethod]后:
1[AjaxMethod()]//or[AjaxPro.AjaxMethod]
2publicArrayListGetSearchItems(stringstrQuery)
3{
4//生成数据源
5ArrayListitems=newArrayList();
6items.Add("King");
7items.Add("Rose");
8returnitems;
9}
10
2publicArrayListGetSearchItems(stringstrQuery)
3{
4//生成数据源
5ArrayListitems=newArrayList();
6items.Add("King");
7items.Add("Rose");
8returnitems;
9}
10
就可以在客户端直接使用服务端方法, 非常方便, 客户端调用后台代码如下:
varreturnValue=后台代码类名.GetSearchItems(参数);(五). 代码
1. 页面 Tree.aspx 代码:
1<%@PageLanguage="C#"AutoEventWireup="true"CodeFile="Tree.aspx.cs"Inherits="_Default"%>
2
3<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
4
5<htmlxmlns="http://www.w3.org/1999/xhtml">
6<headrunat="server">
7<title>AjaxEfficientTree</title>
8<linktype="text/css"href="css/tree.css"rel="stylesheet">
9</head>
10<body>
11<formid="form1"runat="server">
12<div>
13<asp:PanelID="Panel1"runat="server"Height="424px"Width="251px">
14<divid="CategoryTree"class="TreeMenu"></div>
15</asp:Panel>
16<scriptlanguage="jscript">
17vartree=document.getElementById("CategoryTree");
18varroot=document.createElement("li");
19root.id="li_0";
20tree.appendChild(root);
21ExpandSubCategory(0);
22functionExpandSubCategory(categoryID)
23{
24varliFather=document.getElementById("li_"+categoryID);
25if(liFather.getElementsByTagName("li").length>0)
26{
27ChangeStatus(categoryID);
28return;
29}
30liFather.className="Opened";
31SwitchNode(categoryID,true);
32
33//仅获取当前节点的子Nodes
34_Default.GetSubCategory(categoryID,GetSubCategory_callback);
35}
36functionSwitchNode(CategoryID,show)
37{
38varli_father=document.getElementById("li_"+CategoryID);
39if(show)
40{
41varul=document.createElement("ul");
42ul.id="ul_note_"+CategoryID;
43
44varnote=document.createElement("li");
45note.className="Child";
46
47varimg=document.createElement("img");
48img.className="s";
49img.src="css/s.gif";
50
51vara=document.createElement("a");
52a.href="javascript:void(0);";
53a.innerHTML="Pleasewaiting
";
54
55note.appendChild(img);
56note.appendChild(a);
57ul.appendChild(note);
58li_father.appendChild(ul);
59}
60else
61{
62varul=document.getElementById("ul_note_"+CategoryID);
63if(ul)
64{
65li_father.removeChild(ul);
66}
67}
68}
69functionGetSubCategory_callback(response)
70{
71vardt=response.value.Tables[0];
72if(dt.Rows.length>0)
73{
74variCategoryID=dt.Rows[0].FatherID;
75}
76varli_father=document.getElementById("li_"+iCategoryID);
77varul=document.createElement("ul");
78for(vari=0;i<dt.Rows.length;i++)
79{
80if(dt.Rows[i].IsChild==1)
81{
82varli=document.createElement("li");
83li.className="Child";
84li.id="li_"+dt.Rows[i].CategoryID;
85varimg=document.createElement("img");
86img.id=dt.Rows[i].CategoryID;
87img.className="s";
88img.src="css/s.gif";
89vara=document.createElement("a");
90a.href="javascript:OpenDocument('"+dt.Rows[i].CategoryID+"');";
91a.innerHTML=dt.Rows[i].CategoryName;
92}
93else
94{
95varli=document.createElement("li");
96li.className="Closed";
97li.id="li_"+dt.Rows[i].CategoryID;
98varimg=document.createElement("img");
99img.id=dt.Rows[i].CategoryID;
100img.className="s";
101img.src="css/s.gif";
102img.onclick=function(){ExpandSubCategory(this.id);};
103img.alt="Expand/collapse";
104vara=document.createElement("a");
105a.href="javascript:ExpandSubCategory('"+dt.Rows[i].CategoryID+"');";
106a.innerHTML=dt.Rows[i].CategoryName;
107}
108li.appendChild(img);
109li.appendChild(a);
110ul.appendChild(li);
111}
112li_father.appendChild(ul);
113SwitchNode(iCategoryID,false);
114}
115
116//单击叶节点时,异步从服务端获取单个节点的数据.
117functionOpenDocument(CategoryID)
118{
119_Default.GetNameByCategoryID(CategoryID,GetNameByCategoryID_callback);
120}
121
122functionGetNameByCategoryID_callback(response)
123{
124alert(response.value);
125}
126
127functionChangeStatus(CategoryID)
128{
129varli_father=document.getElementById("li_"+CategoryID);
130if(li_father.className=="Closed")
131{
132li_father.className="Opened";
133}
134else
135{
136li_father.className="Closed";
137}
138}
139</script>
140</div>
141</form>
142</body>
143</html>
2
3<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
4
5<htmlxmlns="http://www.w3.org/1999/xhtml">
6<headrunat="server">
7<title>AjaxEfficientTree</title>
8<linktype="text/css"href="css/tree.css"rel="stylesheet">
9</head>
10<body>
11<formid="form1"runat="server">
12<div>
13<asp:PanelID="Panel1"runat="server"Height="424px"Width="251px">
14<divid="CategoryTree"class="TreeMenu"></div>
15</asp:Panel>
16<scriptlanguage="jscript">
17vartree=document.getElementById("CategoryTree");
18varroot=document.createElement("li");
19root.id="li_0";
20tree.appendChild(root);
21ExpandSubCategory(0);
22functionExpandSubCategory(categoryID)
23{
24varliFather=document.getElementById("li_"+categoryID);
25if(liFather.getElementsByTagName("li").length>0)
26{
27ChangeStatus(categoryID);
28return;
29}
30liFather.className="Opened";
31SwitchNode(categoryID,true);
32
33//仅获取当前节点的子Nodes
34_Default.GetSubCategory(categoryID,GetSubCategory_callback);
35}
36functionSwitchNode(CategoryID,show)
37{
38varli_father=document.getElementById("li_"+CategoryID);
39if(show)
40{
41varul=document.createElement("ul");
42ul.id="ul_note_"+CategoryID;
43
44varnote=document.createElement("li");
45note.className="Child";
46
47varimg=document.createElement("img");
48img.className="s";
49img.src="css/s.gif";
50
51vara=document.createElement("a");
52a.href="javascript:void(0);";
53a.innerHTML="Pleasewaiting
";54
55note.appendChild(img);
56note.appendChild(a);
57ul.appendChild(note);
58li_father.appendChild(ul);
59}
60else
61{
62varul=document.getElementById("ul_note_"+CategoryID);
63if(ul)
64{
65li_father.removeChild(ul);
66}
67}
68}
69functionGetSubCategory_callback(response)
70{
71vardt=response.value.Tables[0];
72if(dt.Rows.length>0)
73{
74variCategoryID=dt.Rows[0].FatherID;
75}
76varli_father=document.getElementById("li_"+iCategoryID);
77varul=document.createElement("ul");
78for(vari=0;i<dt.Rows.length;i++)
79{
80if(dt.Rows[i].IsChild==1)
81{
82varli=document.createElement("li");
83li.className="Child";
84li.id="li_"+dt.Rows[i].CategoryID;
85varimg=document.createElement("img");
86img.id=dt.Rows[i].CategoryID;
87img.className="s";
88img.src="css/s.gif";
89vara=document.createElement("a");
90a.href="javascript:OpenDocument('"+dt.Rows[i].CategoryID+"');";
91a.innerHTML=dt.Rows[i].CategoryName;
92}
93else
94{
95varli=document.createElement("li");
96li.className="Closed";
97li.id="li_"+dt.Rows[i].CategoryID;
98varimg=document.createElement("img");
99img.id=dt.Rows[i].CategoryID;
100img.className="s";
101img.src="css/s.gif";
102img.onclick=function(){ExpandSubCategory(this.id);};
103img.alt="Expand/collapse";
104vara=document.createElement("a");
105a.href="javascript:ExpandSubCategory('"+dt.Rows[i].CategoryID+"');";
106a.innerHTML=dt.Rows[i].CategoryName;
107}
108li.appendChild(img);
109li.appendChild(a);
110ul.appendChild(li);
111}
112li_father.appendChild(ul);
113SwitchNode(iCategoryID,false);
114}
115
116//单击叶节点时,异步从服务端获取单个节点的数据.
117functionOpenDocument(CategoryID)
118{
119_Default.GetNameByCategoryID(CategoryID,GetNameByCategoryID_callback);
120}
121
122functionGetNameByCategoryID_callback(response)
123{
124alert(response.value);
125}
126
127functionChangeStatus(CategoryID)
128{
129varli_father=document.getElementById("li_"+CategoryID);
130if(li_father.className=="Closed")
131{
132li_father.className="Opened";
133}
134else
135{
136li_father.className="Closed";
137}
138}
139</script>
140</div>
141</form>
142</body>
143</html>
2. 页面后台文件 Tree.aspx.cs 代码:
1usingSystem;
2usingSystem.Data;
3usingSystem.Configuration;
4usingSystem.Web;
5usingSystem.Web.Security;
6usingSystem.Web.UI;
7usingSystem.Web.UI.WebControls;
8usingSystem.Web.UI.WebControls.WebParts;
9usingSystem.Web.UI.HtmlControls;
10
11publicpartialclass_Default:System.Web.UI.Page
12{
13//此对象用于存放所有的节点数
14publicstaticDataSetdsAllNodes=newDataSet();
15
16protectedvoidPage_Load(objectsender,EventArgse)
17
2usingSystem.Data;
3usingSystem.Configuration;
4usingSystem.Web;
5usingSystem.Web.Security;
6usingSystem.Web.UI;
7usingSystem.Web.UI.WebControls;
8usingSystem.Web.UI.WebControls.WebParts;
9usingSystem.Web.UI.HtmlControls;
10
11publicpartialclass_Default:System.Web.UI.Page
12{
13//此对象用于存放所有的节点数
14publicstaticDataSetdsAllNodes=newDataSet();
15
16protectedvoidPage_Load(objectsender,EventArgse)
17
本文地址：http://www.45fan.com/dnjc/68981.html