EasyUI的tree在获取action返回的json字符串时最少具有三个属性id、text和children,这样在读取时才会在页面正常显示树形

这里比较重要的就是在数据库中对数据的存储吧，说白了还是表结构的设置

这里数据库设计跟省市区的下拉列表框实现级联设计理念是一样的，最少要三列（id，名称，父id）

之后在dao层写一个根据父id查寻得方法（这里是在之前项目写的，是Hibernate、Struts2及EasyUI的整合，并没有整合spring）

//    获取数据列表

    public List<Region> shouAll(String parentRegionID)

    {

        List<Region> list = new ArrayList<Region>() ;

        init() ;

        Query qu= se.createQuery("from Region where parentRegionID = ? ") ;

        qu.setString(0, parentRegionID) ;

        list = qu.list() ;

        destroy();

        return list ;

    }

这里我们查到数据了，但是怎么把数据转成我们需要的json格式呢，这里我们需要写一个封装类来将我们查到数据转换成json字符串的格式

package com.hanqi.json;

import java.util.List;

public class TreeNode {

    private String id ;//id

    private String text ;//对应tree的text属性

    private List<TreeNode> children ;//子节点集合

    public TreeNode() {

        super();

    }

    public TreeNode(String id, String text) {

        super();

        this.id = id;

        this.text = text;

    }

    public String getId() {

        return id;

    }

    public void setId(String id) {

        this.id = id;

    }

    public String getText() {

        return text;

    }

    public void setText(String text) {

        this.text = text;

    }

    public List<TreeNode> getChildren() {

        return children;

    }

    public void setChildren(List<TreeNode> children) {

        this.children = children;

    }

}

封装类写完了，数据也查到了，我们需要在service层处理数据，

这里我们采用了递归的方法，先按父节点为0的某一记录进行查询，直到没有子节点再重新查询另一条父节点，直到查完

package com.hanqi.service;

import java.util.ArrayList;

import java.util.List;

import com.han.entity.Region;

import com.hanqi.dao.RegionDAO;

import com.hanqi.json.TreeNode;

public class RegionService {

    public List<Region> shouAll(String parentRegionID)

    {

        return new RegionDAO().shouAll(parentRegionID) ;

    }

    //递归调用的方法

    //获取子节点集合

    public List<TreeNode> getTreeNode(String id)

    {

        List<TreeNode> list = null ;

        List<Region> lr = shouAll(id) ;

        if(lr != null && lr.size() > 0)//当没有查到数据时结束递归

        {

            list = new ArrayList<>() ;

            for(Region r : lr)

            {

                TreeNode tn = new TreeNode(r.getRegionID(), r.getRegionName()) ;

                /*

                 *        通过节点名的追踪，它的语句执行是从父节点0中的某一条记录开始一直到最后没有子节点了

                 *        再重新执行另一个父节点为0的记录

                 */

                System.out.println(" name = "+r.getRegionName());

                //得到节点的子节点

                //递归调用

                List<TreeNode> children = getTreeNode(r.getRegionID()) ;

                tn.setChildren(children);

                list.add(tn) ;

            }

        }

        return list;

    }

}

接下来就是传到页面了，这里我们写一个action的类来将数据打包并发送到前台

package com.hanqi.action;

import java.io.IOException;

import java.util.List;

import javax.servlet.http.HttpServletResponse;

import org.apache.struts2.ServletActionContext;

import com.alibaba.fastjson.JSONArray;

import com.hanqi.json.TreeNode;

import com.hanqi.service.RegionService;

public class TreeAction {

    //测试EasyUI  tree

    public void showTree()

    {

            try {//捕获异常

                List<TreeNode> list = new RegionService().getTreeNode("0") ;//直接调用dao方法从父节点为零查

                String str = JSONArray.toJSONString(list) ; //定义字符串并将父节点为0查到的集合转给字符串并赋值

                HttpServletResponse response = ServletActionContext.getResponse();//获取内置对象response

                response.setCharacterEncoding("UTF-8");//转码

                System.out.println(str);

                response.getWriter().write(str);

            } catch (IOException e) {

                // TODO 自动生成的 catch 块

                e.printStackTrace();

            }

    }

}

最后就是网页的请求及数据的显示了

<%@ page language="java" contentType="text/html; charset=UTF-8"

    pageEncoding="UTF-8"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>树形</title>

<!-- 1    jQuery的js包 -->

<script type="text/javascript" src="jquery-easyui-1.4.4/jquery.min.js"></script>

<!-- 2    css资源 -->

<link rel="stylesheet" type="text/css" href="jquery-easyui-1.4.4/themes/default/easyui.css">

<!-- 3    图标资源 -->

<link rel="stylesheet" type="text/css" href="jquery-easyui-1.4.4/themes/icon.css"> 

<!-- 4    EasyUI的js包 -->

<script type="text/javascript" src="jquery-easyui-1.4.4/jquery.easyui.min.js"></script>

<!-- 5    本地语言 -->

<script type="text/javascript" src="jquery-easyui-1.4.4/locale/easyui-lang-zh_CN.js"></script>

</head>

<body>

<script type="text/javascript">

    $(function(){

        $("#tt").tree({

            url:"treeaction.action",

            loadFilter:function(data){

                if(data.text){

                    return data.text ;

                }else{

                    return data ;

                }

            }

        });

    })

