1.效果截圖

2.資料結構

[{"mcode":"UI","mname":"頁面開發模板","micon":"glyphicon glyphicon-th","murl":"","explains":"開發頁面的常用元件和頁面","parent":null,"sort":4,
    "children":[
        {"mcode":"Cssd","mname":"CSS動畫","micon":"glyphicon glyphicon-briefcase","murl":"/css/aaa","explains":"aaaaa啊啊啊aaaaa","parent"
 
:"UI","sort":1,
            "children":[]}]}]

//控制器         
@ResponseBody
@RequestMapping(value = "/selectZtreeModule", produces = {"application/json;charset=UTF-8"})
public List<Module> selectZtreeModule(HttpServletRequest request){
    List<Module> modules = new ArrayList<Module>();
    try
 
 {
        HashMap param = new HashMap();
        //。。。前臺搜尋關鍵字searchText。。。
        modules= moduleService.selectModuleList(param);
        modules=putChildren(modules);
    } catch (Exception e) {
        modules=null;
    }
    return modules;
}
//迴圈遍歷下級節點，新增到module實體中
public List<Module> putChildren
 
(List<Module> moduleList){
    if(moduleList.size()>0){
        for(Module mod2:moduleList){
            HashMap param = new HashMap();
            param.put("parent",mod2.getMcode());
            List<Module> res2 = moduleService.selectModuleList(param);
            if(res2.size()>0){res2=putChildren(res2);}
            mod2.setChildren(res2);
        }
    }
    return moduleList;
}

//實體
public class Module {
    private String mcode;
    private String mname;
    private String micon;
    private String murl;
    private String explains;
    private String parent;
    private Integer sort;
    private List<Module> children;
}

//mapper
 SELECT mcode,mname,micon,murl,explains,parent,sort FROM sys_module
    <where>
      <if test="searchText!=null">
        (mcode like #{searchText} or mname like #{searchText})
      </if>
      <if test="parent==null">
        AND parent is null
      </if>
      <if test="parent!=null">
        AND parent=#{parent}
      </if>
    </where>
      ORDER BY sort

3，關鍵js程式碼

<script type="text/javascript">
/*
        通過指定的方法來自定義欄資料
    */
    function customCheckBox(row, col){
        return "<input type='checkbox' name='city_name' onclick='selCk(this)'  id='"+row.mcode+"'>";
    }
    //圖示
    function customerIcon(row){
        return "<span class='"+row.micon+"' aria-hidden='true'></span>";
    }
    //行點選事件
    function itemClickEvent(id, index, data){
        console.log("選中行：",data);
    }
    //表格設定
    var config = {
            id: "moduleListTable",   //表格ID
            width: "800",    //最小寬度
            renderTo: "div1",  //指定表格生成的父容器ID
            headerAlign: "left",
            headerHeight: "30",
            dataAlign: "left", //預設的資料水平位置
            indentation: "20",
            folderOpenIcon: "/js/plugins/dataTables/images/folderOpen.gif",  //圖示地址
            folderCloseIcon: "/js/plugins/dataTables/images/folderClose.gif",
            defaultLeafIcon: "/js/plugins/dataTables/images/defaultLeaf.gif",
            hoverRowBackground: "false",
            folderColumnIndex: "1",
            itemClick: "itemClickEvent",      //點選事件
            columns:[
                //headerAlign表頭水平位置，dataAlign資料水平位置
                {headerText: "", headerAlign: "center", dataAlign: "center", width: "20", handler: "customCheckBox"},
                {headerText: "資源名稱", dataField: "mname", headerAlign: "center", dataAlign: "left"},
                {headerText: "資源ID", dataField: "mcode", headerAlign: "center", width: "150"},
                {headerText: "資源地址", dataField: "murl", headerAlign: "center", dataAlign: "left", width: "300"},
                {headerText: "資源圖示", dataField: "micon", headerAlign: "center", dataAlign: "center", width: "100",handler:"customerIcon"},
                {headerText: "描述", dataField: "explains", headerAlign: "center", dataAlign: "left", width: "300"},
                {headerText: "父節點", dataField: "parent", headerAlign: "center", dataAlign: "center", width: "50",hidden:true},
                {headerText: "排序", dataField: "sort", headerAlign: "center", dataAlign: "center", width: "50"}
            ],
            url:"/module/selectZtreeModule"     //請求地址
        };
        //建立一個元件物件
        var treeGrid = new TreeGrid(config);
        treeGrid.show();   //相當於datagrid的reload，在新增刪除資料之後呼叫重新整理表格

    /*
        展開、關閉所有節點。
        isOpen=Y表示展開，isOpen=N表示關閉
    */
    function showAll(){
        if($("#Openbtn>i").hasClass("glyphicon-folder-close")){
            treeGrid.expandAll("Y");
            $("#Openbtn>i").removeClass("glyphicon-folder-close").addClass("glyphicon-folder-open");
        }else{
            treeGrid.expandAll("N");
            $("#Openbtn>i").removeClass("glyphicon-folder-open").addClass("glyphicon-folder-close");
        }

    }

    //級聯選中、取消選中
    //(取消)選中父節點，其子節點自動(取消)選中
    function selCk(ck)
    {
        var ckId = $(ck).attr("id");
        var tr = $(ck).parent().parent();

        treeGrid.checkSubs(tr.attr("id"),$(ck).prop("checked"));
    }
</script>

4.頁面引用

<div class="example" id="div1">
    <div class="btn-group hidden-xs" id="moduleTableToolbar" role="group">

        <button  type="button" class="btn btn-outline btn-default" onclick="addModuleModal('add');">
            <i class="glyphicon glyphicon-plus" aria-hidden="true"></i>
        </button>
        <button  type="button" class="btn btn-outline btn-default" onclick="addModuleModal('edit');">
            <i class="glyphicon glyphicon-edit" aria-hidden="true"></i>
        </button>
        <button type="button" class="btn btn-outline btn-default" onclick="delModule();">
            <i class="glyphicon glyphicon-trash" aria-hidden="true"></i>
        </button>
        <button type="button" id="Openbtn" class="btn btn-outline btn-default" onclick="showAll();">
            <i class="glyphicon glyphicon-folder-open" aria-hidden="true"></i>
        </button>
    </div>
    <!--<table id="moduleListTable"></table>-->
</div>


<!-- 全域性js -->
<script src="../../static/js/jquery.min.js" th:src="@{/js/jquery.min.js}"></script>
<script src="../../static/js/bootstrap.min.js" th:src="@{/js/bootstrap.min.js}"></script>
<script src="../../static/js/plugins/layer/layer.min.js" th:src="@{/js/plugins/layer/layer.min.js}"></script>

<!-- TreeGrid table -->
<script src="../../static/js/plugins/dataTables/TreeGrid.js" th:src="@{/js/plugins/dataTables/TreeGrid.js}"></script>

5.重點來了，核心js檔案

TreeGrid.js