对“打造基于jQuery的高性能TreeView”的扩展
2009-10-28 00:00:00 来源:WEB开发网代码中当 I 模 3余 2时,模拟生成了一些二级子项目。为的是能看到多级时的效果。
把原作者的代码修改一下,将原来引用json数据的代码改为引用我们生成的数据:
<!-- <script src="SampleData/tree2.js" type="text/javascript"></script> -->
<script src="Handler/GetTreeData.ashx" type="text/javascript"></script>
其他的都不用改动,运行程序后,看到效果如下:
至此,已经可以通过 一句“context.Response.Write(tdata.ToJsonString());”来使用这个酷树了。
看看是不是很简单的就可以重用了?
当然了,如果仅仅只是这样,也不算是什么扩展了,后面还会继续扩展,以使其他更适合更方便我们使用。
第四步:选中荐的扩展
在平时的使用中,经常要对树的选中项进行修改,这个时候就要先把原来选中的显示出来,我们为了方便在服务器端构造的json 能显示已经选中项,所以第一个扩展就是要增加一个选中项的方法。当然想这个方法时,为了能忠实的还原选项,我先写了一个方法,然后再对其进行了三次重构,以保证能正确的选中项,而且还能正确的还原上级节点的选中状态,过程就不多说了, 上代码:
SelectItem
/**//// <summary>
/// 选择相应的子节点
/// </summary>
/// <param name="arrId"></param>
/// <returns></returns>
public TreeItem SelectItem(int[] arrId)
{
return SelectImte(this, arrId);
}
private TreeItem SelectImte(TreeItem ti, int value)
{
ti.checkstate = 1;
if (ti.hasChildren)
{
for (int i = 0; i < ti.ChildNodes.Count; i++)
{
SelectImte(ti.ChildNodes[i], 1);
}
}
return ti;
}
private TreeItem SelectImte(TreeItem ti, int[] arrId)
{
if (arrId.Any(p => p.ToString() == ti.value))
{
ti.checkstate = 1;
if (ti.hasChildren)
{
for (int i = 0; i < ti.ChildNodes.Count; i++)
{
SelectImte(ti.ChildNodes[i], 1);
}
}
}
else
{
if (ti.hasChildren)
{
for (int i = 0; i < ti.ChildNodes.Count; i++)
{
SelectImte(ti.ChildNodes[i], arrId);
}
int nCount = ti.ChildNodes.Count(p => p.checkstate == 1);
if (nCount == 0)
{
ti.checkstate = 0;
}
else if (ti.ChildNodes.Count == nCount)
{
ti.checkstate = 1;
}
else
{
ti.checkstate = 2;
}
}
}
return ti;
}
赞助商链接