- 浏览: 207168 次
- 性别:
- 来自: 北京
最新评论
-
Relucent:
likaiyihou51 写道The constructor ...
获得Hibernate Criteria实际SQL的方法 -
likaiyihou51:
The constructor CriteriaJoinWal ...
获得Hibernate Criteria实际SQL的方法 -
likaiyihou51:
大侠 我copy了这个代码 又个问题,能给看一下吗
获得Hibernate Criteria实际SQL的方法 -
haisee:
管用,Firefox和Chrom验证通过。
Javascript设置和获取Textarea的光标位置的方法 -
wanghaosvse:
请问楼主,有没有跟数据库同步的动态加载
带选择框的JS树控件2 (为JSTree再次提速)
以前写过一个带选择框的JS树控件
但是当时发现一个问题,第一次选中根节点会明显感觉卡一下。
那是因为子节点的数据还没有生成,选中根节点的话需要初始化全部数据。(那个tree有5000个节点)
于是我思考一个问题,如何让多节点树的页面达到更快的效率。
经过测试发现,JSTree的主要效率瓶颈在两个地方。
1.页面HTMLElement的创建
2.树子节点的检索
页面创建一个HTMLElement是很耗时的,无论使用createElement或者是是innerHTML都一样。
而且这一步只能一个节点一个节点慢慢地生成,虽然可以通过减小单个节点的HTML元素量的方法提高一些速度,但是对于对于上千个节点来说仍然需要等上几十秒。
(1个节点如果有5个HTMLElement,生成1000个节点大概3秒左右)
所以只有通过异步展示的方法来进一步减少一次生成的节点数。
页面加载时并不立即生成所有节点的HTML元素,而是用户展开多少节点就生成多少节点,节点的生成发生在用户展开这个节点的时候。 这样减少了每次生成的节点数,消除了使用者的等待时间。
而对于节点的检索,这和数据的组织方式有关。
一般的组织方式是使用数组。(解析XML的话太慢,不考虑。只考虑使用json的情况)
但是在数组中检索一个节点的效率实在不敢恭维,如果节点是N个,那么全部节点数据组装起来的效率就是N*N
在节点少的时候不明显,但是如果有1000个节点,那么明显会发觉延迟了10多秒。延迟速度按指数增加。
MzTree(梅花雪)使用了另外一种方式,他没有使用数组而是使用一个简单对象来存放数组。
并且用一个字符串存放节点的索引关系(将所有的节点名(即类的属性名)join()成一个大字符串)
当需要获得子节点的时候使用正则匹配一步获得子节点ID,从而获得子节点。
经过测试发现,使用正则匹配的算法检索节点效率比使用for循环要高出很多。
这个效率已经满足一般大数据jstree的需要。
(具体算法,去参考MzTree梅花雪)
对于一般的Tree可以通过异步初始化节点数据(不是初始化节点HTML)的方法来解决延迟。
但是如果是checkbox-tree(带选择框的树),却不能使用这个方法。因为对于带选择框的JS树,选中根节点的话,子节点应给也被选中。所以选中根节点,子节点必须存在。 所以节点数据需要一次生成。
但问题是即使使用正则匹配的算法提高了效率,仍然会需要一段初始化的时间。
(5000个节点数据全部初始化 使用for需要20-30秒,使用正则匹配算法需要6秒)
那么有没有办法进一步提高效率呢?
按照一般Tree的做法初始化一个节点数据需要初始化这个节点的子节点数据,那么也就需要检索节点的子节点数据。(有点绕口)
这个检索子节点数据看来是比较耗费时间的,而且没有更好的提高检索效率的方法。
既然检索没有办法提速,那么有没有不使用检索获得子节点的方法呢?
答案当然是有的,只要我们更改传递过去的数据结构问题迎刃而解。
于是我们直接传递一个拼装好的树结构JSON(节点包含了子节点的数据,子节点的数据中又包含了子子节点的数据....)
数据结构如下:
{
id : 0
childrean : [
{
id : 01
childrean : [
{
id : 011
childrean : [...]
},
{
id : 012
childrean : [...]
}
]
}
,
{
id : 02
childrean : []
}
]
}
对于这种结构,页面的Tree可以直接使用而无需解析,免去了子节点的检索所耗费的时间,JsTree展示速度大大提高。
一个5000节点的树,节点数据全部初始化只需要500毫秒。
(其实还有一个优点,使用这种结构的数据JSTree容易扩充,稍作修改就可以改成支持数据异步加载的Ajax-Tree)
PS:附件中是一个演示例子,虽然不是最终版本但是可以说明问题。
china_2.js 和 china_2_code.js 是节点数据(UTF-8编码)
参数说明
text 显示节点内容(必须)
id 节点id
checked 选择框选中状态 0 1 2
children 子节点数据
创建一个新节点的方法 new TreeNode( {} );
新建节点可能存在一些问题(单选框选中等问题),节点有checked属性的情况才会出现选择框。
感谢winner720发现的一个BUG
这部分代码要改一下(粗体部分) TreePanel_0.5.rar
//瀑布(遍历所有子节点)
cascade : function(fn, scope, args){
if(fn.call(scope || this, (args==null?this:args)) !== false){
var cs = this.childNodes;
for(var i = 0, len = cs.length; i < len; i++) {
cs[i].cascade(fn, scope, args);
}
}
},
(以前是 args||this,当节点checked是0的时候可能出现返回this,虽然不影响展示结果,但是会造成一定泄露。改成(args==null?this:args)就不会出现问题了)
modify:
TreePanel_test_0.x 测试演示版本
TreePanel_all.rar 完整演示版本
TreePanel_0.5.rar 修正了一个内存泄露BUG
TreePanel_2.2.zip 增加了节点全部展开和全部折叠的方法,修正了节点显示时多余的竖线
TreePanel_2.3.zip 修复节点删除时多余的竖线
备注:附件请下载最新的版本。 (旧的的版本可能存在未修改BUG,没删除只是为了留作做为备份)
这个树最初设计目的是快速展示一颗带选择框的静态树,虽然也提供了节点增加以及删除等功能,但这些没有经过仔细测试,且不是它的长项。
- TreePanel-test.0.2.rar (59.1 KB)
- 下载次数: 1463
- TreePanel-test.0.3r.rar (56 KB)
- 下载次数: 1053
- TreePanel-test.0.3_通过点击树_跳转页面的方法.zip (18.5 KB)
- 下载次数: 1011
- TreePanel_all.rar (85.2 KB)
- 下载次数: 1752
- TreePanel_0.5.rar (121.1 KB)
- 下载次数: 1334
- TreePanel_2.2.zip (84.1 KB)
- 下载次数: 1305
- TreePanel2.3.zip (84.5 KB)
- 下载次数: 1697
评论
你下的版本比较低
或者说删除节点的时候怎样能删除该接点以下的子节点不删除当前接点。
这个东西我找到原因了,由于我数据太多,parseInt(Math.random()*10000)可能会出现重复,我又在后面加了一个
return ('_' + (new Date().getTime()) + '_' + parseInt(Math.random()*10000)+ '_' + parseInt(Math.random()*10000));
然后以后再点击任何东西 就卡死了
<h1 class="title_txt"><span style="font-size: medium;"><a href="http://blog.csdn.net/cutesource/archive/2009/09/13/4549105.aspx">浏览器内存泄漏问题的跟踪与解决</a></span></h1>
全展开的话,无论什么JS Tree都很慢(HTMLElement加载显示很耗时)。
IE6至少要10秒吧。
不行,机制不一样。
(jquery.load是异步将网页加载到HTMLElement中和这个(dtree/梅花雪)没什么关系。)
之后我想设置id在["001","001001","001001001"]中的节点为选中状态,要怎眼设置呢
2、htm中只能引用china_2_code.js,引用china_2.js会提示JS错误(IE6)
3、建议可以设置参数,比如:自动选择子节点(只选中国,不跟选子节点),自动选择父节点(同个父节点下的子节点全选时,不自动选择父节点)。
以上希望楼主可以完善
china_2_code.js 的数据格式是经过转码的,对浏览器支持较好,但是相对大了很多。
china_2.js是未转码前的格式,方便看。
有一点不明白:china_2.js中的pid,是不是多余的?
呵呵,很久的东东了,还有人关注啊。
因为那个JSON数据是工具生成的,所以节点的无关字段也生成出来了。那个pid是多余的对显示树没有用处。
发表评论
-
【转】Closure Compiler 高级模式及更多思考(js文件压缩工具 )
2011-03-16 13:05 1957【转】Closure Compiler 高级模式及更多思考 ... -
Base64编码解码(JavaScript版本)
2010-12-17 10:24 2796<html> <HTML> < ... -
JavaScript 中2个等号与3个等号的区别
2010-12-07 13:21 25329首先,== equality 等同,=== identity ... -
JS前端获取上传文件的大小的方法
2010-11-01 11:04 23486WEB应用中,经常会遇到上传附件的问题,比如有时候会有限制附件 ... -
Javascript设置和获取Textarea的光标位置的方法
2010-07-20 11:05 6602<html><head> <m ... -
ExtJS 3.1.0 中Ext.data.Store关于baseParams的BUG修正
2010-07-15 09:59 4969ExtJs 中,我们使用GirdPanel的时候往往需要给后 ... -
JavaScript JSON 对象深拷贝方法(一例)
2010-07-14 20:08 6468其实深拷贝一个JS对象方法十分简单,只需要两部 1.首先将J ... -
关于Extjs异步session超时问题处理
2010-07-08 17:46 4004关于Extjs异步session超时问题处理对于HTTP超时的 ... -
ExtJS 的组建扩展方法
2010-07-08 17:19 2228ExtJS 是一个不错的JS 类库,提供了很多组建。 ... -
JS 地图移动拖拽
2010-05-26 09:06 2773很简单的东东,就是类似google地图那样,可以拖拽图片。 ... -
JS移动的方块
2010-05-21 09:00 1364PS:WASD上下左右,双击加速. 同时按下WASD任意2个按 ... -
JS对象序列化为JSON对象
2010-04-17 10:07 10610/** * JSON 解析类 * Copyright ... -
JavaScript日期格式化
2010-03-17 11:17 1558DateFormat = (function(){ ... -
Ext智能提示 - Spket(Eclipse插件)
2009-10-23 13:01 1979Spket是Eclipse的一个插件,RIA的开发工具。支持J ... -
带选择框的JS树控件
2009-10-12 11:09 2083前阵子自己写了个带选择框的tree控件,虽然还有一些bug没有 ... -
多附件上传
2008-10-29 23:48 1481uploads.js var UploadBuilder=(f ... -
HTML通过button触发input-file控件上传文件的问题
2008-10-20 10:32 25575出于安全方面的考虑,通过JS修改input-file的valu ... -
模拟线程Timer(JS)
2008-09-22 09:06 1864<script language="Java ... -
转换Unicode (JS)
2008-09-02 17:34 2597<html> <head> ... -
JS-Cookie
2008-08-05 11:33 1324/** * cookie管理对象 */ Cook ...
相关推荐
带选择框的JS树控件 页面创建一个HTMLElement是很耗时的,无论使用createElement或者是是innerHTML都一样。 而且这一步只能一个节点一个节点慢慢地生成,虽然可以通过减小单个节点的HTML元素量的方法提高一些速度,...
带复选框JS树 Javascript树 JS树 树形菜单
js职业选择控件js职业选择控件js职业选择控件js职业选择控件
带复选框JS树 复选框树,很好用!JS权限树,带例子
PB带复选框的树形控件PB带复选框的树形控件PB带复选框的树形控件PB带复选框的树形控件PB带复选框的树形控件PB带复选框的树形控件PB带复选框的树形控件
带复选框的树控件,外加一个MSXML的封装类,可用XML作为数据源,挺实用挺方便,复选框可以有三种状态,选中,不选中,和部分选中,默认情况下所有的节点都带复选框,也能配置不带复选框的项。
WPF多选树控件,在树的基础上,加上多选,并给出获取选中集合的demo,也可以进行其他的转化,满足日常中的使用
树、树形控件(带选择框的),下载了就能用, 用C#或其他语言可以打包成自己的控件。
可扩展js树,包含复选框,链接无限深度扩展树
带复选框的树形控件
选择日期控件(js封装类,javascript,选择日期,文本框选择日期,控件)
实现树的下拉效果,和ExtJs的treecombox大同小异。
照着网上搬下来的,实现MFC复选框的勾选,父节点选择后下级的子节点也会全部选中,。原博客网址http://blog.csdn.net/plzhou/article/details/44922793
利用labview自带的tree控件(不需要安装额外的工具包)创建树形结构,分为3层,主机层,分机层,节点层。还包括一篇介绍tree属性和方法的文档。
1、支持基于HTML定义、Json、XML方式加载树节点 2、支持拖放,动态增加、删除、重命名树节点 3、支持复选框 4、支持复制、剪切、粘贴树节点,动态刷新树 5、提供足够的回调方法: 6、此外,还提供了详细的使用文档 ...
mtree1.0-checkbox-tableTree-带复选框树形控件,带复选框 支持表格转换为树形表格,使用简单。希望对各位有用,同时也望各位朋友提供更多更好的改进建议!
下拉框呈现树控件
powerbuilder中实例18 带复选框的树形控件,适合初学者
HTML页面导入此JS,然后如上JS中说明的申明,然后调用getDateString就可以使用了
带复选框的JS目录树 带复选框的JS目录树 带复选框的JS目录树 带复选框的JS目录树