/*
* 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
分享到:
相关推荐
在这个特定的场景中,"TreeView无刷新操作"指的是在对`TreeView`进行添加、删除和修改等操作时,无需刷新整个页面,而是通过异步技术实现局部更新,提高用户体验。 首先,我们要理解这个实现的核心技术:`Ajax`...
UpdatePanel允许局部刷新页面,而无需整个页面刷新。将TreeView放入UpdatePanel内,可以确保只有TreeView区域更新,提高用户体验。 7. **客户端脚本**:在客户端,可能需要编写JavaScript或jQuery代码来处理...
在本案例中,我们关注的是如何利用Ajax来实现在一个TreeView控件上的无刷新操作。TreeView控件在ASP.NET中是一种非常有用的数据呈现方式,它可以展示层次化的数据结构,例如目录结构、组织结构图等。 首先,让我们...
2. **无刷新操作**: 在这个特定的场景中,"无刷新"指的是用户与TreeView交互时,页面不进行完全重载。这通常是通过使用Ajax(异步JavaScript和XML)技术实现的,它允许后台与服务器交换数据并局部更新页面,而不影响...
- 结合AJAX技术,实现局部刷新,提高用户体验。 - 添加权限控制,根据用户角色展示不同级别的菜单。 总之,这个实例通过ASP.NET、三层架构和SQL Server 2005展示了动态生成TreeView菜单的过程,对于学习和理解Web...
可以使用AJAX技术实现局部刷新,提高用户体验。 4. **JavaScript库**:有许多JavaScript库,如jQuery、React、Angular等,提供了实现Tree+Grid的功能。例如,jQuery的jstree插件可以创建交互式的树,而Bootstrap的...
- 反馈更新:完成数据操作后,刷新TreeView以反映最新的数据库状态,确保用户界面与数据库同步。 6. **WebDBManage与database文件**: - `WebDBManage`可能是一个包含处理数据库操作的C#类库或代码文件,比如用于...
本实例将探讨如何利用jQuery的AJAX功能与服务器端的TreeView控件进行交互,以实现无刷新的动态更新。在jQuery中,AJAX(Asynchronous JavaScript and XML)是一种创建异步网页应用的技术,它允许在不重新加载整个...
通过这种方式,用户可以选择`TreeView`中的任意节点,`GridView`会动态加载与所选节点关联的数据,无需等待整个页面的刷新,提高了应用的响应速度和用户体验。 总之,`TreeView`与`GridView`的关联结合`Ajax`和`...
这意味着当用户进行收藏、删除等操作时,页面不会完全刷新,而是通过AJAX(Asynchronous JavaScript and XML)技术局部更新内容。这降低了页面加载时间,提高了响应速度。 4. **拖放功能**: TreeView控件支持拖放...
当`TreeView`中的复选框被点击时,由于`ScriptManager`的存在,页面会通过AJAX方式进行局部刷新,而不是整个页面的完整回发,这样提高了用户体验。 在`<ContentTemplate>`中,`<asp:TreeView>`的`Nodes`属性下定义...
6. **异步更新**:在ASP.NET AJAX环境中,TreeView控件可以与UpdatePanel结合使用,实现局部刷新,提供更好的用户体验。 7. **国际化支持**:中文版的TreeView控件通常包含了中文语言包,使得控件的提示文字和错误...
这样,用户在与TreeView交互时,不会感觉到页面的刷新,提升了应用的响应速度。 接下来,我们看看如何实现这个功能: 1. **添加控件**:首先,在页面上添加TreeView和UpdatePanel控件,并配置TreeView以展示数据源...
AJAX(Asynchronous JavaScript and XML)是一种在无需刷新整个页面的情况下,能够更新部分网页的技术,它通过后台与服务器异步交换数据并局部刷新页面,从而实现了更流畅的用户体验。 【标签】"ajax" 指的是这个...
**UpdatePanel**则是实现局部刷新的关键,它包裹需要异步更新的控件,通过Triggers配置触发更新的事件,实现无刷新更新。 **Timer**控件则可以定时触发页面的更新,通常与UpdatePanel配合使用,实现定时刷新或者...
">局部刷新(框架加载页面) 我是隐藏的,点击局部刷新之后 我就显示,页面加载我不会消失 ; float: right;"> ; width: 100%; height: 99.4%;'> ``` 在JavaScript部分,我们使用jQuery的$(document).ready()...
Ajax通过在后台异步处理数据,只更新页面上的部分区域,从而实现了局部刷新,提升了Web应用的响应速度。而ASP.NET提供了一整套工具和框架,包括ASP.NET AJAX库,使得开发人员能够轻松地集成Ajax功能到现有的ASP.NET...
- 数据展示控件:比如UpdatePanel,实现局部刷新,避免整个页面刷新;DataPager,用于分页显示数据。 - 动画效果控件:例如SlideShowExtender,创建幻灯片效果;CollapsiblePanelExtender,折叠/展开面板。 - ...