欢迎来到.net学习网

欢迎联系站长一起更新本网站!QQ:879621940

您当前所在位置:首页 » EasyUI开发经验汇总 » 正文

为EasyUI的Tree与TreeGrid控件快速绑定数据

创建时间:2017年09月16日 08:58  阅读次数:(4439)
分享到:
我们知道,要为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列中存储了父标识
    }
}
来源:.net学习网
说明:所有来源为 .net学习网的文章均为原创,如有转载,请在转载处标注本页地址,谢谢!
【编辑:Wyf】

打赏

取消

感谢您的支持,我会做的更好!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

最新评论

共有评论0条
  • 暂无任何评论,请留下您对本文章的看法,共同参入讨论!
发表评论:
留言人:
内  容:
请输入问题 44+39=? 的结果(结果是:83)
结  果: