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

￡神魔★判官ぃ 2022-09-29 06:08 264阅读 0赞

官网:[http://maxazan.github.io/jquery-treegrid/][http_maxazan.github.io_jquery-treegrid]

--------------------

引入文件:

--------------------

用法:  
其静态页面:

<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%'>"+"分值: <input style='width: 40%' value='10' type= 'number' >  满分:"+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;//等级

![这里写图片描述][SouthEast]

[http_maxazan.github.io_jquery-treegrid]: http://maxazan.github.io/jquery-treegrid/
[SouthEast]: /images/20220708/8eef46adcc0840118745ba244aafdfee.png