显示树型的页面:
<script type="text/javascript">
$(document).ready(function(){
$("#documentCatalog").tree({
data:{
type: "json",
async: true,
opts:{
method: "POST",
url: "http://localhost:8088/oa/DocumentCatalog/documentCatalogTree.action?type=${param.type}&parentId=-1"
}
},
ui:{
dots : true, // BOOL - dots or no dots
theme_name : "default"// if set to false no theme will be loaded
}
}
);
});
</script>
struts.xml中相应的Action的配置:
<action name="documentCatalogTree" class="documentCatalogTree">
<!-- 不用设置result,直接用PrintWriter输出JSON型的数据 -->
</action>
封装JSTREE使用的JSON数据的类
public class CatalogTree {
private String data;
private String state;
public String getData() {
return data;
}
public void setData(String data) {
this.data = data;
}
public String getState() {
return state;
}
public void setState(String state) {
this.state = state;
}
}
action中的方法:
配置Tree的action:
因为action返回的是树的页面,所以Action应该给页面传递JSON数据
可以使用JSON的struts插件来解决,但处理起来不太好
使用以下方式:
在execute方法中return null,这样struts就不会到struts.xml中找相应的result了而是调用方法返回一个printWriter的数据,
且在返回之前把这个数据封闭成JSON的格式
数据的封装:
返回值一定要注意必须严格符合JSON的格式
有两个方法:一是使用字符串拼接的方式来封装,二是使用一个JSON的工具www.json.org里下载google-gson
使用前者太麻烦且容易出错
@Override
public String execute() throws Exception {
List<DocumentCatalog> catalogs = service.getDocumentCatalogs(type, parentId);
List<CatalogTree> trees = new ArrayList<CatalogTree>();
for(DocumentCatalog catalog : catalogs){
CatalogTree tree = new CatalogTree();
tree.setData(catalog.getName());
tree.setState("closed");
trees.add(tree);
}
Gson gson = new Gson();
String json = gson.toJson(trees);
HttpServletResponse response = ServletActionContext.getResponse();
//在取得out对象之前必须先进行设置
response.setContentType("text/json");
response.setHeader("Cache-Control", "no-cache");
response.setCharacterEncoding("UTF-8");
PrintWriter out = response.getWriter();
out.write(json);
out.flush();
return null;
}
分享到:
相关推荐
**JSTree:高效处理大数据量的JavaScript树形菜单组件** 在Web开发中,树形菜单是一种常见的数据展示形式,用于组织和展示层次结构的数据。JSTree是一款基于JavaScript的开源库,专为构建功能丰富的交互式树形菜单...
最后,前端JavaScript代码会通过Ajax请求从服务器获取到这个转换后的JSON数据,然后使用jsTree的API将其渲染成可视化的树形结构: ```javascript $("#mytree").jstree({ data: { type: "json", url: "${ctx}/...
1. **数据绑定(Data Binding)**:JsTree 可以绑定到 JSON 数据源,方便地从服务器动态加载数据。 2. **多选(Multiple Selection)**:启用 `checkbox` 插件后,用户可以通过勾选节点实现多选操作。 3. **拖放...
初始化一个jsTree实例,你需要指定一个DOM元素作为树的容器,并提供配置对象来定制行为和外观: ```javascript $('#jstree_demo_div').jstree({ 'core': { 'data': [ { "text": "节点1", "children": [ { "text...
- **数据源**:jsTree可以从JSON、XML等多种数据格式加载数据。 - **事件处理**:提供丰富的事件接口,如`select_node`、`rename_node`等,方便开发者进行扩展和交互处理。 - **插件系统**:jsTree有强大的插件机制...
3. **初始化jsTree**:使用`$(selector).jstree(options)`方法初始化树控件,`selector`是树容器的选择器,`options`是一个包含配置项的对象,用于设置初始状态、加载数据的方式、使用的插件等。 4. **处理事件**:...
1. **数据绑定**:jsTree可以接受JSON、HTML或XML格式的数据,轻松地将后台数据转化为可视化的树结构。 2. **多态性**:支持多种树节点类型,如文本、图标、链接等,可以通过配置JSON数据实现。 3. **交互性**:提供...
总结来说,基于jstree使用AJAX请求获取数据形成树的过程主要包括以下步骤: 1. 初始化jstree,设置核心属性、数据加载方式和类型、状态管理等。 2. 使用`$.ajax`发送GET请求,获取JSON数据。 3. 处理返回的JSON数据...
在移动设备上,为了有效地展示层次结构数据,如文件系统、组织架构或导航菜单,"手机端js tree"成为了一种实用的解决方案。这个技术基于JavaScript,专为智能手机和平板电脑等移动端设备设计,提供了可自定义的树形...
动态加载是 jsTree 的核心特性之一,它允许在用户滚动或展开树节点时按需加载数据,而不是一次性加载所有数据。这种机制对于处理大量数据特别有用,因为它减少了初始页面加载时间,提高了用户体验。通过设置适当的...
- **树状结构**:jsTree通过节点和层级关系来呈现数据,每个节点可以有子节点,形成树形层次。 - **核心功能**:包括创建、删除、移动、展开/折叠节点,以及节点的选中、拖放操作。 - **插件系统**:jsTree通过...
【无极限可刷新js树 js tree】是一种基于JavaScript实现的动态树形菜单组件,它具有多项功能特性,适用于构建高效且交互性强的Web界面。这个组件的特点在于其灵活性和兼容性,无需依赖任何大型框架,使得它在各种...
jsTree是一款强大的JavaScript库,专门用于创建、操作和展示具有层级结构的数据,例如构建可交互的目录树或文件系统浏览器。它提供了丰富的API和各种主题,可以方便地集成到任何Web应用中,提供丰富的交互功能,如...
jsTree支持动态加载数据,这意味着当用户展开一个节点时,其子节点才会被请求并显示。这种机制可以提高页面加载速度,特别是在处理大量数据时。动态加载通常与服务器端接口结合使用,通过Ajax请求获取子节点数据。 ...
**jstree.min.js** 是一个基于 jQuery 的交互式树形视图插件,它允许在网页中创建和管理结构化的目录或数据展示。这款插件以其轻量级、高度可定制和易于使用的特性而受到开发者们的欢迎。下面将详细介绍 jstree 的...
JS Tree 是一个基于JavaScript的库,专门用于在Web页面上创建交互式的目录树结构,这种结构类似于Windows操作系统中的文件夹树,能够帮助用户以层级方式浏览和操作数据。 目录树在Web应用中有很多用途,例如: 1. ...
"jstree v1.0 实现树形结构" 是一个关于使用jstree库的特定版本(v1.0)来构建和管理树状数据结构的教程或项目。jstree是一个流行的JavaScript库,它允许开发者在网页上创建交互式的树视图,通常用于文件系统、组织...
1. **节点 (Nodes)**:jsTree 中的基本元素,可以是树的根节点或子节点。每个节点包含文本、ID、图标等属性,并可拥有子节点。 2. **容器 (Container)**:通常是一个 HTML 元素,如 `div`,用于承载整个树结构。 3...
可以使用 AJAX 请求从服务器获取 JSON 数据,然后用这些数据填充 jsTree。例如,使用 jQuery 的 `ajax` 方法: ```javascript $.ajax({ url: 'your/java/service', type: 'GET', dataType: 'json', success: ...