SSH+Easyui之combotree ，TreeGrid 树形展现数据

最新推荐文章于 2022-10-10 17:28:44 发布

NRlovestudy

最新推荐文章于 2022-10-10 17:28:44 发布

阅读量2.9k

点赞数

分类专栏： easyUI

easyUI 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

http://www.jeasyui.com/documentation/combotree.php

http://blog.csdn.net/ouyhong123/article/details/26399445

http://www.tuicool.com/articles/NRbeue

state="closed" 属性能把点击展开的节点Id传到后台中

【在无children节点的情况下。如果已经有children节点，则不发送任何请求】

本文介绍Struts2、Spring、Hibernate与easyui的TreeGrid结合，以树的形式展现数据库中数据。在开发中会碰到很多需要以树的形式展现数据，如导航条、权限管理模块中的资源管理，通常在数据库中都是以树的形式存在。例子程序以资源管理为例，使用treegrid展现资源管理子模块的数据。最终效果如下图：

使用easyui使用树形展现很简单，只需将<table>标签的class设为easyui-treegrid即可

<body class="easyui-layout" data-options="fit:true,border:false">
<div>
<span style="white-space:pre">	</span><table id="resourcelist" class="easyui-treegrid"
    data-options="url:'privilegemgmt/resourceAction_getAll.action',idField:'id',treeField:'resourceName',toolbar:'#tb',border:false">
  <thead>
    <tr>
      <th data-options="field:'id',width:40">编号</th>
      <th data-options="field:'resourceName',width:150">资源名称</th>
      <th data-options="field:'resourceUrl',width:200">资源路径</th>
      <th data-options="field:'resourceOrder',width:50">排序</th>
      <th data-options="field:'icon',width:80">图标</th>
      <th data-options="field:'resourceType',width:80">资源类型</th>
      <th data-options="field:'parentid',width:80">上级资源ID</th>
      <th data-options="field:'enable',width:50">状态</th>
      <th data-options="field:'action',width:120">操作</th>
    </tr>
  </thead>
<span style="white-space:pre">	</span></table>
<span style="white-space:pre">	</span><div id="tb">
<span style="white-space:pre">		</span><a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="onAdd()">增加</a>
<span style="white-space:pre">	</span>	<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-edit" plain="true" onclick="onUpdate()">编辑</a>
<span style="white-space:pre">		</span><a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-remove" plain="true" onclick="onDelete()">删除</a>  
<span style="white-space:pre">	</span></div>
</div>
</body>

以上就为如图所示的树形展现html代码，data-options定义的各属性值作用为：

url：定义远程获取数据的路径，数据以json格式返回

idField：为树节点的标识，该值唯一

treeField：定义节点的字段，如以上定义的节点字段为资源名称，当该节点下包含子节点时，资源名称前面显示一个可展开的图标

toolbar：工具栏，传入的参数为html标签的id值

border：是否显示边框

field：字段名，即该列所需展现的数据，easyui通过解析json字符串，循环输出到表单中，根据字段名与json字符串中字段的匹配确定哪项数据输出到哪列

formatter：单元格formatter(格式化器)函数，为该列的数据显示做格式化操作，达到自己想要的显示效果。函数包含三个参数：value（字段值），rowData（行记录数据），rowIndex（行索引）。

接下来就是访问Action从服务器端获取数据。以上调用了ResourceAction的getAll方法来获取这可资源树。

ResourceAction.java

public class ResourceAction extends BaseAction {
  private Resource resource;
  private ResourceServiceI resourceService;

  public void getAll() {
    String json = resourceService.getResourceTreeToJson();
    this.write(json);
  }
  
  //getter or setter
  public Resource getResource() {
    return resource;
  }
  public void setResource(Resource resource) {
    this.resource = resource;
  }
  public ResourceServiceI getResourceService() {
    return resourceService;
  }
  public void setResourceService(ResourceServiceI resourceService) {
    this.resourceService = resourceService;
  }
}

BaseAction.java

public abstract class BaseAction extends ActionSupport {

  public void write(String json) {
    try {
      ServletActionContext.getResponse().setCharacterEncoding("UTF-8");
      ServletActionContext.getResponse().setContentType("text/json");
      ServletActionContext.getResponse().getWriter().write(json);
      ServletActionContext.getResponse().getWriter().flush();
      ServletActionContext.getResponse().getWriter().close();
    } catch (Exception ex) {
      Debuger.log("BaseAction write json throw Exception!");
      ex.printStackTrace();
    }
  }

