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. JUnit操作指南-批量执行单元测试（将多个测试类捆绑在一起执行）

    相关链接:https://github.com/junit-team/junit4/wiki/Aggregating-tests-in-suites

  2. java 性能优化：35 个小细节，让你提升 java 代码的运行效率

    前言 代码 优化 ,一个很重要的课题.可能有些人觉得没用,一些细小的地方有什么好修改的,改与不改对于代码的运行效率有什么影响呢?这个问题我是这么考虑的,就像大海里面的鲸鱼一样,它吃一条小虾米有用吗?没 ...

  3. [CC]手动点云分割

    CloudCompare中手动点云分割功能ccGraphicalSegmentationTool, 点击应用按钮后将现有的点云分成segmented和remaining两个点云, //停用点云分割功能 ...

  4. Linux配置notes

    终端支持中文输入: locale-gen en_US.UTF-8 export PYTHONIOENCODING=utf-8 export LANG="en_US.UTF-8" e ...

  5. JSP三大指令、七大动作、九大对象

    <%---------------------- JSP三大指令 -----------------------------%><%-- 1. page: language impo ...

  6. ASP.Net中的Web Resource

    http://support.microsoft.com/kb/910442,这是中文的,机器翻译的,不太容易看懂,英文的是:http://support.microsoft.com/kb/91044 ...

  7. JS 获取客户端操作系统

    function detectOS() {     var sUserAgent = navigator.userAgent;     var isWin = (navigator.platform ...

  8. TortoiseGit 连接oschina不用每次输入用户名和密码的方法

    每次git clone 和push 都要输入用户名和密码.虽然安全,但在本机上每次都输有些麻烦,如何记住用户名和密码呢? 在网上看了各种方法,太杂,很多可能环境不一样,一直行不通.最后找到一种有效的方 ...

  9. Docker的容器创建以及基本命令

    1. 使用docker run创建docker容器,(docker命令都是以docker开头的)安装完docker后,大多数情况下,本机上面一般没有docker镜像的,执行docker run的时候一 ...

  10. UVa 10917 Dijkstra

    本来就是水题一道. 题意:一个人要从点1去到点2,中间还有很多点和很多条边.问你如果他每次走的边(a,b)都满足:a点到目标点的最短距离<b点到目标点的最短距离,那么他从点1出发到点2总共有多少 ...