好用的treeGrid

jquery easyui 官网：http://www.jeasyui.net/plugins/186.html 

下面以学校班级情况，先贴出效果图吧！

数据库设计：红色框中为必须要有的列，右边三个为你要展示的信息

第一步：要使用easyUi的treeGrid，先引入JS和CSS把。

<link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../../themes/icon.css">
<link rel="stylesheet" type="text/css" href="../demo.css">
<script type="text/javascript" src="../../jquery.min.js"></script>
<script type="text/javascript" src="../../jquery.easyui.min.js"></script>

页面渲染：

1、如图，使用 javascript 创建一个树形网格（treegrid）

2、在页面上配置相关的信息，进行数据显示

 1 var tg = $("#tb").treegrid({
 2             url:'/my/stuTree/list/async',
 3             idField:'id', //根据那个字段判断树节点关系 一般都是id
 4             treeField:'name',  //只有name这个属性展现树结构
 5             method : 'get',
 6             height: 'auto',
 7             width : 'auto',
 8             fitColumns :true,
 9 
10             //发出一个加载数据的请求前触发，返回 false 就取消加载动作
11             onBeforeLoad:function(row,param){
12                 if(row) {// //动态设置展开查询的url
13                     $(this).treegrid('options').url='/my/stuTree/list/async?pId='+row.id;
14                 }
15             },
16             columns:[[
17                 {field:'name',title:'名称',150},
18                 {field:'code',title:'编号',100},
19                 {field:'status',title:'状态',formatter: function(value, row, index){ //这里可以对数据进行格式化
20                     if(value == '1'){
25                         return '<span class="label label-sm label-success"> 启用 </span>';
26                     }
27 
28                     if(value == '2'){
29                         return '<span class="label label-sm label-warning"> 停用 </span>';
30                     }
31 
36                     return "";
37                 }}
46             ]]
47         });

也可以加上下面两个：
 $(window).resize(function () {//当调整浏览器窗口的大小时，发生 resize 事件。
            tg.datagrid('resize', {
                 'auto',
                height: 'auto'
            })
        });

        //刷新按钮 -- 重新加载
        $('#deptList-btn-refresh').click(function () {
            reload(); //重新加载 treegrid 的数据
        });

控制器代码：dao层什么的底层数据访问我就不写了

@RequestMapping(value = "list/async")
    @ResponseBody
    public Object async(String pId) throws Exception {
        //把所有的数据查询放入集合中
        List<MyClass> list = myClassService.listUndeleteByPid(pId);

        if (list != null) {
            for (MyClass myClass : list) {

                //校验pid是否有子节点
                if (myClassService.hasChildren(myClass.getId())) {
                    myClass.setState("closed"); //设置点击状态 为 关闭
                }
            }
        }

        return list;
    }

实体类：

 1 @Entity
 2 @Table(name = "my_class")
 3 public class MyClass extends AbstractEntity {
 4     /**名称*/
 5     private String name;
 6     /**编号*/
 7     private String code;
 8 
 9     /**父节点Id*/
10     private String pId;
11 
12     private String state = null;
13 
14     @Column(name = "name")
15     public String getName() {
16         return this.name;
17     }
18 
19     public void setName(String name) {
20         this.name = name;
21     }
22     @Column(name = "code")
23     public String getCode() {
24         return this.code;
25     }
26 
27     public void setCode(String code) {
28         this.code = code;
29     }
30    
31     @Column(name = "p_id")
32     public String getPId() {
33         return this.pId;
34     }
35 
36     public void setPId(String pId) {
37         this.pId = pId;
38     }
39 
40 
41     @Column(name = "state")
42     public String getState() {
43         return state;
44     }
45 
46     public void setState(String state) {
47         this.state = state;
48     }
49 }

EasyUI简单实用，虽没有bootstrap界面框架漂亮，但对于没有UE的程序员开发和对公司内部网站已经是很不错的选择了。前阶段工作中，需要实现表格树，我想到了用Easyui中的Treegrid组件实现，虽然以前接触到过这个框架，但并不是太熟练，更对于treegrid扩展组件不太熟悉了。没有办法了，工作需要，只能就现学现用了。今天在这里总结下。