`

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();
}
}
}
 
分享到:
评论

相关推荐

    jquery ajax TreeView asp.net改进版

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

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

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

    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 $('#...

    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列表转换为...

    jquery 动态加载树

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

    AjaxTree实现动态加载

    现代Web开发中,有许多JavaScript库和框架提供了AjaxTree的实现,如jQuery UI的Treeview插件、AngularJS的ng-tree、React的react-treebeard等。它们提供了一套完整的API和预定义的样式,开发者可以根据需求进行配置...

    TreeView控件ajax操作实例

    总的来说,通过结合jQuery的AJAX功能和ASP.NET 2.0的TreeView控件,我们可以创建一个交互式的树状视图,实现节点的动态加载和无刷新操作,提高用户体验。理解这些技术对于开发高效、响应式的Web应用程序至关重要。

    Jquery TreeView结合

    4. **权限控制**:在用户控件中添加权限检查,根据用户角色动态调整TreeView的可见性和可操作性。 综上所述,jQuery TreeView与.NET用户控件的结合,可以构建出功能强大、易于维护的树形结构界面,适用于各种复杂的...

    为jQuery.Treeview添加右键菜单的实现代码

    先上图: jquery.treeview 数据通过JSON数据加载,有需要的朋友,可以通jquery的AJAX方法获取相关的JSON数据 json的数据格式:{“id”:1,”parentid”:0,”title”:”标题”,”children”:[{ …}]} 需要两个jQuery ...

    Ajax框架——jquery树

    2. Ajax技术:学习如何使用jQuery的$.ajax()或$.getJSON()方法进行异步数据请求。 3. JSON数据格式:掌握如何序列化和解析JSON,它是Ajax通信中常见的数据交换格式。 4. 树形插件的使用:了解如何配置和定制插件,以...

    jquery_treeview

    3. **数据动态加载**:若数据来自服务器,可以使用AJAX异步加载,结合`$.getJSON`或`$.ajax`方法。 ### 八、总结 jQuery Treeview凭借其简洁的API和强大的功能,成为实现树形视图的首选工具。通过理解其基本原理,...

    JQuery实例动态生成树

    在网页开发中,jQuery是一个非常流行的JavaScript库,它极大地简化了DOM操作、事件处理、动画效果以及Ajax交互。本实例将探讨如何利用jQuery来动态生成树形结构,这对于展示层次化数据或者构建导航菜单非常实用。 ...

Global site tag (gtag.js) - Google Analytics