[Ext.Net]TreePanel 异步加载数据

异步加载数据指的是页面加载的时候只显示根目录，点击根目录再去加载其子目录。

下面就来介绍下这种异步加载的树结构要怎么实现

现将例子的图

QQ图片20131225134353.jpg
(12.1 KB, 下载次数: 0)

下载附件  保存到相册

昨天 13:43 上传

• 前台画面中要布局下树TreePanel ，在异步加载中，这个树一定要有根节点(root)，而且这个根节点可以隐藏，但不可以消失，如果没有的话，浏览页面的时候就会报错。
  1. <ext:TreePanel ID ="tpl_left" runat ="server" Border ="true" RootVisible="false" AutoScroll="true" ContainerScroll="true" >
  2. <Root >
  3. <ext:AsyncTreeNode Text ="root" NodeID ="root" Expanded ="true" ></ext:AsyncTreeNode> <%--treepanel中的rootvisible="true"是隐藏root这个节点，但是展开了，异步加载的时候如果接下来的节点不确定是否一定有节点，最好不用root这个节点做为第一个节点，如果确定就节点就不用隐藏，直接用root节点--%>
  4. </Root>
  5. <Listeners >
  6. <BeforeLoad Handler ="nodeLoad(node,'','');" /> <%--这个是点击展开响应的事件 --%>
  7. <Click Handler="onClickSource(node.id);" /> <%--这个是单击节点响应的事件--%>
  8. </Listeners>
  9. </ext:TreePanel>

  复制代码

