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. Java提高篇——对象克隆（复制）

    假如说你想复制一个简单变量.很简单: int apples = 5; int pears = apples; 不仅仅是int类型,其它七种原始数据类型(boolean,char,byte,short, ...

  2. Centos6.5 python2.7连接mysql数据库

    1.环境是centos6.5 32位系统,python版本是2.7.12,mysql版本是5.5.22.准备好所需压缩包,MySQL-python-1.2.4b4.tar.gz  pip-6.0.7. ...

  3. Jquery 定时器 倒计时

    <!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8&qu ...

  4. operator->和operator->*

    ->和->*都是C++中定义的可重载的运算符,其中:->称为成员选择符(member selection),而->*称为成员指针选择符(pointer-to-member se ...

  5. Windows Phone 十二、设计器同步

    在设计阶段为页面添加数据源 Blend或者VS的可视化设计器会跑我们的代码,然后来显示出来,当我们Build之后,设计器会进入页面的构造函数,调用InitializeComponent();方法来将U ...

  6. jQuery插件的开发之$.extend(),与$.fn.extend()

        jQuery插件的开发包括两种: 一种是类级别的插件开发,即给jQuery添加新的全局函数,相当于给jQuery类本身添加方法.jQuery的全局函数就是属于jQuery命名空间的函数,另一种 ...

  7. AS3中 Event 类的target和currentTarget属性

    在事件处理过程中,会自动生成事件类的实例,并传给侦听器函数.通过这个参数就可以使用事件类的属性和方法.其中target与currentTarget属性是两个很相似的属性. 对于简单的事件处理过程,分清 ...

  8. Hotelling T2检验和多元方差分析

    1.1 Hotelling T2检验 Hotelling T2检验是一种常用多变量检验方法,是单变量检验的自然推广,常用于两组均向量的比较. 设两个含量分析为n,m的样本来自具有公共协方差阵的q维正态 ...

  9. 二十八、Java基础--------正则表达式

    在对字符串进行处理时一方面可以利用String对象的一些处理方法另一方面可以利用正则表达式,但是一般情况下用String对象方法进行处理起来会相对麻烦一些而正则表达式可以很方便的解决问题.为了更好的学 ...

  10. JSON.stringify（）

    概述 JSON.stringify() 方法可以将任意的 JavaScript 值序列化成 JSON 字符串. 语法 JSON.stringify(value[, replacer [, space] ...