好用的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扩展组件不太熟悉了。没有办法了，工作需要，只能就现学现用了。今天在这里总结下。