EasyUI---tree
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的更多相关文章
- Easyui Tree方法扩展 - getLevel(获取节点级别)
Easyui Tree一直就没有提供这个方法,以前没有用到,所以一直没怎么在意,这次自己用到了,顺便扩展了一个方法,分享给大家. $.extend($.fn.tree.methods, { getLe ...
- [转]easyui tree 模仿ztree 使用扁平化加载json
原文地址:http://my.oschina.net/acitiviti/blog/349377 参考文章:http://www.jeasyuicn.com/demo/treeloadfilter.h ...
- 【项目经验】EasyUI Tree
ITOO5.0开始了,我参加了伟大的基础系统,从整体上来说,基础系统有三个职能: 1.自己的核心职能--选课(公共选修课,专业选修课),课表: 2.为其他系统提供真实数据: 3.维护信息 而近两三天, ...
- Jquery EasyUI Tree .net实例
图片: 针对tree: 数据库: CREATE TABLE [dbo].[SystemModel]( [Id] [,) NOT NULL, [Name] [nvarchar]() NULL, [Fat ...
- Jquery easyui Tree的简单使用
Jquery easyui Tree的简单使用 Jquery easyui 是jQuery EasyUI是一组基于jQuery的UI插件集合,而jQuery EasyUI的目标就是帮助web开发者更轻 ...
- Jquery easyui tree的使用
这个ui用的一切都是json数据.树也是如此! 后台需要返回与格式匹配的json数据才能正确加载树. 页面定义一个ui: <ul id="messageInfoAddTree" ...
- EasyUI Tree判断节点是否是叶
方法1: $('#domaincatalog').tree('isLeaf', node.target); 返回true或false ,true表示是叶节点, false即不是 方法2:官方文档中: ...
- 原创: EasyUI Tree 最后一级 节点 横向排列
原创: EasyUI Tree 最后一级 节点 横向排列 转载请指明出处 必须要写在: onLoadSuccess 事件中 ddAuthTree.tree({ lines: true, checkb ...
- EasyUI –tree、combotree学习总结
EasyUI –tree.combotree学习总结 一. tree总结 (一).tree基本使用 tree控件是web页面中将数据分层一树形结构显示的. 使用$.fn.tree.defaults ...
- Easyui tree 开启拖放后 在IE下 性能惨不忍睹
项目中加载一个树结构代码如下 //加载树 function LoadTree() { var url = "../Ajax/StationTree.ashx?showVirtual=1&qu ...
随机推荐
- SpringMVC操作指南-MVC-搭建SpringMVC项目结构(基于Java API和注解)
- Error : should use android:showAsAction when not using support library
我有一个ListActivity,然后一个menu/options.xml android:showAsAction报错: should use android:showAsAction when n ...
- Ubuntu Dev Box Setup
Editor VIM Sublime Atom Visual Studio Code SSH Client PAC Manager File Manager Double Commander Imag ...
- Thinkphp 中 distinct 的用法
TP中distinct()的用处主要是去除重复的值 在Thinkphp手册中也详细说明了(链接:http://document.thinkphp.cn/manual_3_2.html#distinct ...
- sql要点
oracle 并操作 union 自动去除重复 如果想保留重复,需要使用union all 交操作intersect 自动去除重复 如果想保留重复,需要使用intersect all ...
- python numpy包
在numpy包中我们可以用数组来表示向量,矩阵和高阶数据结构 首先导入numpy包: from numpy import* 初始化numpy数组有多种方式,比如说 1.python列表或元祖 2.使用 ...
- Python学习第一天 -- 简单的属性、 语法学习
1,哈哈哈,是时候来一波Python,其实没办法,最近在做后台的时候,需要用到Python来调试接口,下面是它的简单的语法,权当是记录. 2, #!/user/bin/python # coding= ...
- sql语句把字段中的某个字符去掉
sql语句把字段中的某个字符去掉 )),'http://demo.m-school.net','') 例如: )),'http://192.168.2.180','') )),'http://zpzx ...
- Could not load type 'System.ServiceModel.Activation.HttpModule' from assembly 'System.ServiceModel, Version=3.0.0.0, Culture=neutral, PublicKeyToken=b77a5c561934e089'
Could not load type 'System.ServiceModel.Activation.HttpModule' from assembly 'System.ServiceModel, ...
- [原] Page_Load执行了两次,为什么?如何解决!
今儿个发现Page_Load执行了两次,想不通.后来,经找资料,总算查出原因.1.在aspx页面上写了 AutoEventWireup="true" ,这样Page_Load会自动 ...