  public void write(boolean bool) {
    try {
      String json = "{\"success\":\"" + bool + "\"}";
      ServletActionContext.getResponse().getWriter().write(json);

      ServletActionContext.getResponse().getWriter().flush();
      ServletActionContext.getResponse().getWriter().close();
    } catch (Exception ex) {
      Debuger.log("BaseAction write bool throw Exception!");
      ex.printStackTrace();
    }
  }
}

struts.xml

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE struts PUBLIC
  "-//Apache Software Foundation//DTD Struts Configuration 2.0//EN"
  "http://struts.apache.org/dtds/struts-2.0.dtd">

<struts>
  <package name="priviligemgmt" extends="struts-default" namespace="/privilegemgmt">
    <action name="resourceAction_*" class="com.wzh_1208.sshe.action.ResourceAction" method="{1}">   
      <result name="input">/jsp/privilegemgmt/resourceinfo.jsp</result>
    </action>
  </package>
</struts>

在使用框架提供的类时，我一般将他封装成自己的一个抽象类，然后需要使用到该类的地方就直接继承自己的基类，方便拓展和代码的重用。由于可能在项目中大多数Action都需要向客户端写出json字符串，这里就在BaseAction中封装了两个write方法，其他Action继承BaseAcion即可。getAll方法其实就一个壳子供jsp页面调用，全部的逻辑丢给了业务逻辑层的getResourceTreeToJson方法，该方法将数据库中的资源封装成了一颗树，并以json字符串的形式返回。

ResourceServiceImpl.java

import java.util.List;

import net.sf.json.JSONArray;
import net.sf.json.JSONObject;

import com.wzh_1208.waimai.bean.Resource;
import com.wzh_1208.waimai.dao.ResourceDAOI;
import com.wzh_1208.waimai.services.ResourceServiceI;

public class ResourceServiceImpl implements ResourceServiceI {
  private ResourceDAOI resourceDao;
  
  @Override
  public List<Resource> getAllResource() {
    return resourceDao.findAll();
  }

  @Override
  public String getResourceTreeToJson() {
    return this.createTreeJson(getAllResource());
  }

  /**
   * 创建一颗树，以json字符串形式返回
   * @param list 原始数据列表
   * @return 树
   */
  private String createTreeJson(List<Resource> list) {
    JSONArray rootArray = new JSONArray();
    for (int i=0; i<list.size(); i++) {
      Resource resource = list.get(i);
      if (resource.getParentid() == null) {
        JSONObject rootObj = createBranch(list, resource);
        rootArray.add(rootObj);
      }
    }
    
    return rootArray.toString();
  }
  
  /**
   * 递归创建分支节点Json对象
   * @param list 创建树的原始数据
   * @param currentNode 当前节点
   * @return 当前节点与该节点的子节点json对象
   */
  private JSONObject createBranch(List<Resource> list, Resource currentNode) {
    /*
     * 将javabean对象解析成为JSON对象
     */
    JSONObject currentObj = JSONObject.fromObject(currentNode);
    JSONArray childArray = new JSONArray();
    /*
     * 循环遍历原始数据列表，判断列表中某对象的父id值是否等于当前节点的id值，
     * 如果相等，进入递归创建新节点的子节点，直至无子节点时，返回节点，并将该
     * 节点放入当前节点的子节点列表中
     */
    for (int i=0; i<list.size(); i++) {
      Resource newNode = list.get(i);
      if (newNode.getParentid()!=null && newNode.getParentid().compareTo(currentNode.getId()) == 0) {
        JSONObject childObj = createBranch(list, newNode);
        childArray.add(childObj);
      }
    }
    
    /*
     * 判断当前子节点数组是否为空，不为空将子节点数组加入children字段中
     */
    if (!childArray.isEmpty()) {
      currentObj.put("children", childArray);
    }
    
    return currentObj;
  }
  
  //getter or setter
  public ResourceDAOI getResourceDao() {
    return resourceDao;
  }

  public void setResourceDao(ResourceDAOI resourceDao) {
    this.resourceDao = resourceDao;
  }
}

