`

treeview 局部刷新问题

阅读更多
/*
 * Async Treeview 0.1 - Lazy-loading extension for Treeview
 * 
 * http://bassistance.de/jquery-plugins/jquery-plugin-treeview/
 *
 * Copyright (c) 2007 Jörn Zaefferer
 *
 * Dual licensed under the MIT and GPL licenses:
 *   http://www.opensource.org/licenses/mit-license.php
 *   http://www.gnu.org/licenses/gpl.html
 *
 * Revision: $Id$
 *
 */

;(function($) {

function load(settings, root, child, container) {
	//rnUrl清除缓存
	var rndUrl = settings.url + "?rnd=" + Math.round(Math.random()*10000);
	$.getJSON(rndUrl , {root: root}, function(response) {
		function createNode(parent) {
			var current = $("<li/>").attr("id", this.id || "").html("<span>" + this.text + "</span>").appendTo(parent);
			if (this.classes) {
				current.children("span").addClass(this.classes);
			}
			if (this.expanded) {
				current.addClass("open");
			}
			if (this.hasChildren || this.children && this.children.length) {
				var branch = $("<ul/>").appendTo(current);
				if (this.hasChildren) {
					current.addClass("hasChildren");
					createNode.call({
						text:"placeholder",
						id:"placeholder",
						children:[]
					}, branch);
				}
				if (this.children && this.children.length) {
					$.each(this.children, createNode, [branch])
				}
			}
		}
		$.each(response, createNode, [child]);
        $(container).treeview({add: child});
    });
}

var proxied = $.fn.treeview;
$.fn.treeview = function(settings) {
	if (!settings.url) {
		return proxied.apply(this, arguments);
	}
	var container = this;
	load(settings, "source", this, container);
	var userToggle = settings.toggle;
	return proxied.call(this, $.extend({}, settings, {
		collapsed: true,
		toggle: function() {
			var $this = $(this);
			if ($this.hasClass("hasChildren")) {
				var childList = $this.removeClass("hasChildren").find("ul");
				childList.empty();
				load(settings, this.id, childList, container);
			}
			if (userToggle) {
				userToggle.apply(this, arguments);
			}
		}
	})).bind({
		// modified by Timm Maass http://www.timm-maass.de/
		// reload item by id, example:
		// $('#treeid').treeview({reload:['nodeid']});
		reload : function(event, myvar) {
		var item = $(this).find("#"+myvar);                 
		var childList = item.find("ul");
		childList.empty();                     
		load(settings, myvar[0], childList, container);
}
}
);
};

})(jQuery);

 http://forum.jquery.com/topic/jquery-treeview-async-treeview-reload-branche

 

分享到:
评论
1 楼 vdny 2012-03-05  

我还以为提供下载链接是源代码,原来又是一个博客地址

相关推荐

    TreeView无刷新操作

    在这个特定的场景中,"TreeView无刷新操作"指的是在对`TreeView`进行添加、删除和修改等操作时,无需刷新整个页面,而是通过异步技术实现局部更新,提高用户体验。 首先,我们要理解这个实现的核心技术:`Ajax`...

    ASP.NET treeView异步加载节点

    UpdatePanel允许局部刷新页面,而无需整个页面刷新。将TreeView放入UpdatePanel内,可以确保只有TreeView区域更新,提高用户体验。 7. **客户端脚本**:在客户端,可能需要编写JavaScript或jQuery代码来处理...

    asp.net 中用 Ajax实现 treeview

    在本案例中,我们关注的是如何利用Ajax来实现在一个TreeView控件上的无刷新操作。TreeView控件在ASP.NET中是一种非常有用的数据呈现方式,它可以展示层次化的数据结构,例如目录结构、组织结构图等。 首先,让我们...

    js 操作的一个TreeView

    2. **无刷新操作**: 在这个特定的场景中,"无刷新"指的是用户与TreeView交互时,页面不进行完全重载。这通常是通过使用Ajax(异步JavaScript和XML)技术实现的,它允许后台与服务器交换数据并局部更新页面,而不影响...

    自编ASP.NET中动态TreeView实例

    - 结合AJAX技术,实现局部刷新,提高用户体验。 - 添加权限控制,根据用户角色展示不同级别的菜单。 总之,这个实例通过ASP.NET、三层架构和SQL Server 2005展示了动态生成TreeView菜单的过程,对于学习和理解Web...

    tree+grid 实现treeview 的表格显示

    可以使用AJAX技术实现局部刷新,提高用户体验。 4. **JavaScript库**:有许多JavaScript库,如jQuery、React、Angular等,提供了实现Tree+Grid的功能。例如,jQuery的jstree插件可以创建交互式的树,而Bootstrap的...

    ASP.NET2.0(C#)TreeView绑定SQL数据库、以及对其进行添加修改删除

    - 反馈更新:完成数据操作后,刷新TreeView以反映最新的数据库状态,确保用户界面与数据库同步。 6. **WebDBManage与database文件**: - `WebDBManage`可能是一个包含处理数据库操作的C#类库或代码文件,比如用于...

    TreeView控件ajax操作实例

    本实例将探讨如何利用jQuery的AJAX功能与服务器端的TreeView控件进行交互,以实现无刷新的动态更新。在jQuery中,AJAX(Asynchronous JavaScript and XML)是一种创建异步网页应用的技术,它允许在不重新加载整个...

    p哥的dome TreeView 关联 GridView 试用ajax UpdatePanel

    通过这种方式,用户可以选择`TreeView`中的任意节点,`GridView`会动态加载与所选节点关联的数据,无需等待整个页面的刷新,提高了应用的响应速度和用户体验。 总之,`TreeView`与`GridView`的关联结合`Ajax`和`...

    web树TreeView控件的开发应用之报表收藏夹

    这意味着当用户进行收藏、删除等操作时,页面不会完全刷新,而是通过AJAX(Asynchronous JavaScript and XML)技术局部更新内容。这降低了页面加载时间,提高了响应速度。 4. **拖放功能**: TreeView控件支持拖放...

    Treeview动态添加用户控件传值和取值的实例代码

    当`TreeView`中的复选框被点击时,由于`ScriptManager`的存在,页面会通过AJAX方式进行局部刷新,而不是整个页面的完整回发,这样提高了用户体验。 在`&lt;ContentTemplate&gt;`中,`&lt;asp:TreeView&gt;`的`Nodes`属性下定义...

    微软asp.net树形菜单控件中文版

    6. **异步更新**:在ASP.NET AJAX环境中,TreeView控件可以与UpdatePanel结合使用,实现局部刷新,提供更好的用户体验。 7. **国际化支持**:中文版的TreeView控件通常包含了中文语言包,使得控件的提示文字和错误...

    使用AJAX.NET和ContextMenu的TreeView

    这样,用户在与TreeView交互时,不会感觉到页面的刷新,提升了应用的响应速度。 接下来,我们看看如何实现这个功能: 1. **添加控件**:首先,在页面上添加TreeView和UpdatePanel控件,并配置TreeView以展示数据源...

    精美的ajax树型菜单

    AJAX(Asynchronous JavaScript and XML)是一种在无需刷新整个页面的情况下,能够更新部分网页的技术,它通过后台与服务器异步交换数据并局部刷新页面,从而实现了更流畅的用户体验。 【标签】"ajax" 指的是这个...

    AJAXv1.0组件

    **UpdatePanel**则是实现局部刷新的关键,它包裹需要异步更新的控件,通过Triggers配置触发更新的事件,实现无刷新更新。 **Timer**控件则可以定时触发页面的更新,通常与UpdatePanel配合使用,实现定时刷新或者...

    iframe异步加载实现点击左边菜单加载右边内容实例讲解

    "&gt;局部刷新(框架加载页面) 我是隐藏的,点击局部刷新之后 我就显示,页面加载我不会消失 ; float: right;"&gt; ; width: 100%; height: 99.4%;'&gt; ``` 在JavaScript部分,我们使用jQuery的$(document).ready()...

    ajax _asp.net 开发的的树

    Ajax通过在后台异步处理数据,只更新页面上的部分区域,从而实现了局部刷新,提升了Web应用的响应速度。而ASP.NET提供了一整套工具和框架,包括ASP.NET AJAX库,使得开发人员能够轻松地集成Ajax功能到现有的ASP.NET...

    AJAX最新控件大全

    - 数据展示控件:比如UpdatePanel,实现局部刷新,避免整个页面刷新;DataPager,用于分页显示数据。 - 动画效果控件:例如SlideShowExtender,创建幻灯片效果;CollapsiblePanelExtender,折叠/展开面板。 - ...

Global site tag (gtag.js) - Google Analytics