好用的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、在页面上配置相关的信息，进行数据显示

 var tg = $("#tb").treegrid({
             url:'/my/stuTree/list/async',
             idField:'id', //根据那个字段判断树节点关系 一般都是id
             treeField:'name',  //只有name这个属性展现树结构
             method : 'get',
             height: 'auto',
             width : 'auto',
             fitColumns :true,

             //发出一个加载数据的请求前触发，返回 false 就取消加载动作
             onBeforeLoad:function(row,param){
                 if(row) {// //动态设置展开查询的url
                     $(this).treegrid('options').url='/my/stuTree/list/async?pId='+row.id;
                 }
             },
             columns:[[
                 {field:'name',title:'名称',width:150},
                 {field:'code',title:'编号',width:100},
                 {field:'status',title:'状态',formatter: function(value, row, index){ //这里可以对数据进行格式化
                     if(value == '1'){
                         return '<span class="label label-sm label-success"> 启用 </span>';
                     }

                     if(value == '2'){
                         return '<span class="label label-sm label-warning"> 停用 </span>';
                     }

                     return "";
                 }}
             ]]
         });

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

实体类：

 @Entity
 @Table(name = "my_class")
 public class MyClass extends AbstractEntity {
     /**名称*/
     private String name;
     /**编号*/
     private String code;

     /**父节点Id*/
     private String pId;

     private String state = null;

     @Column(name = "name")
     public String getName() {
         return this.name;
     }

     public void setName(String name) {
         this.name = name;
     }
     @Column(name = "code")
     public String getCode() {
         return this.code;
     }

     public void setCode(String code) {
         this.code = code;
     }

     @Column(name = "p_id")
     public String getPId() {
         return this.pId;
     }

     public void setPId(String pId) {
         this.pId = pId;
     }

     @Column(name = "state")
     public String getState() {
         return state;
     }

     public void setState(String state) {
         this.state = state;
     }
 }

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