插件介绍:轻量级表格树treegrid, 支持bootstrap 风格

官网:http://maxazan.github.io/jquery-treegrid/

---

引入文件:

<link rel="stylesheet" href="statics/treeGrid/jquery.treegrid.css">


<script type="text/javascript" src="statics/treeGrid/jquery.treegrid.js"></script>
        <script type="text/javascript" src="statics/treeGrid/jquery.treegrid.bootstrap3.js"></script>

---

用法:
其静态页面:

 <table class="table tree-2 table-bordered table-striped table-condensed">
                <tr class="treegrid-1">
                    <td>Root node 1</td><td>Additional info</td>
                </tr>
                <tr class="treegrid-2 treegrid-parent-1">
                    <td>Node 1-1</td><td>Additional info</td>
                </tr>
                <tr class="treegrid-3 treegrid-parent-1">
                    <td>Node 1-2</td><td>Additional info</td>
                </tr>
                <tr class="treegrid-4 treegrid-parent-3">
                    <td>Node 1-2-1</td><td>Additional info</td>
                </tr>
                <tr class="treegrid-5">
                    <td>Root node 2</td><td>Additional info</td>
                </tr>
                <tr class="treegrid-6 treegrid-parent-5">
                    <td>Node 2-1</td><td>Additional info</td>
                </tr>
                <tr class="treegrid-7 treegrid-parent-5">
                    <td>Node 2-2</td><td>Additional info</td>
                </tr>
                <tr class="treegrid-8 treegrid-parent-7">
                    <td>Node 2-2-1</td><td>Additional info</td>
                </tr>        
            </table>    

 $(document).ready(function() {
                $('.tree').treegrid();
                $('.tree-2').treegrid({
                    expanderExpandedClass: 'glyphicon glyphicon-minus',
                    expanderCollapsedClass: 'glyphicon glyphicon-plus'
                });

            });

根据其静态页面我们可以看到,只需class按照其样式拼接就可以达到效果,所以可以去后台取数据,反给前台,后台的数据包含的信息要有
pid id level(节点等级) 等关键信息,当然这个不是必须,可以自行处理,只需知道想达到效果就要按照样式拼接.

---

效果展示(代码不全,仅供参考):

 <table class="table tree-2 table-bordered table-striped table-condensed">
                                  <thead>
                                    <th>模版名称</th>
                                    <th>检查评定</th>
                                    <th>备注</th>
                                  </thead>
                                  <tbody id="treeGrid">

                                  </tbody>
                              </table>
   js:                           
    //查询定制模板项
           $("#makeProject").change(function () {
               var mid = $(this).val();
               $.get("mvc/safeCheck/get-make-Project/"+mid+"?"+Math.random(), function (resp) {
                   var zNodes = resp.data;
                   //清空
                   $("#treeGrid").html("");
                   $.each(zNodes, function (index,item) {
                       if(item.level == 1) {//一级
                           $("#treeGrid").append("" +
                                   " <tr class='treegrid-"+item.id+"'>"
                                        +"<td>"+item.name+"</td><td> </td><td>"+" "+"</td>"
                           +"</tr>");
                       } else if (item.level == 2) {//二级
                           $("#treeGrid").append("" +
                                   " <tr class='treegrid-"+item.id+" treegrid-parent-"+item.pId+"'>"
                                   +"<td>"+item.name+"</td><td> </td><td>"+" "+"</td>"
                                   +"</tr>");
                       } else if (item.level == 3) {//三级
                           $("#treeGrid").append("" +
                                   " <tr class='treegrid-"+item.id+" treegrid-parent-"+item.pId+"'>"
                                   +"<td>"+item.name+"</td><td> </td><td>"+" "+"</td>"
                                   +"</tr>");
                       } else{//四级
                           if (item.value){//分值类型
                               $("#treeGrid").append("" +
                                       " <tr id='"+item.id+"' class='treegrid-"+item.id+" treegrid-parent-"+item.pId+"'>"
                                       +"<td>"+item.name+"</td><td style='width: 20%'>"+"分值:&nbsp;<input  style='width: 40%' value='10' type= 'number' >&nbsp;&nbsp;满分:"+item.value+"</td><td>"+"<input type='text'>"+"</td>"
                                       +"</tr>");
                           }else {//是否合格项
                               $("#treeGrid").append("" +
                                       " <tr id='"+item.id+"' class='treegrid-"+item.id+" treegrid-parent-"+item.pId+"'>"
                                       +"<td>"+item.name+"</td><td style='width: 10%'>"+"<input type= 'checkbox' value='Y' onclick='setVal($(this));' >不合格"+"</td><td>"+"<input type='text'>"+"</td>"
                                       +"</tr>");
                           }
                       }
                   });
                   $('.tree-2').treegrid({
                       expanderExpandedClass: 'glyphicon glyphicon-minus',
                       expanderCollapsedClass: 'glyphicon glyphicon-plus'
                   });

               }, "json");

           });
后台实体类字段举例:
    private String id;
    private String name;
    private String pid;
    private String levelType;//等级