`

jquery ajax json4 treeview动态加载

阅读更多

<ul id="tree" class="filetree treeview-famfamfam">
</ul>
 

动态加载的时候,只会在第一次展开的时候发送服务器,再次展开是不发送的,类似jquey的one事件处理。 

treeview每次请求都是get请求,会自动带一个"root"的url参数,第一次是"source"。 
以后的话都以li的id作为参数,即你在json数据中设置的"id"值。如果json中某个bool值的项目你不需要,就不写,设置false没有效果的。 
还需要注意的是treeview的jquery.treeview.anync.js有一个bug,原来是: 
current.children("span").addClass(this.classes);这样有异常的,要改成字符串形式,如下: 
current.children("span").addClass(""+this.classes); 

response.setHeader("Cache-Control", "no-cache");   
String parameter = request.getParameter("root");
if (parameter != null)
{
//第一次加载的时候root是"source", 以后是id的值
if (parameter.equals("source"))
{
try
{
JSONArray baseArray = new JSONArray();
for (int i = 0; i < 3; i++)
{
JSONObject baseObject = new JSONObject();
baseObject.append("text", "base"+i);
baseObject.append("id", i);
/*如果不需要某个设置就不写,设置false没有效果的*/
//baseObject.append("expanded", true); 
baseObject.append("classes", "folder");
baseObject.append("hasChildren", true);
baseArray.put(baseObject);
}
String json = baseArray.toString();
System.out.println(json);
response.setHeader("Cache-Control", "no-cache");   
response.setContentType("application/json");
byte[] bs = json.getBytes("utf-8");
response.setContentLength(bs.length);
OutputStream os = response.getOutputStream();
os.write(bs);
os.flush();
os.close();
}
catch (JSONException e)
{
e.printStackTrace();
}
}
else 
{
try
{
JSONArray childArray = new JSONArray();
for (int i = 0; i < 2; i++)
{
JSONObject childObject = new JSONObject();
childObject.append("text", "base is "+parameter+" child" + i);
childObject.append("id", i);
/* 如果不需要某个设置就不写,设置false没有效果的 */
// baseObject.append("expanded", true);
childObject.append("classes", "folder");
childObject.append("hasChildren", true);
childArray.put(childObject);
}
String json = childArray.toString();
System.out.println(json);
response.setHeader("Cache-Control", "no-cache");
response.setContentType("application/json");
byte[] bs = json.getBytes("utf-8");
response.setContentLength(bs.length);
OutputStream os = response.getOutputStream();
os.write(bs);
os.flush();
os.close();
}
catch (JSONException e)
{
e.printStackTrace();
}
}
}
 
分享到:
评论

相关推荐

    struts2+Jquery+json+treeview 动态加载树菜单

    标题中的“struts2+Jquery+json+treeview 动态加载树菜单”涉及的是一个Web开发中的技术组合,主要用于创建交互式的、可动态加载的数据展示界面。下面将详细解释这些技术及其在实现动态树菜单中的作用。 Struts2是...

    jquery ajax TreeView asp.net改进版

    jquery的treeview 在显示大层次树是会卡死浏览器,我结合http://www.cnblogs.com/xuanye/archive/2009/10/26/1590250.html的改进版做的这个改进版(因为很多人没读他的源码,不知道怎么请求节点的处理页面),把asp...

    jQuery插件TreeView异步加载树

    本篇文章将深入探讨jQuery插件中的“TreeView”组件,特别是关于其异步加载树的实现。 TreeView是一种常见的UI元素,它通常用于展示层次结构的数据,如文件系统、组织结构等。在网页应用中,TreeView插件能够以树形...

    jsontree (jquery.treeview.js) jQuery插件版

    **jQuery Treeview插件——jsontree解析及应用** `jQuery Treeview` 是一个非常流行的JavaScript库,用于将HTML表格或无序列表转换为可交互的树状视图。在这个特定的版本——`jsontree`,它进一步扩展了功能,能够...

    bootstrap-treeview动态加载后台数据菜单

    在Bootstrap Treeview中,我们可以使用jQuery的`$.ajax`方法来实现这个功能。首先,定义一个URL,该URL指向后台接口,该接口应返回JSON格式的树形数据。然后,通过Ajax调用这个URL,获取数据后将其传递给Treeview...

    AJax Jquery实现的动态树实例

    本实例重点讲解如何利用Ajax和Jquery技术来创建动态树,提供不同风格、样式和功能的实现方法。下面将详细阐述相关知识点。 一、Ajax(异步JavaScript和XML) Ajax的核心是通过JavaScript实现页面的局部刷新,无需...

    jquery TreeView源码实例

    此外,jQuery TreeView还支持异步加载数据,这对于处理大量数据或者动态生成树结构特别有用。你可以通过`data-url`属性指定一个返回JSON数据的URL,当节点展开时,TreeView会自动请求数据并渲染。 总之,jQuery ...

    jquery treeview async

    在“jquery treeview async”这个场景下,我们关注的是如何利用Java后端和Servlet技术来实现异步(async)加载树形菜单。这种方法能够显著提高用户体验,因为它仅在用户需要时加载数据,而不是一次性加载所有节点。 ...

    jquery treeview实例

    综上所述,jQuery Treeview实例通过Ajax与PHP后台配合,实现了动态加载数据的功能。用户界面因此能够根据需求只加载必要的数据,提高页面性能。同时,通过jQuery Treeview提供的丰富API和事件,我们可以轻松地扩展和...

    jquery treeview控件

    - 如果需要动态加载,还需添加事件监听和Ajax请求代码。 7. **扩展功能**:jQuery Treeview除了基本的展开、折叠,还可以实现节点的点击事件、拖放操作、自定义图标等高级功能。通过插件的API和jQuery事件,开发者...

    TreeView的动态绑定(高效型)_Ajax

    5. **客户端响应处理**:在Ajax回调函数中,解析接收到的JSON数据,然后使用JavaScript动态地添加新的TreeNode到TreeView中。这一步骤可能需要使用递归,因为TreeView的结构通常是树形的,可能有无限层级。 6. **...

    jQuery Treeview异步树实现

    4. **异步加载数据**:默认情况下,jQuery Treeview是同步加载的。为了实现异步加载,我们需要自定义`data`选项。当用户展开一个节点时,可以触发一个AJAX请求来获取子节点数据。例如: ```javascript $('#...

    jquery-treeview

    《jQuery Treeview 深入解析与实践指南》 jQuery Treeview 是一款广泛使用的JavaScript库,专门用于将HTML列表转换为交互式的树状视图。它使得数据的组织和展示更加直观,尤其适用于目录结构、菜单系统或者层级关系...

    ASP.NET treeView异步加载节点

    9. **解析返回的数据**:在客户端的Ajax回调函数中,解析接收到的XML或Json数据,并使用TreeView的客户端API(如`$find('treeviewID').populateNode`)来添加新的节点。 10. **优化性能**:考虑使用分页和缓存策略...

    动态树的管理程序(基于jQuery Treeview实现)-java源码

    总的来说,这个项目展示了如何结合使用jQuery Treeview进行前端展示,以及Struts2、Spring和Hibernate这三大Java EE框架进行后端处理,构建一个动态的、交互式的树状数据管理界面。理解并掌握这些技术对于提升Web...

    jquery.treeview

    本篇将深入探讨如何利用jQuery Treeview构建动态树,并介绍其与Ajax的集成,以便实时更新和加载数据。 一、jQuery Treeview 插件简介 jQuery Treeview 是一款基于jQuery库的开源插件,主要用于将HTML列表转换为...

    SSH+Jquery+ajx TreeView源码

    这个项目将TreeView与Ajax结合,通过后台SSH框架从数据库动态获取节点数据,实现了节点的异步加载。当用户展开或点击树形菜单的某个节点时,jQuery会发起Ajax请求,服务器根据请求返回相应的子节点信息,然后在...

    jquery 动态加载树

    3. **Ajax请求**:在事件处理函数中,使用jQuery的`$.ajax`或`$.getJSON`方法向服务器发送请求,获取树的下级节点数据。 ```javascript $.ajax({ url: 'your-api-url', type: 'GET', success: function(data) {...

    jQuery 学习第六课 实现一个Ajax的TreeView

    jQuery的Ajax方法可以用来向服务器发送请求,并将返回的数据显示在TreeView中。 #### 3.实现AjaxTreeView的步骤 1. **服务器端数据准备**:首先,需要在服务器端定义一个类来存储文件信息,这个类包含文件的完整...

Global site tag (gtag.js) - Google Analytics