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

时间：2023-03-08 19:31:06

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

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

现将例子的图 [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

相关文章