[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. 
     
  3. <Root >
     
  4. <ext:AsyncTreeNode Text ="root" NodeID ="root" Expanded ="true" ></ext:AsyncTreeNode> <%--treepanel中的rootvisible="true"是隐藏root这个节点，但是展开了，异步加载的时候如果接下来的节点不确定是否一定有节点，最好不用root这个节点做为第一个节点，如果确定就节点就不用隐藏，直接用root节点--%>
     
  5. </Root>
     
  6. <Listeners >
     
  7. <BeforeLoad Handler ="nodeLoad(node,'','');" /> <%--这个是点击展开响应的事件 --%>
     
  8. <Click Handler="onClickSource(node.id);" /> <%--这个是单击节点响应的事件--%>
     
  9. </Listeners>
     
  10. </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. 
      
  71. if(strParentId==""){
      
  72. curNode = tpl_left.getNodeById(arrSelId[0]);
      
  73. if(curNode.hasChildNodes()==true){
      
  74. nodeLoad(curNode,"reload",arrSelId [0]);
      
  75. }
      
  76. }else {
      
  77. if(strParentId ==arrSelId [0]){
      
  78. curNode = tpl_left.getNodeById(arrSelId[0]+"|"+arrSelId [1]);
      
  79. if(curNode.hasChildNodes()==true){
      
  80. nodeLoad(curNode,"reload",arrSelId[0]+"|"+arrSelId [1]);
      
  81. }
      
  82. }else if(strParentId ==(arrSelId[0]+"|"+arrSelId [1])){
      
  83. if(arrSelId .length ==4){
      
  84. curNode = tpl_left.getNodeById(arrSelId[0]+"|"+arrSelId [1]+"|"+arrSelId [2]);
      
  85. if(curNode.hasChildNodes()==true){
      
  86. nodeLoad(curNode,"reload",arrSelId[0]+"|"+arrSelId [1]+"|"+arrSelId [2]);
      
  87. }
      
  88. }else {
      
  89. onClickSource('');
      
  90. }
      
  91. }else{
      
  92. onClickSource('');
      
  93. }
      
  94. }
      
  95. }
      
  96. break ;
      
  97. }
      
  98. }
      
  99. }
      
  100. }
       
  101. }
       
  102. },
       
  103. failure: function(errorMsg) {
       
  104. Ext.Msg.alert('Failure', errorMsg);
       
  105. }
       
  106. });
       
  107. }

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

       后台加载节点时，如果该节点下有子节点，那么该节点应该定义为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. 
   
5. if (nodeID == "root")//綁定根目錄的節點（所有職位）
   
6. {
   
7. return BindPosRoot("");
   
8. }
   
9. else if (nodeID == "00")//職位大分類(職等、職稱、職務)
   
10. {
    
11. return BindPosCat();
    
12. }
    
13. else//職位大分類下的分類的小分類
    
14. {
    
15. return BindPosCatChild(nodeID);
    
16. }
    
17. }
    

复制代码

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

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