我们知道,要为EasyUI的Tree或TreeGrid控件绑定数据,官方提供的json格式如下:
[{
"id":1,
"name":"C",
"size":"",
"date":"02/19/2010",
"children":[{
"id":2,
"name":".net学习网",
"size":"120 MB",
"date":"03/20/2010",
"children":[{
"id":21,
"name":"www.lmwlove.com",
"size":"",
"date":"01/13/2010",
"state":"closed"}]
}]
}]
也就是easyui认children下的数据为当前节点的子节点,但要实现这样格式的数据源比较麻烦,需要循环+递归添加children数据。那么有没有可能像为DataGrid绑定数据一样呢,直接序列化一个DataTable搞定呢?答案是可以的,那就是为DataTable添加一个_parentId列,并将每行父标识的值复制到该列即可,如下:
DataTable dt =… //取出需绑定的数据
dt.Columns.Add("_parentId");
foreach (DataRow dr in dt.Rows)
{
dr["_parentId"] = dr["PCode"]; //假设PCode列中存储了父标识
}
然后直接序列化dt,以TreeGrid为例,在js端为TreeGrid绑定数据即可,
$("#grid").treegrid("loadData", data)
注意:TreeGrid的idField属性与treeField属性要一定要设置正确哦,一般都会是数据的主键值,如下:
$("#grid").treegrid({
rownumbers: true,
border: false,
idField: "PesCode",
treeField: "PesCode", //这里设置的不是父列名,一般都会是主键,是主键,是主键……
columns: [[
{ field: '', checkbox: true },
{ field: 'PesCode', title: '权限代码', width: '100' },
{ field: 'PesName', title: '权限名称', width: '100' },
]]
})
注意:使用该方法时,顶级节点的_parentId值一定要为NULL,为空都不行。所以我们将上面取数据源的方式修改如下就好:
DataTable dt =… //取出需绑定的数据
dt.Columns.Add("_parentId");
foreach (DataRow dr in dt.Rows)
{
if (dr["PCode"].ToString().Length == 0)
{
dr["_parentId"] = DBNull.Value;
}
else
{
dr["_parentId"] = dr["PCode"]; //假设PCode列中存储了父标识
}
}