jQuery treetable 3.2 + asp.net 应用

原创 2015年11月19日 10:09:06

发现了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

Delphi7高级应用开发随书源码

  • 2003年04月30日 00:00
  • 676KB
  • 下载

jquery treetable 实例

今天做菜单时候 在网上找了一些资料 发现大多数都是一代而过 没有可以运行的样例 把官方提供的资料看了一下 简单的实现了出来 代码: TreeTable ...

通过ASP.NET Web API + JQuery创建一个简单的Web应用

看了dudu的《HttpClient + ASP.NET Web API, WCF之外的另一个选择》一文,想起多很久之前体现ASP.NET Web API而创建的一个Demo。这是一个只涉及到简单...

使用HTTP处理程序和jQuery在ASP.NET Web应用程序中的进行数据库操作

使用HTTP处理程序和jQuery在ASP.NET Web应用程序中的进行数据库操作

AJAX在ASP.NET中的应用(二)——Jquery封装的AJAX

前言:如果你现在还不知道什么是Jquery,那么你必须先对它进行基础的了解和学习,当然对于已经有些html和javascript功底的开发者来说这是件比较容易的事情,网上关于Jquery的教程也非常多...

jQuery 插件autocomplete自动完成应用(自动补全)(asp.net后台)

项目中有时会用到自动补全查询,就像Google搜索框、淘宝商品搜索功能,输入汉字或字母,则以该汉字或字母开头的相关条目会显示出来供用户选择, autocomplete插件就是完成这样的功能 ...

Asp.Net MVC4开发三:HTML5、CSS3、JQuery、JQuery UI的应用

在Asp.Net MVC4里面UI层也就是View层默认使用HTML5以及与HTML相对应的CSS3,JS默认使用JQuery和JQuery UI。新建一个MVC4项目,项目会自动包含JQuery、J...

jquery ajax在asp.net中的应用

  • 2012年11月08日 17:27
  • 982KB
  • 下载

Asp.net mvc 3.0入门教程之3.2————View视图

本文摘自:http://www.cnblogs.com/libinlink/archive/2011/05/05/2037319.html 改变视图和布局页   首先,您希望改变页面上最上边的标...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:jQuery treetable 3.2 + asp.net 应用
举报原因:
原因补充:

(最多只允许输入30个字)