当前位置:编程学习 > C#/ASP.NET >>

C# B/S模式下的 树形服务器控件 节点非常多

各位大神:
    我现在的页面效果是这样子的:
  


   现在遇到一个性能问题,由于树形加载的有2000-3000个节点,所以导致每次点击节点,页面反应都非常慢,通过对Http的监视,发现每次页面刷新,传输的http文件都有5M左右的大小。
  查看对应的页面显示的源码,发现树形呈现的都是如下的代码,含有很多的图片信息:
 
<ul id="astvMyTree_ulASTreeView" class="astreeview-tree">
<li id="astvMyTree_li_node_13491" checkedState="2" treeNodeValue="boss" enable-add-context-menu="true" class="line-root" enable-delete-context-menu="true" treeNodeType="0" enable-edit-context-menu="true" selected="true" openState="0">
<img src="/Javascript/astreeview/images/astreeview-minus.gif" icon-type="0" class="astreeview-plus-minus" />
<img src="/Javascript/astreeview/images/astreeview-folder-open.gif" icon-type="2" class="astreeview-icon" />
<a onclick="return false;" id="astvMyTree_lbASTreeNode2" class=" astreeview-node-selected" is-astreeview-node="true" href="javascript:__doPostBack('astvMyTree$lbASTreeNode2','')">车型</a>
<ul class="line-none">
<li id="astvMyTree_li_node_23491" checkedState="2" treeNodeValue="PIN-SNAP            " enable-add-context-menu="true" class="line-middle" enable-delete-context-menu="true" treeNodeType="0" enable-edit-context-menu="true" treeNodeIcon="../Images/lj.gif" openState="0"><img src="/Javascript/astreeview/images/astreeview-minus.gif" icon-type="0" class="astreeview-plus-minus" style="visibility:hidden;" /><img src="../Images/lj.gif" icon-type="2" class="astreeview-icon" /><a onclick="return false;" id="astvMyTree_lbASTreeNode3" is-astreeview-node="true" href="javascript:__doPostBack('astvMyTree$lbASTreeNode3','')">009231081A</a></li><li id="astvMyTree_li_node_33491" checkedState="2" treeNodeValue="BOLT-HEX HD,PILOT PT" enable-add-context-menu="true" class="line-middle" enable-delete-context-menu="true" treeNodeType="0" additional-attributes="{"style":"color:blue"}" enable-edit-context-menu="true" treeNodeIcon="../Images/lj.gif" openState="0"><img src="/Javascript/astreeview/images/astreeview-minus.gif" icon-type="0" class="astreeview-plus-minus" style="visibility:hidden;" /><img src="../Images/lj.gif" icon-type="2" class="astreeview-icon" /><a onclick="return false;" id="astvMyTree_lbASTreeNode4" is-astreeview-node="true" href="javascript:__doPostBack('astvMyTree$lbASTreeNode4','')" style="color:blue">0112103181</a></li><li id="astvMyTree_li_node_43491" checkedState="2" treeNodeValue="SCR-HEX HD,PP W/PW  " enable-add-context-menu="true" class="line-middle" enable-delete-context-menu="true" treeNodeType="0" additional-attributes="{"style":"color:blue"}" enable-edit-context-menu="true" treeNodeIcon="../Images/lj.gif" openState="0"><img src="/Javascript/astreeview/images/astreeview-minus.gif" icon-type="0" class="astreeview-plus-minus" style="visibility:hidden;" /><img src="../Images/lj.gif" icon-type="2" class="astreeview-icon" /><a onclick="return false;" id="astvMyTree_lbASTreeNode5" is-astreeview-node="true" href="javascript:__doPostBack('astvMyTree$lbASTreeNode5','')" style="color:blue">011212FJ0A</a></li><li id="astvMyTree_li_node_53491" checkedState="2" treeNodeValue="BOLT-HEX HD W/WASH  " enable-add-context-menu="true" class="line-middle" enable-delete-context-menu="true" treeNodeType="0" additional-attributes="{"style":"color:blue"}" enable-edit-context-menu="true" treeNodeIcon="../Images/lj.gif" openState="0"><img src="/Javascript/astreeview/images/astreeview-minus.gif" icon-type="0" class="astreeview-plus-minus" style="visibility:hidden;" /><img src="../Images/lj.gif" icon-type="2" class="astreeview-icon" /><a onclick="return false;" id="astvMyTree_lbASTreeNode6" is-astreeview-node="true" href="javascript:__doPostBack('astvMyTree$lbASTreeNode6','')" style="color:blue">011212FJ2A</a></li>


  不知道大家对这种大的树形结构,产生的操作非常卡的问题,有什么好的解决办法没?
  PS:不要建议更换控件,因为更换控件对系统影响较大。。 C# 树形控件 --------------------编程问答-------------------- BS上你搞这么大型的树形控件有意义吗?不卡才怪,你不能给车型再分个类吗?先过滤类别,再加载车型 --------------------编程问答-------------------- 不可能再进行分类了;其实这颗树如果完全展开 其节点会超过3W个节点(包含了2级,3级,4级,..)。我现在只是加载了一级而已,一级有3k个节点。 --------------------编程问答-------------------- 求关注  求大神 --------------------编程问答-------------------- 如果不更换控件,那么只能通过加载数据这块来入手解决这个问题了。
再想想,如何才能减少一次数据的加载? 要不然修改设计,要不然分批加载。
修改设计指的就是将类别再次细分。
分批加载就是例如AJAX分批加载。

--------------------编程问答-------------------- 参考电商吧,人家挂的东东很多,却不用树,所以不卡。
非要用树的话,试试点击打开父节点的时候才加载其子节点,不过不乐观啊。 --------------------编程问答-------------------- 除 --------------------编程问答-------------------- 每次加载100个节点,最后加一个显示更多。点了以后再来100个。 --------------------编程问答-------------------- 除 --------------------编程问答--------------------
引用 2 楼 wangoqoq 的回复:
不可能再进行分类了;其实这颗树如果完全展开 其节点会超过3W个节点(包含了2级,3级,4级,..)。我现在只是加载了一级而已,一级有3k个节点。

考虑业务上的意见,不要纠缠什么技术。仅仅是一级,你也无须加载3k节点,一开始加载100个节点就足够了。

--------------------编程问答--------------------
引用 8 楼 u010820966 的回复:
我当初用我们公司快速开发框架设计我的族谱软件里用的是点开某个节点自动加载他的以下三层节点,这样来保证系统在互联网应用的性能,如图,楼主可以参考下我的设计思路。

可否提供下你们框架的下载地址吗!能试用吗! --------------------编程问答-------------------- 除 --------------------编程问答-------------------- 不卡就成精了,不改控件,可以改控件结构,类似这样,你真做出高效加载,这么长的列表体验也很让人抓狂,从客户体验考虑一下 --------------------编程问答-------------------- 这就是服务器控件的缺点 --------------------编程问答--------------------
引用 2 楼 wangoqoq 的回复:
不可能再进行分类了;其实这颗树如果完全展开 其节点会超过3W个节点(包含了2级,3级,4级,..)。我现在只是加载了一级而已,一级有3k个节点。


反正我是这样做的,当鼠标选中第n级节点时,我就会向S端请求该选中节点下第n+1级子节点的信息,绝不多取,这样做能够明显改善你的问题
补充:.NET技术 ,  组件/控件开发
CopyRight © 2012 站长网 编程知识问答 www.zzzyk.com All Rights Reserved
部份技术文章来自网络,