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