`

JSTREE从后台取得数据并形成树

    博客分类:
  • OA
阅读更多

显示树型的页面:

	<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(js写的树形菜单,支持加载10000节点以上)

    **JSTree:高效处理大数据量的JavaScript树形菜单组件** 在Web开发中,树形菜单是一种常见的数据展示形式,用于组织和展示层次结构的数据。JSTree是一款基于JavaScript的开源库,专为构建功能丰富的交互式树形菜单...

    使用jsTree实现js树形结构

    **jsTree:构建前端树形结构的利器** jsTree 是一个强大的 JavaScript 库,专用于在 Web 页面上创建交互式的树形结构。它基于纯 JavaScript 编写,无需依赖其他库,因此对于初学者和有经验的开发者来说,都是一个...

    基于jstree使用AJAX请求获取数据形成树

    jstree是一个强大的JavaScript库,它允许我们创建交互式的树视图,而AJAX则用于异步从服务器获取数据,这两者的结合使得我们可以构建实时更新的数据树。 首先,我们要了解jstree的核心配置。在示例代码中,`"core"`...

    基于jsTree的无限级树JSON数据的转换

    最后,前端JavaScript代码会通过Ajax请求从服务器获取到这个转换后的JSON数据,然后使用jsTree的API将其渲染成可视化的树形结构: ```javascript $("#mytree").jstree({ data: { type: "json", url: "${ctx}/...

    JsTree 最详细教程及完整实例

    1. **数据绑定(Data Binding)**:JsTree 可以绑定到 JSON 数据源,方便地从服务器动态加载数据。 2. **多选(Multiple Selection)**:启用 `checkbox` 插件后,用户可以通过勾选节点实现多选操作。 3. **拖放...

    jsTree中文文档

    初始化一个jsTree实例,你需要指定一个DOM元素作为树的容器,并提供配置对象来定制行为和外观: ```javascript $('#jstree_demo_div').jstree({ 'core': { 'data': [ { "text": "节点1", "children": [ { "text...

    jsTree树形菜单

    - **数据源**:jsTree可以从JSON、XML等多种数据格式加载数据。 - **事件处理**:提供丰富的事件接口,如`select_node`、`rename_node`等,方便开发者进行扩展和交互处理。 - **插件系统**:jsTree有强大的插件机制...

    jstree目录树控件

    3. **初始化jsTree**:使用`$(selector).jstree(options)`方法初始化树控件,`selector`是树容器的选择器,`options`是一个包含配置项的对象,用于设置初始状态、加载数据的方式、使用的插件等。 4. **处理事件**:...

    jsTree中文api

    总结来说,jsTree提供了全面的API来处理树形数据,无论是在基本的操作,如添加、删除和移动节点,还是更复杂的事件处理和动态加载数据,都具有灵活的接口。结合jsTree的中文API文档,开发者可以轻松地在项目中集成和...

    jsTree 左侧导航树大集合

    1. **数据绑定**:jsTree可以接受JSON、HTML或XML格式的数据,轻松地将后台数据转化为可视化的树结构。 2. **多态性**:支持多种树节点类型,如文本、图标、链接等,可以通过配置JSON数据实现。 3. **交互性**:提供...

    jsTree大集合 各种树形结构

    jsTree 是一个功能丰富的JavaScript库,专门用于创建、操作和展示树形数据结构。它以其灵活性、易用性和强大的API著称,适用于构建网页上的交互式树形菜单和图表。在这个“jsTree大集合”中,你将找到一系列关于js...

    jsTree树控件(基于jQuery, 超强悍)

    3. **数据源**:jsTree支持从JSON、HTML、XML等多种数据格式加载数据,并可以动态加载和异步更新树节点。 4. **可配置性**:通过配置选项,可以自定义节点的外观、行为、图标、拖放行为等,满足个性化需求。 5. **...

    手机端js tree

    在移动设备上,为了有效地展示层次结构数据,如文件系统、组织架构或导航菜单,"手机端js tree"成为了一种实用的解决方案。这个技术基于JavaScript,专为智能手机和平板电脑等移动端设备设计,提供了可自定义的树形...

    jsTree 很好用的动态加载数

    动态加载是 jsTree 的核心特性之一,它允许在用户滚动或展开树节点时按需加载数据,而不是一次性加载所有数据。这种机制对于处理大量数据特别有用,因为它减少了初始页面加载时间,提高了用户体验。通过设置适当的...

    jsTree.v.1.0中文文档

    - **树状结构**:jsTree通过节点和层级关系来呈现数据,每个节点可以有子节点,形成树形层次。 - **核心功能**:包括创建、删除、移动、展开/折叠节点,以及节点的选中、拖放操作。 - **插件系统**:jsTree通过...

    可后台控制的纯JS树Tree

    在这个例子中,`#tree`是树结构将在页面上渲染的位置,`jstree`方法用于初始化JS Tree,并传入数据配置。通过调整配置项,可以实现不同的功能和样式效果。 总的来说,【可后台控制的纯JS树Tree】是一个强大的前端...

    无极限可刷新js树 js tree

    【无极限可刷新js树 js tree】是一种基于JavaScript实现的动态树形菜单组件,它具有多项功能特性,适用于构建高效且交互性强的Web界面。这个组件的特点在于其灵活性和兼容性,无需依赖任何大型框架,使得它在各种...

    jsTree基本例子

    jsTree是一款强大的JavaScript库,专门用于创建、操作和展示具有层级结构的数据,例如构建可交互的目录树或文件系统浏览器。它提供了丰富的API和各种主题,可以方便地集成到任何Web应用中,提供丰富的交互功能,如...

Global site tag (gtag.js) - Google Analytics