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. spark 基本操作

    读取文件的数据 使用的数据:https://codeload.github.com/xsankar/fdps-v3/zip/master 读取单个文件的数据 case class Employee(E ...

  2. java基础类型、包装器

    char a = 'h';  //类包装器 Character aobj = a ;//自动装箱 byte b = 6; Byte bobj = b; short s = 234; Short sob ...

  3. XPath 节点

    在 XPath 中,有七种类型的节点:元素.属性.文本.命名空间.处理指令.注释以及文档节点(或称为根节点). XPath 术语 节点(Node) 在 XPath 中,有七种类型的节点:元素.属性.文 ...

  4. 查看 Apache并发请求数及其TCP连接状态

    查看 Apache并发请求数及其TCP连接状态 (2011-06-27 15:08:36) 服务器上的一些统计数据: 1)统计80端口连接数 netstat -nat|grep -i "80 ...

  5. php判断是否为微信浏览器访问

    今天遇到个问题,就是需要判断是否在微信浏览器内访问: if (strpos($_SERVER['HTTP_USER_AGENT'], 'MicroMessenger') !== false) {    ...

  6. rdesktop的使用方法

    工作时一般是开两台电脑 ,一台linux,一台windows,以前也用过虚拟机什么的,但是 有时候 跑起来拖泥带水的十分不爽,所以慢慢的就习惯了两台电脑的工作方式,一般我大部时间都在linux下面.用 ...

  7. 5.3监听请求:使用eclipse的tcp/ip工具(端口转换)

    1.改用wsdl文件生成响应文件 运行浏览器输入发布的地址,获得wsdl源码保存在项目路径下, 2.创建接口转换器,window-property-tcpip 客户端执行结果:

  8. 无语啊，sublime给我弄乱玩，玩坏了，而且安装插件也安装不了

    国内的什么插件地址都TMMD失效了,没办法,只能翻"强"到外面找了,而且找了很多也用不了,所以收藏一个为了预防以后不行有补救的方法: 百度的99%都不行,不是报这个错就是那个错,可 ...

  9. sqlserver 锁与阻塞

    DDL/索引重建 会申请 Sch-M锁 with (nolock) 会申请 Sch-S锁 with (nolock)会阻塞 sch-M, 同样Sch-M也会 阻塞with (nolock) 索引重建2 ...

  10. 第一次写这么长的js

    是公司一个项目,要求显示不同的sku,然后根据sku组合显示不同的价格区间,根据填写的数量落在哪个价格区间,然后进行计算.实际截图如下: 前端JS如下: <script type="t ...