`

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的无限级树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 左侧导航树大集合

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

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

    总结来说,基于jstree使用AJAX请求获取数据形成树的过程主要包括以下步骤: 1. 初始化jstree,设置核心属性、数据加载方式和类型、状态管理等。 2. 使用`$.ajax`发送GET请求,获取JSON数据。 3. 处理返回的JSON数据...

    手机端js tree

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

    jsTree 很好用的动态加载数

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

    jsTree.v.1.0中文文档

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

    无极限可刷新js树 js tree

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

    jsTree基本例子

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

    jsTree动态tree

    jsTree支持动态加载数据,这意味着当用户展开一个节点时,其子节点才会被请求并显示。这种机制可以提高页面加载速度,特别是在处理大量数据时。动态加载通常与服务器端接口结合使用,通过Ajax请求获取子节点数据。 ...

    jstree.min.js.zip

    **jstree.min.js** 是一个基于 jQuery 的交互式树形视图插件,它允许在网页中创建和管理结构化的目录或数据展示。这款插件以其轻量级、高度可定制和易于使用的特性而受到开发者们的欢迎。下面将详细介绍 jstree 的...

    Js Tree JS目录树

    JS Tree 是一个基于JavaScript的库,专门用于在Web页面上创建交互式的目录树结构,这种结构类似于Windows操作系统中的文件夹树,能够帮助用户以层级方式浏览和操作数据。 目录树在Web应用中有很多用途,例如: 1. ...

    jstree v1.0 实现树形结构

    "jstree v1.0 实现树形结构" 是一个关于使用jstree库的特定版本(v1.0)来构建和管理树状数据结构的教程或项目。jstree是一个流行的JavaScript库,它允许开发者在网页上创建交互式的树视图,通常用于文件系统、组织...

    jsTree实例,jsTree实例

    1. **节点 (Nodes)**:jsTree 中的基本元素,可以是树的根节点或子节点。每个节点包含文本、ID、图标等属性,并可拥有子节点。 2. **容器 (Container)**:通常是一个 HTML 元素,如 `div`,用于承载整个树结构。 3...

    jsTree JAVA例子

    可以使用 AJAX 请求从服务器获取 JSON 数据,然后用这些数据填充 jsTree。例如,使用 jQuery 的 `ajax` 方法: ```javascript $.ajax({ url: 'your/java/service', type: 'GET', dataType: 'json', success: ...

Global site tag (gtag.js) - Google Analytics