标签：field private 100% function lte int ase 实体类 public
写在前面:
表格树是在普通ligerGrid的基础上，做了一点改变，使数据以表格树的形式显示出来，适用于有级别的数据比如菜单(有父菜单,父菜单下面有子菜单)。表格树的显示有两种方法，可以根据自己的项目来选择。
方法1：
前台页面：
funcGrid = $("#funcGrid").ligerGrid({
columns : [
{display: ‘功能编号‘, name: ‘functionId‘,hide:‘true‘} ,
{id:‘functionName‘,display: ‘功能名‘, name: ‘functionName‘, width: 200 } ,
{ display: ‘功能描述‘, name: ‘functionDes‘, minWidth: 60 },
{display : ‘功能fId‘, name : ‘fId‘, type : "text", hide:‘true‘}
],
url:‘${baseURL}/getFunctionBySysId.action?systemId=‘+systemId,
tree : {
columnId : ‘functionName‘, //以树型显示的字段的id
idField : ‘functionId‘, //id字段
parentIDField : ‘fId‘, //parent id 字段
isExpand : false
},
width : ‘100%‘,
height : ‘100%‘,
checkbox : true,
usePager : false,
frozenRownumbers : false,
frozenCheckbox : false,
//rowHeight : 23,
alternatingRow : false,
isChecked: f_isChecked,
});
后台代码：
public String getFunctionBySysId(){ log.info("==FunctionAction===getFunctionBySysId=======start="); try { List<Function> functionList = functionService.getAllBySysId(Integer.parseInt(systemId)); List<FunctionVO> functionVOList = new ArrayList<FunctionVO>(); for (int i = 0; i < functionList.size(); i++) { FunctionVO functionVO= new FunctionVO(); functionVO.setFunctionId(functionList.get(i).getFunctionId()); functionVO.setFunctionName(functionList.get(i).getFunctionName()); functionVO.setFunctionDes(functionList.get(i).getFunctionDes()); //添加fId 使功能表格以树的形式显示 functionVO.setfId(functionList.get(i).getfId()); functionVOList.add(functionVO); } Map<String, Object> map = new HashMap<>(); map.put("Rows", functionVOList); map.put("Total", functionVOList.size()); JsonConfig jsonConfig = new JsonConfig(); jsonConfig.registerJsonValueProcessor(Date.class, new JsonDateValueProcessor()); jsonObject = JSONObject.fromObject(map, jsonConfig); log.info("jsonObject:" + jsonObject); } catch (Exception e) { throw new BusinessException("根据systemId查询Function出错"); } log.info("==FunctionAction===getFunctionBySysId=======end="); return "getFunctionBySysId"; }
注意：对于前台页面树形表格的显示是指定了parentIDField 为‘fId‘,故后台在传递也应该有对应的fId字段传递过来。然后前台页面如下图，可以自己对比画红框处的字段：
这种方法，比较简单，因为在后台action中无需对数据做过多处理，只需要在前台页面中，指定columnId,idField,parentIDField即可
方法2：
前台页面：
funcGrid = $("#funcGrid").ligerGrid({
columns : [
{display: ‘功能编号‘, name: ‘functionId‘,hide:‘true‘} ,//
{display: ‘功能名‘, name: ‘functionName‘, width: 200 } ,
{ display: ‘功能描述‘, name: ‘functionDes‘, minWidth: 60 },
{display : ‘功能fId‘, name : ‘fId‘, type : "text", hide:‘true‘}
],
url:‘${baseURL}/getFunctionBySysId.action?systemId=‘+systemId,
tree : {
//要显示为树形的字段name
columnName:‘functionName‘,
isExpand : false
}
width : ‘100%‘,
height : ‘100%‘,
checkbox : true,
usePager : false,
frozenRownumbers : false,
frozenCheckbox : false,
//rowHeight : 23,
alternatingRow : false,
isChecked: f_isChecked,
});
后台代码：action
//功能树 public String getFunctionBySysId2(){ log.info("==FunctionAction===getFunctionBySysId=======start="); //1.获取fid为0的function //2.根据父function获取子function try { //List<Function> functionList = functionService.getAllBySysId(Integer.parseInt(systemId)); //获取所有的一级function List<Function> functionList = functionService.getAllOneLevelBySysId(Integer.parseInt(systemId)); List<FunctionVO22> functionVOList = new ArrayList<>(); for (int i = 0; i < functionList.size(); i++) { FunctionVO22 f1 = new FunctionVO22(); f1.setFunctionId(functionList.get(i).getFunctionId()); f1.setFunctionName(functionList.get(i).getFunctionName()); f1.setFunctionDes(functionList.get(i).getFunctionDes()); f1.setfId(functionList.get(i).getfId()); //根据一级function查询对应的子function List<Function> childrenList = functionService.getAllTwoLevel(functionList.get(i).getFunctionId(),Integer.parseInt(systemId)); List<FunctionVO22> functionVOList2 = new ArrayList<FunctionVO22>(); for(int i2 = 0; i2 < childrenList.size(); i2++){ FunctionVO22 f2 = new FunctionVO22(); f2.setFunctionId(childrenList.get(i2).getFunctionId()); f2.setFunctionName(childrenList.get(i2).getFunctionName()); f2.setFunctionDes(childrenList.get(i2).getFunctionDes()); f2.setfId(childrenList.get(i2).getfId()); functionVOList2.add(f2); System.out.println("functionVOList2.size=="+functionVOList2.size()); } //将二级function设置到一级function中 f1.setChildren(functionVOList2); functionVOList.add(f1); } Map<String, Object> map = new HashMap<>(); map.put("Rows", functionVOList); map.put("Total", functionVOList.size()); JsonConfig jsonConfig = new JsonConfig(); jsonConfig.registerJsonValueProcessor(Date.class, new JsonDateValueProcessor()); jsonObject = JSONObject.fromObject(map, jsonConfig); log.info("jsonObject:" + jsonObject); } catch (Exception e) { e.printStackTrace(); throw new BusinessException("根据systemId查询Function出错"); } log.info("==FunctionAction===getFunctionBySysId=======end="); return "getFunctionBySysId"; }
涉及到的实体类：FunctionVO22
package com.fums.vo; import java.util.List; public class FunctionVO22 { private Integer functionId; private String functionName; private String functionDes; //父功能id private Integer fId; //子功能集合 private List<FunctionVO22> children; public Integer getFunctionId() { return functionId; } public void setFunctionId(Integer functionId) { this.functionId = functionId; } public String getFunctionName() { return functionName; } public void setFunctionName(String functionName) { this.functionName = functionName; } public String getFunctionDes() { return functionDes; } public void setFunctionDes(String functionDes) { this.functionDes = functionDes; } public Integer getfId() { return fId; } public void setfId(Integer fId) { this.fId = fId; } public List<FunctionVO22> getChildren() { return children; } public void setChildren(List<FunctionVO22> children) { this.children = children; } }
这里主要对FunctionVO22做代码的展示，因为这是对Function实体类的一个封装类，里面涉及到了需要的一些字段，这里如果要在页面进行树型表格显示，可在Function22中
加入一个本身的集合(对象中有一个对象集合的属性)。使其传递过去的数据格式经过json格式的转换变为如下图这样（举例说明拿的api中的demo数据，图中的数据字段可以根据自己的做对应的修改）：
虽然这种方法在前台页面只需要指定要显示为树形的字段即可，如下图
但是却比第一种方法在后台action中对数据的处理要复杂的多，可自行选择。
成功截图：嘻嘻嘻嘻嘻嘻嘻~~~~~~~~~~~~~~~~~~~~收拾 下班。。
ligerUI---ligerGrid中treegrid(表格树)的使用
标签：field private 100% function lte int ase 实体类 public
原文地址：http://www.cnblogs.com/eleven258/p/7800851.html
