ligerUI---ligerGrid中treegrid(表格樹)的使用

寫在前面:

　　表格樹是在普通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";

    }

注意：對於前台頁面樹形表格的顯示是指定了idField為‘functionId’。parentIDField 為'fId',故后台在傳遞也應該有對應的functionId與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中對數據的處理要復雜的多，可自行選擇。

 

成功截圖：嘻嘻嘻嘻嘻嘻嘻~~~~~~~~~~~~~~~~~~~~收拾 下班。。