用后台线程对TreeView加载大量数据的探索

最新推荐文章于 2024-04-30 22:06:17 发布

daniao2003

最新推荐文章于 2024-04-30 22:06:17 发布

阅读量1.3k

点赞数

分类专栏： Ajax 文章标签： webform function assembly 多线程 html javascript

Ajax 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

这几天我在弄TreeView，在节点比较多的时候会发现加载速度很慢，甚至
当机，解决的办法一般有分次加载（象CSDN社区），但是这样也有不好的
地方，就是当用户点击后才加载，会有点延迟，感觉不爽。

我现在的解决办法是页面请求的时候先输出第一层节点，等页面加载完毕后
用Microsoft.XMLHTTP对象广度优先对每个节点异步加载子节点，由于是异步，一般
用户感觉不到父节点在加载子节点，我这个测试用了4605个子节点
，历时30秒左右，在加载的同时还操作节点和界面。也欢迎大家一起来探讨你们的解决方法

主要思路：添加onload事件，等页面加载完毕后
1：将所有子节点加入队列，修改头指针和尾指针
2：while(队列)非空，读取一个节点，向页面请求子节点，设置请求完毕的回调函数,否则GOTO 5
3：如果请求完毕，添加所有的子节点，将所有子节点加入队列，释放队列中对应的父节点，修改头指针和尾指针
4：GOTO 2
5：完毕

在实际的browser环境里，js始终是单线程的但是通过创建COM组件等来实现多线程（象VB通过进程外组件来实现
多线程），因此为了不阻塞浏览器，一般都采用异步方式来调用，而这也是一般的Ajax 框架提供了默认方式。

ASPX文件：

<%@ Register TagPrefix="iewc" Namespace="Microsoft.Web.UI.WebControls" Assembly="Microsoft.Web.UI.WebControls" %>
<%@ Page language="c#" Codebehind="WebForm1.aspx.cs" AutoEventWireup="false" Inherits="WebApplication1.WebForm1" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<HTML>
<HEAD>
  <title>加载大量数据</title>
</HEAD>
<body MS_POSITIONING="GridLayout" οnlοad="LoadData()">
  <form id="Form1" method="post" runat="server">
   <table align="left">
    <tr>
     <td>
      <iewc:TreeView id="tvw" runat="server"></iewc:TreeView>
     </td>
     <td valign=top><input type="text" id="txtNode"></td>
    </tr>
   </table>
  </form>
</body>
</HTML>
<script language="javascript">
  var xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");;
  var xmlDoc=new ActiveXObject("MSXML2.DOMDocument");
  var array;
  var head=0;
  var tail=0;
  //开始自动加载
  function LoadData()
  {
   array=tvw.getChildren();
   tail=array.length;
   ExecCommand("POST",'WebForm1.aspx','ID='+array[head].getAttribute("Text"),GetItemComplete)
  }

  //点击节点时显示节点名称，表明界面线程没有被冻结
  function DisplayNode() {
   var node=tvw.getTreeNode(tvw.clickedNodeIndex);
   if(node==null)
    return;
   document.all.txtNode.value=node.getAttribute("Text");
  }

  //请求响应后的回调函数
  function GetItemComplete()
  {
   if (xmlhttp.readyState==4)
   {
    //加载完毕
    if(xmlhttp.responseTEXT=="")
     return;

    xmlDoc.loadXML(xmlhttp.responseTEXT);
    var root=xmlDoc.firstChild;
    var nodes = root.childNodes;
    for (var i=0; i<nodes.length; i++)
    {
     var node = nodes.item(i);
     AddNode(array[head],node.text,node.text);
    }
    array[head]=null;//释放内存
    head++;
    if(head<tail)
    {
     ExecCommand("POST",'WebForm1.aspx', 'ID='+array[head].getAttribute("Text"),GetItemComplete);
    }
   }
  }

  function ExecCommand(strMethod ,strPrgmURL , strParamString,functionAddr)
  {
   try
   {
    xmlhttp.Open(strMethod , strPrgmURL, true);
    //设置异步回调函数
    xmlhttp.onreadystatechange=functionAddr;
    if (strMethod.toUpperCase() == 'POST')
    {
     xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
     xmlhttp.Send(strParamString);
    }
    else
    {
     xmlhttp.Send();
    }
   }
   catch(e)
   {
    //alert(e);
    return -1;
   }
  }

  //根据父ID创建子节点
  function AddNode(node,Text,ID)
  {
   var subNode=tvw.createTreeNode();
   subNode.setAttribute("Text",Text);
   subNode.setAttribute("ID","ID");
   node.add(subNode);
   //将subNode加入对列
   array[tail++]=subNode;
  }
</script>

CS文件：

using System;
using System.Collections;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Web;
using System.Web.SessionState;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.HtmlControls;
using Microsoft.Web.UI.WebControls;
using System.Text;

namespace WebApplication1
{
/// <summary>
/// WebForm1 的摘要说明。
/// </summary>
public class WebForm1 : System.Web.UI.Page
{
  protected Microsoft.Web.UI.WebControls.TreeView tvw;
  public static int cnt;
  private const int MAX=5;
  private void Page_Load(object sender, System.EventArgs e)
  {
   // 在此处放置用户代码以初始化页面
   if(!Page.IsPostBack)
   {
    if(this.Request["ID"]!=null)
    {
     string first=this.Request["ID"].ToString().Trim().Substring(0,1);
     int depth=Convert.ToInt32(first);
     depth++;
     if(depth>=4)
      Response.End();
     int count=depth*depth*MAX;//定义当层单个节点的子节点数
     StringBuilder sb=new StringBuilder("<root>",count*21+20);//预计所有子节点字符串的长度和
     for(int i=0;i<count;i++,cnt++)
     {
      sb.Append("<node>"+depth.ToString()+"--"+cnt.ToString()+"</node>");
     }
     sb.Append("</root>");
     Response.Write(sb.ToString());
     Response.End();
    }
    tvw.Attributes.Add("onclick","DisplayNode()");
    cnt=1;
    for(int i=0;i<MAX;i++)
    {
     TreeNode tn=new TreeNode();
     tn.ID="1--"+cnt.ToString();//层号码＋序列号
     tn.Text="1--"+cnt.ToString();
     tvw.Nodes.Add(tn);
     cnt++;
    }
   }

  }

  #region Web 窗体设计器生成的代码
  override protected void OnInit(EventArgs e)
  {
   //
   // CODEGEN: 该调用是 ASP.NET Web 窗体设计器所必需的。
   //
   InitializeComponent();
   base.OnInit(e);
  }

  /// <summary>
  /// 设计器支持所需的方法 - 不要使用代码编辑器修改
  /// 此方法的内容。
  /// </summary>
  private void InitializeComponent()
  {
   this.Load += new System.EventHandler(this.Page_Load);

}
#endregion
}
}

daniao2003

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
用后台线程对TreeView加载大量数据的探索

这几天我在弄TreeView，在节点比较多的时候会发现加载速度很慢，甚至当机，解决的办法一般有分次加载（象CSDN社区），但是这样也有不好的地方，就是当用户点击后才加载，会有点延迟，感觉不爽。我现在的解决办法是页面请求的时候先输出第一层节点，等页面加载完毕后用Microsoft.XMLHTTP对象广度优先对每个节点异步加载子节点，由于是异步，一般用户感觉不到父节点在加载子节点，我这个测试用了4
复制链接

扫一扫