在使用easyui的treegrid时，最重要的一点就是服务器为easyui返回的json数据的格式。easyui在处理从服务器端返回来的json字符串时，会根据节点下面是否包含children字段及是否含有数据来确定当前节点是否包含子节点。所以在返回json数据时，需要为含有子节点的节点加上children字段，并将子节点列表赋给该值。ResourceServiceImpl为ResourceServiceI的实现类，实现了getAllResource()和getResourceToJson()方法，getAllResource()方法调用数据库访问对象ResourceDAOImpl来获取数据库中所有的资源列表并返回，getResourceToJson方法为获取所有的Resource并组织成一颗树，以json字符串的形式返回。

import java.sql.Timestamp;
import java.util.List;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;

import com.wzh_1208.waimai.BaseDAO;
import com.wzh_1208.waimai.bean.Resource;
import com.wzh_1208.waimai.dao.ResourceDAOI;

public class ResourceDAOImpl extends BaseDAO implements ResourceDAOI {
  private static final Logger log = LoggerFactory
      .getLogger(ResourceDAOImpl.class);
  
  protected void initDao() {
    // do nothing
  }

  public List<Resource> findAll() {
    log.debug("finding all Resource instances");
    try {
      //查询资源记录，按资源父id和序号的升序排列
      String queryString = "from Resource order by parentid,resourceOrder asc";
      return getHibernateTemplate().find(queryString);
    } catch (RuntimeException re) {
      log.error("find all failed", re);
      throw re;
    }
  }
}

BaseDAO.java

import org.springframework.orm.hibernate3.support.HibernateDaoSupport;

public abstract class BaseDAO extends HibernateDaoSupport {
}

ResourceDAOImpl继承了BaseDAO类和ResourceDAOI，并实现findAll方法，为业务逻辑层返回按资源父id和序号升序排列的Resource所有记录。

以上就完成了整个数据展现过程的实现，但工作还未完成，还需配置一大堆配置文件。这里就不贴出来了。

Resource.java

import java.sql.Timestamp;

/**
 * Resource entity. @author WZH
 */

public class Resource implements java.io.Serializable {
  //主键id
  private Integer id;
  //资源名称
  private String resourceName;
  //资源访问路径
  private String resourceUrl;
  //资源描述
  private String description;
  //资源的图标
  private String icon;
  //父节点id
  private Integer parentid;
  //资源的类型，菜单或按钮
  private String resourceType;
  //是否可用
  private Integer enable;
  //资源排序序号
  private Integer resourceOrder;
  //创建时间
  private Timestamp createTime;
<span style="white-space:pre">	/** default constructor */
<span style="white-space:pre">	</span>public Resource() {
<span style="white-space:pre">	</span>}</span>
  //getter or setter方法省略
                 ........
}

Resource.hbm.xml

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE hibernate-mapping PUBLIC "-//Hibernate/Hibernate Mapping DTD 3.0//EN"
"http://hibernate.sourceforge.net/hibernate-mapping-3.0.dtd">
<hibernate-mapping>
  <class name="com.wzh_1208.sshe.bean.Resource" table="resource">
    <id name="id" type="java.lang.Integer">
      <column name="id" />
      <generator class="native"></generator>
    </id>
    <property name="resourceName" type="java.lang.String">
      <column name="resource_name" length="20" not-null="true">
      </column>
    </property>
    <property name="resourceUrl" type="java.lang.String">
      <column name="resource_url" length="200">
      </column>
    </property>
    <property name="description" type="java.lang.String">
      <column name="description" length="200">
      </column>
    </property>
    <property name="icon" type="java.lang.String">
      <column name="icon" length="200">
      </column>
    </property>
    <property name="parentid" type="java.lang.Integer">
      <column name="parentid">
      </column>
    </property>
    <property name="resourceType" type="java.lang.String">
      <column name="resource_type" length="11" not-null="true">
      </column>
    </property>
    <property name="enable" type="java.lang.Integer">
      <column name="enable" not-null="true">
      </column>
    </property>
    <property name="resourceOrder" type="java.lang.Integer">
      <column name="resource_order">
      </column>
    </property>
    <property name="createTime" type="java.sql.Timestamp">
      <column name="create_time" length="0">
      </column>
    </property>
  </class>
</hibernate-mapping>

运行程序，数据便可以树的形式展现出来，效果图如下：