</script>

<ul id="tt"></ul>

</body>

</html>

效果图

EasyUI---tree的更多相关文章

  1. Easyui Tree方法扩展 - getLevel(获取节点级别)

    Easyui Tree一直就没有提供这个方法,以前没有用到,所以一直没怎么在意,这次自己用到了,顺便扩展了一个方法,分享给大家. $.extend($.fn.tree.methods, { getLe ...

  2. [转]easyui tree 模仿ztree 使用扁平化加载json

    原文地址:http://my.oschina.net/acitiviti/blog/349377 参考文章:http://www.jeasyuicn.com/demo/treeloadfilter.h ...

  3. 【项目经验】EasyUI Tree

    ITOO5.0开始了,我参加了伟大的基础系统,从整体上来说,基础系统有三个职能: 1.自己的核心职能--选课(公共选修课,专业选修课),课表: 2.为其他系统提供真实数据: 3.维护信息 而近两三天, ...

  4. Jquery EasyUI Tree .net实例

    图片: 针对tree: 数据库: CREATE TABLE [dbo].[SystemModel]( [Id] [,) NOT NULL, [Name] [nvarchar]() NULL, [Fat ...

  5. Jquery easyui Tree的简单使用

    Jquery easyui Tree的简单使用 Jquery easyui 是jQuery EasyUI是一组基于jQuery的UI插件集合,而jQuery EasyUI的目标就是帮助web开发者更轻 ...

  6. Jquery easyui tree的使用

    这个ui用的一切都是json数据.树也是如此! 后台需要返回与格式匹配的json数据才能正确加载树. 页面定义一个ui: <ul id="messageInfoAddTree" ...

  7. EasyUI Tree判断节点是否是叶

    方法1:  $('#domaincatalog').tree('isLeaf', node.target); 返回true或false ,true表示是叶节点, false即不是 方法2:官方文档中: ...

  8. 原创: EasyUI Tree 最后一级 节点 横向排列

    原创: EasyUI  Tree 最后一级 节点 横向排列 转载请指明出处 必须要写在: onLoadSuccess 事件中 ddAuthTree.tree({ lines: true, checkb ...

  9. EasyUI –tree、combotree学习总结

    EasyUI –tree.combotree学习总结 一.   tree总结 (一).tree基本使用 tree控件是web页面中将数据分层一树形结构显示的. 使用$.fn.tree.defaults ...

  10. Easyui tree 开启拖放后 在IE下 性能惨不忍睹

    项目中加载一个树结构代码如下 //加载树 function LoadTree() { var url = "../Ajax/StationTree.ashx?showVirtual=1&qu ...

随机推荐

  1. Spring操作指南-针对JDBC配置声明式事务管理（基于注解）

  2. Python之路-(Django(Cookie、分页))

    Cookie 分页 1.获取Cookie: request.COOKIES['key'] request.get_signed_cookie(key, default=RAISE_ERROR, sal ...

  3. mysql入门

    mysql:关系型数据库的一种,用来存储数据: 一个仓库------一个数据库: 一个箱子------ 表: 进入mysql命令行:mysql -uroot -p(密码):查看数据库中所有表:show ...

  4. GPS部标平台的架构设计(十)-基于Asp.NET MVC构建GPS部标平台

    在当前很多的GPS平台当中,有很多是基于asp.NET+siverlight开发的遗留项目,代码混乱而又难以维护,各种耦合和关联,要命的是界面也没见到比Javascript做的控件有多好看,随着需求的 ...

  5. MyEclipse开发Java Web项目步骤

    1.安装工具 第一步,下载安装JDK,并配置环境: 配置环境变量步骤: (1)新建变量名:JAVA_HOME,变量值为JDK的安装路径: (2)打开PATH,添加变量值:%JAVA_HOME%\bin ...

  6. PHP中GPC

    PS:PHP中绕过GPC的情况有很多,本文仅仅是总结了一些比较常见的,而且写的很浅[因为本人水平有限],欢迎大家积极拍砖:) 1.通过数据库(文本)中转 通过数据库中转: [注意存入数据库和selec ...

  7. struts---JSP界面验证码生成与验证

    之前想做一个随机验证码的功能,自己也搜索了一下别人写的代码,然后自己重新用struts2实现了一下,现在将我自己实现代码贴出来!大家有什么意见都可以指出来! 首先是生成随机验证码图片的action: ...

  8. MFC打开系统关于对话框

    HICON Icon = LoadIcon(AfxGetInstanceHandle(),MAKEINTRESOURCE(IDR_MAINFRAME)); //IDR_MAINFRAME为图标的ID ...

  9. sublime text3 前端编译神器，浏览器实时显示

    前端编译器有很多,Dreamweaver,sublime text ,webstorm,但在使用之后感觉sublime text3就是前端的编译神器 首先sublime text3最好使用英文原版,虽 ...

  10. Javascript模块化编程（三）：require.js的用法(转)

    这个系列的第一部分和第二部分,介绍了Javascript模块原型和理论概念,今天介绍如何将它们用于实战. 我采用的是一个非常流行的库require.js. 一.为什么要用require.js? 最早的 ...