WEB开发网
开发学院网页设计JavaScript 对“打造基于jQuery的高性能TreeView”的扩展 阅读

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

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

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

对“打造基于jQuery的高性能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 属性
}

1 2 3 4 5 6  下一页

Tags:打造 基于 jQuery

编辑录入:爽爽 [复制链接] [打 印]
赞助商链接