`
daoger
  • 浏览: 530557 次
  • 性别: Icon_minigender_1
  • 来自: 山东济南
社区版块
存档分类
最新评论

dhtmlxtree异步加载时的一个bug修正

阅读更多
前面已经对dhtmlx的东西有所介绍,使用中也发现了不少bug。 最近在用dhtmlxtree做一个服务器端文件目录浏览与下载的模块是发现一个bug;先说说问题,哈!

由于服务器端供浏览和打包下载的文件和文件夹都很多,一次都加载所有的树节点很费时,只得异步加载,也就是点击节点前面的展开图标时加载该节点下的子节点;但这个时候问题出来了,我的要求是点击展开图标的时候不触发节点的点击事件,只是去加载子节点;但是使用dhtmlxtree时,点击展开图标,这两个事件都触发了,子节点可以展开,但是点击事件触发的时候获取的只能是最后一个子节点的ID。没办法只能自己动手改dhtmlxtree的源码了。

修改的思路是这样子的,加一个判断,判断触发树节点点击事件时获得的ID是否和选中的树节点ID相同,也就是说点击树节点触发点击事件时这个节点肯定是被选中的,但是点击展开图标触发加载子节点事件时它自己的节点不会被选中。

具体对dhtmlxtree.js简单修改如下:
1.修改_selectItem函数,添加判断。
dhtmlXTreeObject.prototype._selectItem = function (node, e) {
	if (this.checkEvent("onSelect")) {
		this._onSSCFold = this.getSelectedItemId();
	}
	this._unselectItems();
	this._markItem(node);
		//daoger 2009-08-05 start
//change the now id when a node is clicked 
	this.fileTreeNowId = this.getSelectedItemId();
//daoger 2009-08-05 end
	if (this.checkEvent("onSelect")) {
		var z = this.getSelectedItemId();
		if (z != this._onSSCFold) {
			this.callEvent("onSelect", [z]);
		}
	}
};

2.修改selectItem方法
dhtmlXTreeObject.prototype.selectItem = function (itemId, mode, preserve) {
	mode = convertStringToBoolean(mode);
	var temp = this._globalIdStorageFind(itemId);
	if ((!temp) || (!temp.parentObject)) {
		return 0;
	}
	if (this.XMLloadingWarning) {
		temp.parentObject.openMe = 1;
	} else {
		this._openItem(temp.parentObject);
	}
	var ze = null;
	if (preserve) {
		ze = new Object;
		ze.ctrlKey = true;
		if (temp.i_sel) {
			ze.skipUnSel = true;
		}
	}
	if (mode) {
		this.onRowSelect(ze, temp.htmlNode.childNodes[0].childNodes[0].childNodes[3], false);
	} else {
		this.onRowSelect(ze, temp.htmlNode.childNodes[0].childNodes[0].childNodes[3], true);
	}
	//daoger 2009-08-05 start
	//to make sure the item id whether is same after loading the sub nodes of this node from server
	this.fileTreeNowId = itemId;
	//daoger 2009-08-05 end
};

3. 添加方法
//daoger 2009-08-05 start
dhtmlXTreeObject.prototype.getFileTreeNowId = function () {
	return this.fileTreeNowId;
};
//daoger  2009-08-05 end

4.修改_loadDynXML函数:
dhtmlXTreeObject.prototype._loadDynXML = function (id, src) {
	src = src || this.XMLsource;
	var sn = (new Date()).valueOf();
	this._ld_id = id;
	//daoger 2009-08-05 start
	this.fileTreeNowId = id;
	this.loadXML(src + getUrlSymbol(src) + "uid=" + sn + "&id=" + encodeURI(id));
	//this.loadXML(src + getUrlSymbol(src) + "uid=" + sn + "&id=" + id);
	//daoger 2009-08-05 end
};

5. 调用dhtmlxtree的节点点击事件时,添加判断当tree.getFileTreeNowId()等于点击处理函数传入的id时才进行操作。
1
0
分享到:
评论
1 楼 100Air 2010-04-29  
问个问题:
dhtmlxtree 在resin 应用服务器能运行吗?我写的程序在tomcat 下可以运行,
但在resin 上无法运行。这还要怎样的配置呢

相关推荐

    (纯Json个人发布Java版)DhtmlxTree+strust2构建异步(动态)加载树

    总结一下,这个项目展示了如何利用Java(Struts2框架)、JSON和DhtmlxTree JavaScript库来构建一个高效的、异步加载的树形视图。对于开发人员来说,这是一个很好的学习资源,可以了解如何将后端数据无缝集成到前端...

    基于dhtmlxtree构建动态维护树

    DHTMLXTree 是一个强大的JavaScript库,它提供了丰富的API接口用于创建和管理复杂的树形结构数据。该组件非常适合用于表示具有层级关系的数据集合,并允许用户通过直观的界面进行交互操作,如增删改查等。 #### 二...

    dhtmlxtree

    总结来说,dhtmlxtree是一个强大的JavaScript树形组件,它通过JSON与服务器进行数据交互,提供灵活的数据加载和丰富的用户交互功能。通过实践项目`dhtmlxtreeTest`,我们可以深入了解dhtmlxtree的用法和与JSON的整合...

    dhtmlxtree的一个实用demo

    【标题】"dhtmlxtree的一个实用demo"指的是一个基于dhtmlxtree的示例项目,这个项目展示了如何在实际应用中使用dhtmlxtree这一JavaScript库来创建交互式的树形菜单或数据结构。dhtmlxtree是一款强大的、可自定义的、...

    dhtmlxTree

    这意味着只有在节点被展开时,其子节点才会被加载到内存中,降低了初始加载时的资源消耗。 总之,dhtmlxTree是构建交互式树形数据视图的强大工具,它的灵活性和可扩展性使其成为开发Web应用程序的理想选择。通过...

    dhtmlXtree树 右dhtmlXtree键菜单

    在实际应用中,你可能还会遇到一些挑战,例如处理异步数据加载、处理节点的层次结构、确保菜单与树结构同步更新等。因此,理解和掌握dhtmlXtree的API及事件机制至关重要。 总的来说,dhtmlXtree的右键菜单功能极大...

    dhtmlXTree1.6

    1. **动态加载**:dhtmlXTree1.6支持异步加载,即节点可以在用户展开时按需加载,降低了页面初次加载时的数据量,提高了用户体验。 2. **自定义图标**:每个节点可以有自定义的打开/关闭图标,以及与之关联的叶子...

    Dhtmlxtree的例子

    总的来说,Dhtmlxtree是一个强大且灵活的JavaScript树形控件,通过XML数据的加载,可以方便地构建出具有多层次结构的界面元素,适用于各种类型的Web应用。这个例子展示了其基础用法,但Dhtmlxtree的强大之处远不止于...

    dhtmlxTree 2.1

    通过监听这些事件,可以实现节点操作的回调函数,例如,当用户点击一个节点时执行特定的操作,或者在节点展开时加载其子节点的数据。 **5. 扩展功能** dhtmlxTree 2.1可能包含了对Ajax支持的改进,允许更流畅的数据...

    专业版dhtmlxtree下载

    此外,它支持动态加载,即在需要时仅加载树的一部分,从而提高页面性能。 pro_dhtmlxtree.js是专业版的核心脚本文件,包含了dhtmlxtree的所有核心功能和优化。这个文件中可能包含了高级的事件处理机制、动画效果、...

    dhtmlxtree_std_full

    - **异步加载**:如果树结构庞大,可以使用异步加载技术,只在需要时加载子节点,减少初次加载的时间。 - **分页**:对于大量数据,可以采用分页策略,只显示部分节点,提升用户体验。 - **缓存策略**:结合...

    JS树:dhtmlxTree

    1. **可扩展性**:dhtmlxTree支持动态加载,可以根据需要仅加载部分节点,减少初次加载时的数据量,提高用户体验。 2. **自定义外观**:该组件提供多种皮肤,可以适应不同的设计风格,同时支持自定义CSS,满足个性...

    dhtmlxtree例子

    使用`new dhtmlXTreeObject("bodydata","100%","100%",0)`创建一个树对象,其中"bodydata"是树的容器ID,"100%"分别代表宽度和高度,0表示不显示图标。 3. **设置图片路径**: `setImagePath("<%=imgPath%>common...

    dhtmlxTree v.3.0

    例如,当用户点击一个节点时,可以触发一个函数来加载与该节点相关的详细信息,或者在拖放操作中重新组织数据结构。 4. **扩展组件集成** 在压缩包中,我们看到了如dhtmlxConnector、dhtmlxDataProcessor等其他...

Global site tag (gtag.js) - Google Analytics