在应用开发中树形表格treegrid是比较常用的控件用于展示数据结构数据，treegrid与datagrid控件使用方法基本相同，后台加载数据提供的json格式稍微有点区别，Json格式为：

{"total":9,"rows":[
    {"id":1,"region":"Wyoming"},
    {"id":11,"region":"Albin","f1":2000,"f2":1800,"f3":1903,"f4":2183,"f5":2133,"f6":1923,"f7":2018,"f8":1838,"_parentId":1},
    {"id":12,"region":"Canon","f1":2000,"f2":1800,"f3":1903,"f4":2183,"f5":2133,"f6":1923,"f7":2018,"f8":1838,"_parentId":1},
    {"id":13,"region":"Egbert","f1":2000,"f2":1800,"f3":1903,"f4":2183,"f5":2133,"f6":1923,"f7":2018,"f8":1838,"_parentId":1},
    {"id":2,"region":"Washington"},
    {"id":21,"region":"Bellingham","f1":2000,"f2":1800,"f3":1903,"f4":2183,"f5":2133,"f6":1923,"f7":2018,"f8":1838,"_parentId":2},
    {"id":22,"region":"Chehalis","f1":2000,"f2":1800,"f3":1903,"f4":2183,"f5":2133,"f6":1923,"f7":2018,"f8":1838,"_parentId":2},
    {"id":23,"region":"Ellensburg","f1":2000,"f2":1800,"f3":1903,"f4":2183,"f5":2133,"f6":1923,"f7":2018,"f8":1838,"_parentId":2},
    {"id":24,"region":"Monroe","f1":2000,"f2":1800,"f3":1903,"f4":2183,"f5":2133,"f6":1923,"f7":2018,"f8":1838,"_parentId":2}
],"footer":[
    {"region":"Total","f1":14000,"f2":12600,"f3":13321,"f4":15281,"f5":14931,"f6":13461,"f7":14126,"f8":12866}
]}

_parentId是必须提供的关键列，名字必须是这个名字，并且必须是小写，用于区别树形数据结构层次。

前端主要包括两部分，用于展示数据的html表格，以及为其加载数据的Js代码。

<table id="gridList" toolbar="#tb" fit="true"></table>

以上是html部分，主要就是html table表格，id属性是必须的，用于关联js，js代码如下：

//表格初始化
        $(function () {
             $('#gridList').treegrid({
                title: false,
                nowrap: false,
                iconCls: 'icon-list-bullets',
                dataType: "json",
                fitColumns: true,
                rownumbers: true,
                pagination: true,
                pageSize: 100,
                pageNumber: 1,
                pageList: [20, 40, 100],
                url: '/Article/ColumnList',
                idField: 'ID',
                treeField: 'NAME',
                columns: [[
                    { field: 'ck', checkbox: true },
                    { field: 'ID', title: 'ID', width: 120, align: 'center', hidden: true, sortable: true },
                    { field: 'NAME', title: '栏目名称', width: 240, align: 'left', sortable: true },
                    { field: 'ORDERNO', title: '显示顺序', width: 240, align: 'left', sortable: true }
                ]],
                striped: true,
                sortOrder: "ASC",
                sortName: "ORDERNO",
                singleSelect: true,
                selectOnCheck: true,
                checkOnSelect: true,
            });
            //设置分页控件
            $('#gridList').treegrid('getPager').pagination({
                beforePageText: '第',//页数文本框前显示的汉字
                afterPageText: '页 共{pages}页',
                displayMsg: '{from}-{to}条 共{total}条',
            });
        });

