关闭

jQuery treetable 3.2 + asp.net 应用

标签: jquerytreeasp.netjqueryjavascript
682人阅读 评论(0) 收藏 举报
分类:

发现了jtreetable 可以把普通的表格转换成树形表格后,对它发生了兴趣然后加入到了开发的项目里。
先看下最后生成的效果图【1】。
最终效果图
下面说下具体实现。
1.普通的jtreetable 只能按照一它本身JS里写好的方法来实现这种树形的效果。如下代码所示:
<table>
<tr data-tt-id="1"><td>Parent</td></tr>
<tr data-tt-id="2" data-tt-parent-id="1"><td>Child</td></tr>
</table>

data-tt-id 我自己的理解就是父亲节点自身在数据库中的ID【一般为自动编号】
data-tt-parent-id 为父节点ID
那么问题来了,想要实现如上图所示的树形效果,就一定要安这种写法生成TABLE。这对动态的数据库来说有点困难,因为数据表中的顺序不一定就会是有序的。
如下图所示【2】 就是我自己项目中数据表中真实的样子。
数据表
看主要字段:parendId 这个顺序就不是按顺序形成的。所以要排序。
:数据表主要说明,parendId:父节点。来自于ID字段。parentId为0的是根节点。
2.要为查询结果排序。根据我这个表 我查询要按parentId和ID进行asc排序即可。如图1所示。我用的是Repeater控件进行动态生成。
代码如下。

MODEL:Department
  public class Department
    {
        /// <summary>
        /// 传真
        /// </summary>
        public string Fax { get; set; }
        /// <summary>
        /// 自动编号
        /// </summary>
        public int Id { get; set; }
        /// <summary>
        /// 部门列表(顶级,上一级…自
        /// </summary>
        public string Ids { get; set; }
        /// <summary>
        /// 停用标识 0未停用 1已停用
        /// </summary>
        public int IsDel { get; set; }
        /// <summary>
        /// 部门名称
        /// </summary>
        public string Name { get; set; }
        /// <summary>
        /// 旧系统对应ID
        /// </summary>
        public int Oid { get; set; }
        /// <summary>
        /// 上级部门ID 0为顶级
        /// </summary>
        public int ParentId { get; set; }
        /// <summary>
        /// 部门所在城市
        /// </summary>
        public string Place { get; set; }
        /// <summary>
        /// 备注说明
        /// </summary>
        public string Remark { get; set; }
        /// <summary>
        /// 部门联系电话
        /// </summary>
        public string Tel { get; set; }
        /// <summary>
        /// 新表部门主管ID 对应tbUser中的ID
        /// </summary>
        public int Uid { get; set; }
        /// <summary>
        /// 旧表对应部门主管ID 对应tbUser中的oid
        /// </summary>
        public int UoId { get; set; }
    }
数据加载:
IList<Department> list = new SysDal.Staff.DepartmentDal().GetLists(string.Empty);//获取排序后的数据集合。

可能是我这个表本身设计的问题,在此基础上最好加入一个字段**isLeaf**表明是否此项为叶子节点。如果没有可用下面的方法解决问题:
 IList<Department> sortList = new List<Department>();
 foreach (Department d in list)
 {
     d.Remark = list.Where(p => p.ParentId == d.Id).ToList().Count > 0 ? "true" : "false";
     sortList.Add(d);
  }
  //sortList 为判断集合中每项是否为叶子结点后生成的集合 d.Remark = list.Where(p => p.ParentId == d.Id).ToList().Count > 0 ? "true" : "false"; 此句为判断。

   IList<Department> items = new List<Department>();//为实现jtreetable形式的table进行集合排序 最终用排序好的LIST进行数据绑定。
   foreach (Department item in sortList)
   {
      if (item.ParentId != 0)
      {
      //添加到排序后的数据集中
           items.Add(item);
          if (item.Remark == "true")
          { 
           ResetItems(sortList, items, item.Id);
          }
    }
    else
    {
      items.Add(item);
    }
  }

 this.Repeater1.DataSource = items.Take(list.Count).ToList();//取原始集合的数量进行最后的绑定。
 this.Repeater1.DataBind();

 /// <summary>
 /// 递归排序
 /// </summary>
 /// <param name="oItems">原数据集</param>
 /// <param name="nItems">排序后的数据集</param>
 /// <param name="parentCode">上级编码</param>
 private void ResetItems(IList<Department> oItems, IList<Department> nItems, int parentCode)
        {
            foreach (Department item in oItems)
            {
                if (item.ParentId == parentCode && nItems.Count < oItems.Count)//当新排序的集合达到原始集合的大小后就停止再做无功。这个地方也是我能想到最好的解决办法了,如果不这样 最后的集合会多出很多项,我也不理解是为啥了。谁有更好的办法可以告诉我下。我的邮箱:zyloegxs@yeah.net
                {
                    //添加到排序后的数据集中
                    nItems.Add(item);
                    //如果不是叶子节点,对子节点进行排序
                    if (item.Remark == "true")
                    {
                        ResetItems(oItems, nItems, item.Id);
                    }
                }
            }
        }
JS代码:
非常简单 就一句: $('#example-basic-expandable').treetable({ expandable: true });
‘example-basic-expandable’是表格ID

2015-11-25 补:重新加载
 $('#表格ID').treetable('destroy');//清除原有treetable
 $('#表格ID').treetable({ expandable: true }); //重新生成新的treetable

以上就是我对jtreetable在项目中的应用。如有那位大神有更好的办法请发我邮箱:zylovegxs@yeah.net 或QQ我 80704820

0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:2969次
    • 积分:64
    • 等级:
    • 排名:千里之外
    • 原创:3篇
    • 转载:2篇
    • 译文:0篇
    • 评论:0条
    文章分类