• 在前台js中写下点击展开的节点的事件和单击节点的事件，这些事件再去调用到后台取出数据。
  
  单击节点响应的事件(将选中的节点的ID记录下来，方便绑定其他数据以及刷新时使用)
  1. function onClickSource(nid){
  2. hSelPosId.setValue(nid);
  3. Ext.net.DirectMethods.BindPosInfo();//根据选中的节点的ID绑定其他数据
  4. }

  单击展开响应的事件()

  1. //加載子節點
  2. function nodeLoad(node,strSign,strParentId) {
  3. Ext.net.DirectMethods.NodeLoad(node.id, { //加载子节点
  4. success: function(result) {
  5. if (result == "" || result == "undefined" || result == "[]")
  6. { return; }
  7. var data = eval("(" + result + ")");//这时返回回来的值
  8. node.loadNodes(data);
  9. tpl_left.body.unmask();
  10. //接下来这段是刷新的时候做的，由于我实现的功能比较复杂就不一一解释了，大概的思路是这样的，首先根据之前记录下来的选中的ID找出所有的父节点的ID，对当前树的节点进行查找该选中ID，如果找到，则选中，没有找到，则从该节点的最前面一个父节点ID开始查找下来，找到父节点则展开，这样一级级找下来就可以找到之前选中的节点
  11. if(strSign=="reload"){
  12. var strSelId=hSelPosId.getValue();
  13. if(strSelId !=""){
  14. //第一層
  15. var curNode = tpl_left.getNodeById(hSelPosId.getValue());
  16. if (curNode != null && curNode != undefined) {
  17. curNode.select();
  18. onClickSource(curNode.id);
  19. }else {
  20. var arrSelId=strSelId .split('|');
  21. if(arrSelId .length>1){
  22. switch (arrSelId [0]){
  23. case "g_id": //職等
  24. if(strParentId !=arrSelId [0]){
  25. curNode = tpl_left.getNodeById(arrSelId [0]);
  26. if(curNode.hasChildNodes()==true){
  27. nodeLoad(curNode,"reload",arrSelId [0]);
  28. }
  29. }else {
  30. onClickSource('');
  31. }
  32. break ;
  33. case "t_id"://職稱
  34. if(arrSelId.length ==2){
  35. if(strParentId !=arrSelId [0]){
  36. curNode = tpl_left.getNodeById(arrSelId [0]);
  37. if(curNode.hasChildNodes()==true){
  38. nodeLoad(curNode,"reload",arrSelId [0]);
  39. }
  40. }else {
  41. onClickSource('');
  42. }
  43. }else {
  44. if(strParentId==""){
  45. curNode = tpl_left.getNodeById(arrSelId[0]);
  46. if(curNode.hasChildNodes()==true){
  47. nodeLoad(curNode,"reload",arrSelId [0]);
  48. }
  49. }else if(strParentId ==arrSelId [0]){
  50. curNode = tpl_left.getNodeById(arrSelId[0]+"|"+arrSelId [1]);
  51. if(curNode.hasChildNodes()==true){
  52. nodeLoad(curNode,"reload",arrSelId[0]+"|"+arrSelId [1]);
  53. }
  54. }else {
  55. onClickSource('');
  56. }
  57. }
  58. break ;
  59. case "f_id"://職務
  60. if(arrSelId.length ==2){
  61. if(strParentId !=arrSelId [0]){
  62. curNode = tpl_left.getNodeById(arrSelId [0]);
  63. if(curNode.hasChildNodes()==true){
  64. nodeLoad(curNode,"reload",arrSelId [0]);
  65. }
  66. }else {
  67. onClickSource('');
  68. }
  69. }else {
  70. if(strParentId==""){
  71. curNode = tpl_left.getNodeById(arrSelId[0]);
  72. if(curNode.hasChildNodes()==true){
  73. nodeLoad(curNode,"reload",arrSelId [0]);
  74. }
  75. }else {
  76. if(strParentId ==arrSelId [0]){
  77. curNode = tpl_left.getNodeById(arrSelId[0]+"|"+arrSelId [1]);
  78. if(curNode.hasChildNodes()==true){
  79. nodeLoad(curNode,"reload",arrSelId[0]+"|"+arrSelId [1]);
  80. }
  81. }else if(strParentId ==(arrSelId[0]+"|"+arrSelId [1])){
  82. if(arrSelId .length ==4){
  83. curNode = tpl_left.getNodeById(arrSelId[0]+"|"+arrSelId [1]+"|"+arrSelId [2]);
  84. if(curNode.hasChildNodes()==true){
  85. nodeLoad(curNode,"reload",arrSelId[0]+"|"+arrSelId [1]+"|"+arrSelId [2]);
  86. }
  87. }else {
  88. onClickSource('');
  89. }
  90. }else{
  91. onClickSource('');
  92. }
  93. }
  94. }
  95. break ;
  96. }
  97. }
  98. }
  99. }
  100. }
  101. },
  102. failure: function(errorMsg) {
  103. Ext.Msg.alert('Failure', errorMsg);
  104. }
  105. });
  106. }

  复制代码

• 在后台写下前台所调用的事件，并返回相应的值.
  
  在后台取数据的时候要注意的问题：

后台加载节点时，如果该节点下有子节点，那么该节点应该定义为AsyncTreeNode ，如果没有则应该定义为TreeNode，并且Leaf属性为true 表明是叶子节点

       后台加载节点时，节点的ID要设置好，建议最好是 父节点的ID+分隔符号（自己设定）+当前节点的ID，这样子，如果刷新树，还可以做定位到当前选中的节点

     （例子中的节点 ID说明  "root"：root节点 ,"00":所有分类的节点，"f_id"、"g_id"、"t_id" 为所有分类下第一级的节点，"f_id|XXX"为所有分类下第二级到第N级的节点）。

1. [Ext.Net.DirectMethod(ViewStateMode = Ext.Net.ViewStateMode.Enabled)]
2. public string NodeLoad(string nodeID)
3. {
4. if (nodeID == "root")//綁定根目錄的節點（所有職位）
5. {
6. return BindPosRoot("");
7. }
8. else if (nodeID == "00")//職位大分類(職等、職稱、職務)
9. {
10. return BindPosCat();
11. }
12. else//職位大分類下的分類的小分類
13. {
14. return BindPosCatChild(nodeID);
15. }
16. }

复制代码

