编程学习资讯网

ligerUI---ligerGrid中treegrid(表格树)的使用--编程学习网

发布时间:2017-11-08 08:38:30   来源:本站编辑   浏览次数:

写在前面:

表格树是在普通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数据,图中的数据字段可以根据自己的做对应的修改):

虽然这种方法在前台页面只需要指定要显示为树形的字段即可(也可以将columnName字段换为columnId : 'functionName',不过前提是functionName是一个id字段,这里我没有配置id字段,故使用columnName,即name字段),如下图

但是却比第一种方法在后台action中对数据的处理要复杂的多,可自行选择。

 

成功截图:嘻嘻嘻嘻嘻嘻嘻~~~~~~~~~~~~~~~~~~~~收拾 下班。。

编程学习网 http://www.javalearns.cn

关注微信号:javalearns   随时随地学Java

或扫一扫

随时随地学Java