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. selinux 导致无法启动httpd

    selinux 导致无法启动httpd ansible_dire:~ # /etc/init.d/httpd restart 停止 httpd: [失败]正在启动 httpd:(13)Permissi ...

  2. ClearTrace

    一年前两次手动使用fn_trace_gettable对跟踪文件进行分析,按TextData排序,通过截取TextData左边N位尝试分组,观察总体相同的过程或语句中的关键字,逐一得出跟踪分析报表,罗列 ...

  3. HTML Meta中添加X-UA-Compatible和IE=Edge,chrome=1有什么作用

    HTML Meta中添加X-UA-Compatible和IE=Edge,chrome=1有什么作用? X-UA-Compatible是自从IE8新加的一个设置,对于IE8以下的浏览器是不识别的. 通过 ...

  4. lua coroutine for iterator

    背景 前面的文章演示了使用闭包函数实现 状态的迭代器. 本文演示使用 coroutine来产生迭代器的例子. coroutine迭代器例子 -- 遍历二叉树 local binary_tree = { ...

  5. could not deduce template argument for 'const std::_Tree<_Traits> &' from 'const std::string'

    VS2008, 写一个简单的demo的时候出现了这个: 1>------ Build started: Project: GetExportTable, Configuration: Relea ...

  6. C# Word生成PDF

    //Word转换成pdf /// <summary> /// 把Word文件转换成为PDF格式文件 /// </summary> /// <param name=&quo ...

  7. Linux:krb5

    Kerberos协议主要用于计算机网络的身份鉴别(Authentication), 其特点是用户只需输入一次身份验证信息就可以凭借此验证获得的票据(ticket-granting ticket)访问多 ...

  8. jtree添加节点

    利用Model添加了节点之后,需要reload树

  9. paper 131：【图像算法】图像特征：GLCM【转载】

    转载地址:http://www.cnblogs.com/skyseraph/archive/2011/08/27/2155776.html 一 原理 1 概念:GLCM,即灰度共生矩阵,GLCM是一个 ...

  10. 物理引擎-Physx的源代码去哪里找

    前几天无意中看到了Physx开源了,就连自己的领导也高兴了一下,让本道士去下载源代码琢磨一下,顺便做几个例子跑起来.结果没成想这个nvidia的github上的源代码被移除了,而且csdn,pudn上 ...