1. //下面这段是注意第二点要注意的
2. //職位大分類下的分類
3. public string BindPosCatChild(string strNodeId)
4. {
5. string[] arrStr=strNodeId .Split ('|');
6. Ext.Net.TreeNodeCollection nodes = new Ext.Net.TreeNodeCollection();
7. Ext.Net.AsyncTreeNode curNodes = new Ext.Net.AsyncTreeNode();
8. Ext.Net.TreeNode curTreeNode = new Ext.Net.TreeNode();
9. DataTable dt=null;
10. DataTable dtChild=null;
11. DataRow[] drsChild=null;
12. string strParentId = arrStr [0];
13. string strId = "";
14. string strIdField = "";//顯示編號的字段
15. string strTextField = ""; //顯示名稱的字段
16. int ICount = 0;
17. ICount = arrStr.Length
18. switch (strParentId)
19. {
20. case "g_id"://職等
21. if (ICount == 1)
22. {
23. dt = getInitData("ods_grade", "g_id,grade", " and g_status=1");
24. strId = strParentId+"|";
25. strIdField = "g_id";
26. strTextField = "grade";
27. }
28. break;
29. case "t_id"://職稱
30. if (ICount == 1)
31. {
32. dt = getInitData("ods_title_cat", "t_cat_id,t_cat", "");
33. dtChild = getInitData("ods_title", "t_id,title,t_cat_id", "and t_status=1");
34. strId = strParentId + "|";
35. strIdField = "t_cat_id";
36. strTextField = "t_cat";
37. }
38. else {
39. dt = getInitData("ods_title", "t_id,title,t_cat_id", "and t_status=1 and t_cat_id='"+arrStr [1]+"'");
40. strId = strNodeId + "|";
41. strIdField = "t_id";
42. strTextField = "title";
43. }
44. break;
45. case "f_id"://職務
46. if (ICount ==1 )
47. {
48. dt = getInitData("ods_function_cat", "f_cat,f_cat_id", "");
49. dtChild = getInitData("ods_function_dog", "f_dog_id,f_dog,f_cat_id", "");
50. strId = strParentId + "|";
51. strIdField = "f_cat_id";
52. strTextField = "f_cat";
53. }
54. else if (ICount == 2)
55. {
56. dt = getInitData("ods_function_dog", "f_dog_id,f_dog,f_cat_id", " and f_cat_id='" + arrStr[1] + "'");
57. dtChild = getInitData("ods_function", "f_id ,functionName,f_dog_id", " and f_status=1");
58. strId = strNodeId + "|";
59. strIdField = "f_dog_id";
60. strTextField = "f_dog";
61. }
62. else {
63. dt = getInitData("ods_function", "f_id ,functionName,f_dog_id", " and f_status=1 and f_dog_id='"+arrStr [2]+"'");
64. strId = strNodeId + "|";
65. strIdField = "f_id";
66. strTextField = "functionName";
67. }
68. break;
69. }
70. //增加子節點
71. foreach (DataRow dr in dt.Rows)
72. {
73. if (dtChild != null) {
74. drsChild = dtChild.Select(strIdField + "='" + dr[strIdField].ToString() + "'");
75. }
76. //如果有子节点则用      AsyncTreeNode
77. if (drsChild !=null &&drsChild.Length > 0)
78. {
79. curNodes = new Ext.Net.AsyncTreeNode();
80. curNodes.NodeID = strId + dr[strIdField].ToString();
81. curNodes.Text = dr[strTextField].ToString();
82. nodes.Add(curNodes);
83. }
84. else
85. {
86. curTreeNode = new Ext.Net.TreeNode();
87. curTreeNode.NodeID = strId + dr[strIdField].ToString(); ;
88. curTreeNode.Text = dr[strTextField].ToString ();
89. curTreeNode.Leaf = true;
90. nodes.Add(curTreeNode);
91. }
92. }
93. return nodes.ToJson();
94. }

转自：http://www.ext.net.cn/forum.php?mod=viewthread&tid=11945