(转)用Ajax技术让IE Web Control Tree View实现大数据量读取
其中的TreeView使用比较广泛。在我参与的一个项目中,一个名为UNSPSC的模块将频繁使用这个控件。这个控件在一般情况下相当好用(节点小于200个),但当节点数比较多时将使客户端长时间等待,大数据量时会让客户端超时以至于读取失败。本模块在进行压力测试时,数据库中有24000多条记录,一次性读取出来将使IE死掉,这自然不能适用于对UNSPSC的读取(UNSPSC要求最多支持9000万条记录)。于是我想使用Ajax(Asynchronous
JavaScript and XML)的无刷新和异步读取机制对其进行优化。
本项目文件已经上传,在文章结尾处,大家不要再公布自己的email了,注意隐私.
对于Ajax的介绍,国内外的技术网站都有不少的资料,我在此不多说了。我所使用的Ajax来自http://ajax.schwarz-interactive.de/,大家有兴趣可以去下载。
首先来看看做出来的效果:
这是刚加载好页面的效果。
这是刚刚点击节点,展开的瞬间(不好抓取啊)。
异步读取完成后,名为11000000节点的变化。这是在异步调用完成后,数据已经在Tree
View中生成。
当完全展开11000000下的一个子节点时,可以发现根节点如此之多。
这是我仿造项目做的一个解决方案:
其中BorgWorX.Web.Core.Ajax生成Ajax.DLL
第一步:按AjaxGuide.doc上说的来,先在web.config中进行修改,增加:
<add
verb="POST,GET" path="ajax/*.ashx"
type="BorgWorX.Web.Core.Ajax.PageHandlerFactory, BorgWorX.Web.Core.Ajax" />
第二步:我们在page load事件时向Ajax注册页面类,并向tree view控件绑定UNSPSC第一层的数据:
private void
Page_Load(object sender, System.EventArgs e)
{
BorgWorX.Web.Core.Ajax.Utility.RegisterTypeForAjax(typeof(WebForm2));
LoadNode=new TreeNode();
LoadNode.Text="Loading";
LoadNode.ID="load";
if(!IsPostBack)
{
TreeNode root=new TreeNode();
root.Text="Root";
TreeView1.Nodes.Add(root);
loadData(root,0); //Data Bind
root.Expanded=true;
}
}
第三步:在后台代码中编写要使用Ajax的方法,并对其添加元数据属性。要注意的是这些方法必须声明为public,在这儿我声明一个名为returnDs的方法,它根据前缀字符串返回数据库中所有包含此前缀的记录:
[BorgWorX.Web.Core.Ajax.AjaxMethod()]
public DataSet
returnDs(string PreFix)
{
int preFix=getPreFix(PreFix);
string
str="workstation id=DINGSEA;packet size=4096;user id=sa;data
source=dingsea;persist security info=False;initial catalog=GEPS";
DataSet
ds=SqlHelper.ExecuteDataset(str,"sp_loadUNSPSCCodeByLevel",preFix);
return ds;
}
private int
getPreFix(string code)
{
string tempStr;
while(code.EndsWith("00"))
{
code=code.Remove(code.Length-2,2);
}
tempStr=code;
return
tempStr.Length==0?0:Convert.ToInt32(tempStr);
}
这样我们在客户端写JS的时候就可以方便的使用这个方法了。
第四步:服务端搞定后,我们来看看客户端如何设计。通过page_load方法加载了第一层的UNSPSC
Code,也就是XX000000的所有节点并显示出来。通过对TreeView WebControl的客户端行为进行考察(微软在其文章《About the
TreeView WebControl》中有提到),我们发现可以在TreeView的OnExpand事件中,进行异步下载子层数据:
<script language="javascript">
var Index;
function ds()
{
WebForm2.returnDs(TreeView1.getTreeNode(Index).getAttribute("NodeData"),returnDs_callback);
}
function returnDs_callback(response)
{
var n=TreeView1.getTreeNode(Index);
var load=n.getChildren();
if(load.length!=1){
return;//如果已经存在数据,那就不再读取。
}
else
{
var loadNode=load[0];
loadNode.remove();
}
var ds=response.value;
if(ds!=null && ds.Tables!=null && typeof(ds)=="object")
{
for(var i=0;i<ds.Tables[0].Rows.length;i++)
{
var newNode=TreeView1.createTreeNode();
newNode.setAttribute("NodeData",ds.Tables[0].Rows[i].UNSPSCCode);
newNode.setAttribute("Text",ds.Tables[0].Rows[i].UNSPSCCode+"
"+ds.Tables[0].Rows[i].Description);
if(newNode.getAttribute("NodeData")%100==0)
{
var loadNode=TreeView1.createTreeNode();
loadNode.setAttribute("Text","Loading......");
newNode.add(loadNode);
}
n.add(newNode);
}
}
else{alert(response.error);}
}
</script>
<script language="javascript" for="TreeView1" event="onexpand">
//TODO:在此处填写TreeView的OnExpand事件的代码。
Index= window.event.treeNodeIndex;//获得展开的节点的位置,根节点为0。
if(Index=='0')return;//如果是根节点的话就直接返回。
ds();
</script>
按这样的情况来算,业务中每层节点最多99个,一共四层节点,也就是99*99*99*99=
9227446944279201(更正:96059601,自己汗一个先。)个节点。远远超过需求中的9000万个,而且在用户展开节点后先出现的是“Loading……”的字样,同时在服务器上去下载节点,不但优化了性能提高了效率而且还更人性化、界面更有亲和力。
/Files/wangyt223/project.rar
(转)用Ajax技术让IE Web Control Tree View实现大数据量读取相关推荐
- 2019最全的大数据技术解读,如何4个月掌握大数据核心技术?
第一:什么是大数据 来看看维基百科的定义 大数据(英语:Big data或Megadata),或称巨量数据.海量数据.大资料,指的是所涉及的数据量规模巨大到无法通过人工,在合理时间内达到截取.管理.处 ...
- 从WEB SERVICE 上返回大数据量的DATASET
前段时间在做一个项目的时候,遇到了要通过WEB SERVICE从服务器上返回数据量比较大的DATASET,当然,除了显示在页面上以外,有可能还要用这些数据在客户端进行其它操作.查遍了网站的文章,问了一 ...
- Java Web学习总结(33)——Java Web 程序员如何转型大数据
1.技术日渐成熟,应用空间得以拓展 大数据技术,最早于1980年被首次提及,却在近几年才获得突飞猛进的发展.相较于几十年前神经网络算法捉襟见肘的计算能力,如今处理器对大规模数据的高速处理能力无疑发挥了 ...
- 有谁知道高速大数据量无线传输技术
有谁知道高速大数据量无线传输技术? 想了解一下无线传输 在2G-4Gbps这样的速度下,有什么现有的产品或者技术? UWB???国内没有产品 Wifi ???速度不够
- AJAX 大数据量处理
看来一篇淘宝网关于大数据量处理的解决方案的文章,感觉思路不错,确实值得学习,下面总结成自己的经验.主要是思想. 思路如下: 将大数据量数据进行分割返回,例如需要返回100条数据,我们可以通过10次请求 ...
- web 折线图大数据量拉取展示方案_【第2010期】QQ音乐Android客户端Web页面通用性能优化实践...
前言 今日早读文章由QQ音乐客户端开发工程师@关岳分享,公号:云加社区(ID:QcloudCommunity,腾讯云官方开发者社区)授权分享. 正文从这开始~~ QQ音乐 Android 客户端的 W ...
- 专访宋怀明:雄厚的技术依托下,曙光致力成为行业大数据生态领航者
2016年12月8日-10日,由中国计算机学会(CCF)主办,CCF大数据专家委员会承办,中国科学院计算技术研究所.中科天玑数据科技股份有限公司与CSDN共同协办的2016中国大数据技术大会(Big ...
- Java中的Listener监听器与Ajax技术和Axios异步框架以及JSON传递接收数据
Listener监听器与Ajax Listener 概念 Listener 表示监听器,是 JavaWeb 三大组件(Servlet.Filter.Listener)之一. 监听器可以监听就是在 ap ...
- web 折线图大数据量拉取展示方案_分布式、服务化的企业级 ERP 系统架构设计方案...
点击蓝色"架构文摘"关注我哟 加个"星标",每天上午 09:25,干货推送! 作者:月光冷锋的博客 博客园:https://www.cnblogs.com/l ...
最新文章
- 聊聊 iOS 中的网络加密
- java反射之-性能优化
- eclipse中访问不了tomcat首页server Locations变灰无法编辑
- LR(1)分析表-语法树-四元式
- 微软2013暑期实习笔试题目第5题分析
- 如何保持空域与频域滤波结果的一致性
- Python基础day05 作业解析【10道 函数作业题】
- vue 入门notes
- Java基础知识学习04-自定义类、ArrayList集合
- HTML如何添加锚点,我先收藏为敬
- 没有workstation_这才是Win10的旗舰版:WorkStation版独享功能测试
- 头文件相互包含问题的解决办法
- 深入浅出Java反射机制
- 移动APP开发的三种常见模式
- 计算机音乐苹果手机,iPhone手机音乐如何导出电脑?
- 树的直径,树的中心,树的重心
- 利用 Andorid 手机连接 Arduino 并控制 LED灯开关
- 视频编码中CBR和VBR的区别
- Flutter 调用百度地图APP实现位置搜索、路线规划
- 罗赛塔石碑Rosetta Stone安装教程
热门文章
- SVN文件上感叹号、加号、问号等图标的原因
- 数据库-windows上安装mysql
- 通过路由远程计算机重启,路由器怎么重启?这几种方法教你重启怎么弄!
- nginx 代理到其他端口_「从单体架构到分布式架构」请求增多,单点变集群(2):Nginx...
- net 去掉第一位和最后一位_本赛季英超门将的扑救成功率,第一位和最后一位竟来自同家俱乐部...
- compose部署redis和mysql_浅析docker-compose部署mysql无法访问的问题
- 为什么程序员互相之间不能透露薪水?是怕“凡尔赛”吗?
- (python)7-6 sdut-数制转换
- c语言中各个符号的意义及作用是什么,C语言特殊符号意义
- 测试点击屏幕次数的软件_软件测试工程师面试如何回答登录功能怎么进行测试?...