动态载入数据的无刷新TreeView控件(2)
2005-03-13 16:17
337 查看
昨天说了一下TreeView控件的数据结构和UI表现的设计。为了让一个TreeView控件有更好的实用性,对它的功能和外观作一些必要的定制是非常有用的,今天就来说一下关于定制这个TreeView相关的一些设计。因为这些东西在一开始编码后就会马上被使用到,先确定好能省不少事。
目前设计了3个辅助TreeView的类,它们分别是:
还有一个全局Object实例__GlobalTreeCache__,用来cache所有的Tree和TreeNode的实例,作用是用来快速的定位制定的TreeNode,特别在异步动态Load子树时非常的有用。
TreeType设计成一个static的类,不能实例化,当然它更像是一个enum。
TreeStyle和TreeAttribute的结构和使用都相同,分开只是为了逻辑上面更加的清晰。这两个类的实现非常简单,就是在其内部定义很多的属性条目就行了。这里有问题的是怎么把这两个内的实例应用到TreeView的实例上去。有两个方法来做这个事情,如果我们不怕麻烦,就先分别生成一个TreeStyle和TreeAttribute的实例,然后再分别赋值给Tree和TreeNode。第二是让Tree和TreeNode内部自动维护这个TreeStyle和TreeAttribute,目前的实现采用的第二种方法,因为这样似乎是TreeView的使用更加简洁。
function Tree(attribute, style)
{
// . . .
this.m_Attributes = attribute ? attribute : new TreeAttribute();
this.m_Styles = style ? style : new TreeStyle();
}
用户不用去关心TreeStyle和TreeAttribute的生成,然后整棵树共享第一次初始化时生成的TreeStyle和TreeAttribute实例。不过必须注意的是,以后对子树的初始化需要赋给attribute和style参数,否这子树就会生成自己的TreeStyle和TreeAttribute实例 function TreeStyle()
{
this.toString = function()
{
return '[class TreeStyle]';
};
}
TreeStyle.OpIcon = function(image)
{
return 'Skins/default/' + image + '.gif';
};
TreeStyle.Icon = function(icon)
{
if ( !icon )
{
icon = 'default.gif';
}
if ( icon.indexOf('.') == -1 )
{
icon += '.gif';
}
return 'Skins/' + icon;
};
function TreeAttribute()
{
this.m_TextIndent = 2;
this.m_HasCheckBox = true;
this.toString = function()
{
return '[class TreeAttribute]';
};
}
to be continued ...
目前设计了3个辅助TreeView的类,它们分别是:
Class Name | Description |
---|---|
TreeType | 表明树的类型,特殊类型有的地方要特殊处理 |
TreeStyle | 树的外观定制的一些属性和方法 |
TreeAttribute | 树的功能定制的一些属性和方法 |
TreeType设计成一个static的类,不能实例化,当然它更像是一个enum。
TreeStyle和TreeAttribute的结构和使用都相同,分开只是为了逻辑上面更加的清晰。这两个类的实现非常简单,就是在其内部定义很多的属性条目就行了。这里有问题的是怎么把这两个内的实例应用到TreeView的实例上去。有两个方法来做这个事情,如果我们不怕麻烦,就先分别生成一个TreeStyle和TreeAttribute的实例,然后再分别赋值给Tree和TreeNode。第二是让Tree和TreeNode内部自动维护这个TreeStyle和TreeAttribute,目前的实现采用的第二种方法,因为这样似乎是TreeView的使用更加简洁。
function Tree(attribute, style)
{
// . . .
this.m_Attributes = attribute ? attribute : new TreeAttribute();
this.m_Styles = style ? style : new TreeStyle();
}
用户不用去关心TreeStyle和TreeAttribute的生成,然后整棵树共享第一次初始化时生成的TreeStyle和TreeAttribute实例。不过必须注意的是,以后对子树的初始化需要赋给attribute和style参数,否这子树就会生成自己的TreeStyle和TreeAttribute实例 function TreeStyle()
{
this.toString = function()
{
return '[class TreeStyle]';
};
}
TreeStyle.OpIcon = function(image)
{
return 'Skins/default/' + image + '.gif';
};
TreeStyle.Icon = function(icon)
{
if ( !icon )
{
icon = 'default.gif';
}
if ( icon.indexOf('.') == -1 )
{
icon += '.gif';
}
return 'Skins/' + icon;
};
function TreeAttribute()
{
this.m_TextIndent = 2;
this.m_HasCheckBox = true;
this.toString = function()
{
return '[class TreeAttribute]';
};
}
to be continued ...
相关文章推荐
- 动态载入数据的无刷新TreeView控件(9)
- 动态载入数据的无刷新TreeView控件(5)
- 动态载入数据的无刷新TreeView控件(4)
- 动态载入数据的无刷新TreeView控件(7)
- 动态载入数据的无刷新TreeView控件(8)
- 动态载入数据的无刷新TreeView控件(1)
- 动态载入数据的无刷新TreeView控件(3)
- 动态载入数据的无刷新TreeView控件(6)
- 滚屏加载--无刷新动态加载数据技术的应用
- 后台获取数据,动态更新到网页--无闪烁刷新
- Highcharts动态取值,刷新数据的解决方案
- 无刷新动态加载数据 滚动条加载适合评论等页面
- Android动态刷新listview中的数据
- AngularJS+Echarts利用Ajax实现数据动态刷新
- 用asp+javascript实现动态数据联动,不刷新
- extjs的tree的使用(拖动、动态载入json数据、拖动后的事件处理)
- java JTable 动态拉取数据显示及自动刷新
- saucer(思归)解决的关于:页面A.aspx 动态载入用户自定义控件a.ascx,但a.ascx中的按钮提交后,不执行按钮的事件,而是直接刷新页面
- JTable动态刷新数据
- 利用localStorage防止页面动态添加数据刷新后数据丢失