但此时只是将数据库中的数据原封不动的显示在了界面上，并未像文章开头那张图一样在节点上显示设置的图标、状态为可用或禁用以及操作栏未显示操作。此时就需为数据进行格式话处理，即用到easyui的formatter属性来定义格式化列的显示函数，来实现数据自定义的显示。修改之后的html代码如下：

<script>
/**
 *格式化资源显示名称，easyui在显示节点字段时，如果记录中有iconCls值，easyui会根据该值来相应的图标，
 *如果没有则应默认图标代替。这里在传递过来的json字符串中未含有iconCls字段，但包含icon字段，这里只需
 *将icon字段值赋给iconCls，即可显示图标。
**/
function formatName(value, row, index) {
  //在名称前面显示图标就是靠iconCls属性，iconCls属性为一个css类，easyui拿到这个属性值就能显示相应的图标了
  //由于传递过来的json字符串中未包含iconCls属性，只有icon属性，所以要想easyui显示图标只需将icon的值赋给iconCls
  row.iconCls = row.icon;
  return value;
}

/**
 *格式化父资源的显示，为0时不显示父资源
**/
function formatParentId(value, row, index) {
  if (value == 0) {
    return null;
  } 
  return value;
}

/**
 *格式化状态，如果为1，显示正常，为0显示禁用
 */
function formatState(value,row,index) {
  switch (value) {
  case 1:
    return '正常';
  case 0:
    return '禁用';	
  }
}

/**
 *格式化操作，在每行的操作栏显示编辑和删除操作
 */
function formatAction(value, row, index) {
  var str = '';

  if (true) {
    str += '<a href="javascript:onUpdate()" >编辑</a>';
  }
  str += ' | ';
  if (true) {
    str += '<a href="javascript:onDelete()">删除</a>';
  }

  return str;
}
</script>
</head>

<body class="easyui-layout" data-options="fit:true,border:false">
<div>
<span style="white-space:pre">	</span><table id="resourcelist" class="easyui-treegrid"
        data-options="url:'privilegemgmt/resourceAction_getAll.action',idField:'id',treeField:'resourceName',toolbar:'#tb',border:false">
    <thead>
        <tr>
            <th data-options="field:'id',width:40">编号</th>
            <th data-options="field:'resourceName',width:150,formatter:formatName">资源名称</th>
            <th data-options="field:'resourceUrl',width:200">资源路径</th>
            <th data-options="field:'resourceOrder',width:50">排序</th>
            <th data-options="field:'icon',width:80">图标</th>
            <th data-options="field:'resourceType',width:80">资源类型</th>
            <th data-options="field:'parentid',width:80,formatter:formatParentId">上级资源ID</th>
            <th data-options="field:'enable',width:50,formatter:formatState">状态</th>
            <th data-options="field:'action',width:120,formatter:formatAction">操作</th>
        </tr>
    </thead>
<span style="white-space:pre">	</span></table>
<span style="white-space:pre">	</span><div id="tb">
<span style="white-space:pre">		</span><a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="onAdd()">增加</a>
<span style="white-space:pre">	</span>    <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-edit" plain="true" onclick="onUpdate()">编辑</a>
<span style="white-space:pre">		</span><a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-remove" plain="true" onclick="onDelete()">删除</a>  
<span style="white-space:pre">	</span></div>
</div>
</body>

从以上的代码可以看出为需要格式化的列的<th>标签的data-options属性中增加了formatter属性以及对应调用的格式化函数，具体函数的作用和实现已在代码中做出说明。只是需要注意的是，iconCls字段值为css的一个类，可以使用easyui所提供的图标，也可使用自定义的图标，若使用自定义的图标时，一定要特别注意图标的路径，否则也不能正常显示。

这样就完成了Treegrid属性展现资源数据。

NRlovestudy

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
SSH+Easyui之combotree ，TreeGrid 树形展现数据

本文介绍Struts2、Spring、Hibernate与easyui的TreeGrid结合，以树的形式展现数据库中数据。在开发中会碰到很多需要以树的形式展现数据，如导航条、权限管理模块中的资源管理，通常在数据库中都是以树的形式存在。例子程序以资源管理为例，使用treegrid展现资源管理子模块的数据。最终效果如下图：使用easyui使用树形展现很简单，只需将标签的class设为e
复制链接

扫一扫

专栏目录