对“打造基于jQuery的高性能TreeView”的扩展

核心提示：话说今天看到了一个TreeView 效果真是帅呆了，截个图如下：该博客的地址：http://www.cnblogs.com/xuanye/archive/2009/10/26/1590250.html博主是：假正经哥哥大家没有看的可以先去看一下，对“打造基于jQuery的高性能TreeView”的扩展，从看到这个效果的

话说今天看到了一个TreeView 效果真是帅呆了，截个图如下：

　　

该博客的地址：http://www.cnblogs.com/xuanye/archive/2009/10/26/1590250.html

博主是：假正经哥哥

大家没有看的可以先去看一下。

从看到这个效果的那刻起，我就深深的被它吸引。自己平时很多的地方其实也是可以用到TreeView的，但因为自己做出来的东西自己都很不爽，所以一般的尽量用 DropDownList来处理类似的效果，虽说没有这个树好看，但开发起来比较快。我把作者的代码和js、css、图片 一个一个的拿下来，自己运行，感觉真的很爽，而看他的代码，是通过一个json的对象来填充数据项。既然这样，那我能不能在服务器端生成相应的json 呢？如果生成成功的话，那不是就可以轻松的把这种很酷的东西用到自己的项目中了？？ 之前看过老赵的在服务器生成客户端验证的做法，很符合自己的想法，今天我也来试试，通过在服务器端生成的相应的数据来使用该牛人的树形控件：）。

首先说一下：这个控件还是原作者的（如果有版权也是他的），甚至客户端的代码都基本不用修改动，我要做的是轻松生成相应的数据。废话不说了，开始吧：

第一步：设计树节点类

根据原文 js 代码中的 json 格式进行分析，我想使用一个类来表示这个json 的，类的设计如下：

TreeItem

public　class　TreeItem
{
　　　　public　TreeItem()
　　　　{
　　　　　　　　showcheck=true;
　　　　　　　　checkstate　=　0;　
　　　　　　　　complete　=　true;
　　　　　　　　isexpand　=　false;
　　　　}
　　　　属性#region　属性
　　　　/**////　<summary>
　　　　///　项目ID
　　　　///　</summary>　
　　　　public　int　id　{　get;　set;　}
　　　　/**////　<summary>
　　　　///　项的文本
　　　　///　</summary>　
　　　　public　string　text　{　get;　set;　}
　　　　/**////　<summary>
　　　　///　项的值
　　　　///　</summary>　
　　　　public　string　value　{　get;　set;　}
　　　　/**////　<summary>
　　　　///　是否显示选择框
　　　　///　</summary>　
　　　　public　bool　showcheck　{　set;　get;　}
　　　　/**////　<summary>
　　　　///　子节点是否展开
　　　　///　</summary>　
　　　　public　bool　isexpand　{　set;　get;　}
　　　　/**////　<summary>
　　　　///　子节点选择框的状态
　　　　///　</summary>　
　　　　public　int　checkstate　{　get;　set;　}
　　　　/**////　<summary>
　　　　///　是否有子节点
　　　　///　</summary>　
　　　　public　bool　hasChildren　{　get　{　return　(ChildNodes　!=　null　&&　ChildNodes.Count　>　0);　}　}
　　　　/**////　<summary>
　　　　///　是否完成（用于区分是否要异步load数据）
　　　　///　此处之前有点误解，以为是标注是否是某层的最后一个节点，如果是有在最后一个节点才给　true,其它的地方都是给的　true.
　　　　///　但在生成的树中，点击含有子树的节点时，始终显示　"loading"，通过分析　tree.js　才知道　这个地方的真正意义，对于非异步的该字段的取值都为1
　　　　///　</summary>　
　　　　public　bool　complete　{　get;　set;　}
　　　　/**////　<summary>
　　　　///　子节点列表
　　　　///　</summary>　
　　　　public　List<TreeItem>　ChildNodes　{　get;　set;　}
　　　　#endregion　属性
}