url: '/Article/ColumnList',制定数据获取地址，至此前端代码基本完成。

        public JsonResult ColumnList()
        {
            //获取flexigrid参数
            int pageSize = int.Parse(ClassesLib.GetString("rows").ToString());
            int pageIndex = int.Parse(ClassesLib.GetString("page").ToString());
            string sortName = ClassesLib.GetString("sort").ToString();
            string sortOrder = ClassesLib.GetString("order").ToString();
            //获取外部查询条件
            string define = "";
            string logic = " AND ";
            string tmp1 = HttpContext.Request.Form["NAME"] == null ? "" : HttpContext.Request.Form["NAME"];
            define = (define == "" ? (tmp1 == "" ? "" : (" NAME like '%" + tmp1 + "%'")) : (tmp1 == "" ? define : (define + " " + logic + " NAME like '%" + tmp1 + "%'")));
            string returnTotal = "";
            var list = ColumnBaseService.GetTreeModels(pageSize, pageIndex, define, sortName + " " + sortOrder, ref returnTotal).ToList();
            //树表处理
            List<Object> treeList = new List<object>();
            foreach (ColumnTreeGridList a in list)
            {

                if (a.PARENTID.Equals("ROOT"))
                    treeList.Add(new { ID = a.ID, NAME = a.NAME, ORDERNO = a.ORDERNO,  IFDISABLE = a.IFCLOSE });
                else
                    treeList.Add(new { ID = a.ID, NAME = a.NAME, ORDERNO = a.ORDERNO, IFDISABLE = a.IFCLOSE, _parentId = a.PARENTID });
            }
            var json = new
            {
                total = returnTotal,
                rows = treeList.ToArray()
            };
            return Json(json, JsonRequestBehavior.AllowGet);
        }

以上代码具体说明如下：

//获取flexigrid参数
int pageSize = int.Parse(ClassesLib.GetString("rows").ToString());
int pageIndex = int.Parse(ClassesLib.GetString("page").ToString());
string sortName = ClassesLib.GetString("sort").ToString();
string sortOrder = ClassesLib.GetString("order").ToString();

以上代码用于获取前端treegrid传过来的分页及排序相关参数，代码是必须的。

//获取外部查询条件
            string define = "";
            string logic = " AND ";
            string tmp1 = HttpContext.Request.Form["NAME"] == null ? "" : HttpContext.Request.Form["NAME"];
            define = (define == "" ? (tmp1 == "" ? "" : (" NAME like '%" + tmp1 + "%'")) : (tmp1 == "" ? define : (define + " " + logic + " NAME like '%" + tmp1 + "%'")));

这里用于根据前台传过来的查询参数，进行构造查询语句代码，不是必须的。

var list = ColumnBaseService.GetTreeModels(pageSize, pageIndex, define, sortName + " " + sortOrder, ref returnTotal).ToList();

这句是分页查询数据库获取树形数据部分，直接返回list，具体代码如下：

        public List<ColumnTreeGridList> GetTreeModels(int pageSize, int pageIndex, string whereStr, string orderByStr, ref string returnTotal)
        {
            if (whereStr == "") whereStr = "1=1";
            string sqlStrTmp = "SELECT * FROM M_COLUMN_BASE WHERE " + whereStr;
            string sqlStr = "SELECT TOP " + pageSize + " * FROM (SELECT ROW_NUMBER() OVER (ORDER BY " + orderByStr + ") AS RowNumber,* FROM (" + sqlStrTmp + ") as b) A WHERE RowNumber > " + pageSize + "*(" + pageIndex + "-1) order by RowNumber";
            var list = dbContext.Database.SqlQuery<ColumnTreeGridList>(sqlStr).ToList();
            //取得总记录个数
            sqlStrTmp = "SELECT Count(ID) AS LISTCOUNT FROM M_COLUMN_BASE WHERE " + whereStr;
            returnTotal = dbContext.Database.SqlQuery<ListCountViewModel>(sqlStrTmp).ToList()[0].LISTCOUNT.ToString();//获取总页数
            return dbContext.Database.SqlQuery<ColumnTreeGridList>(sqlStr).ToList();
        }

//树表处理
            List<Object> treeList = new List<object>();
            foreach (ColumnTreeGridList a in list)
            {

                if (a.PARENTID.Equals("ROOT"))
                    treeList.Add(new { ID = a.ID, NAME = a.NAME, ORDERNO = a.ORDERNO,  IFDISABLE = a.IFCLOSE });
                else
                    treeList.Add(new { ID = a.ID, NAME = a.NAME, ORDERNO = a.ORDERNO, IFDISABLE = a.IFCLOSE, _parentId = a.PARENTID });
            }

以上代码应该可以跟查询语句合二为一，主要形成_parentId列使用，因为查询语句没有，这里新增的。

属性

该属性扩展自数据网格（datagrid），下面是为树形网格（treegrid）添加的属性。

事件

该事件扩展自数据网格（datagrid），下面是为树形网格（treegrid）添加的事件。

方法

很多方法需要一个名为 'id' 的参数，该参数表示树节点的值。