当前位置:首页 > 使用ascx和Div来扩充列表框选择功能

使用ascx和Div来扩充列表框选择功能

点击次数:993  更新日期:2010-12-29
\n

在项目开发中,我们经常会通过使用列表框或组合框来解决选择问提。
但在列表框中,容纳的信息实在是有限,而且显示的条目也不能一次
性太多,那样对用户的操作也会造成不便。

有时可以通过用其它控件来替换掉列表框的展现部分,比如使用DataView或
DataList控件等,这可用自定义控件或用户控件来完成,这里介绍一个
常用的简单方法(使用用户控件)。

源码下载

方法是:
先建立一个ascx控件.


\n

(1)
ascx控件中再分出”txtDiv”和”listDiv”两个Div层.
“txtDiv”层中使用Css将内嵌的Label和div等Html元素,画出伪列表框样式.
“listDiv”层则通过一个DataList,负责将”伪列表框”的内容展现出来.


\n

之所以各使用独立的div是为了能通过客户端脚本来模拟列表框的展开和收缩,
能及时的将”listDiv”层显示和隐藏起来.


\n

(2)
为”listDiv”层的DataList添加搜索和分页功能,这样再多的内容也无须担心。
DataList的列中还需有一个选中列,这样当前选中项的文本和值,才能通过脚本。
将其转移到对应的隐藏控件中。


\n

(3)
父页面通过ascx控件的ItemText和ItemValue属性,
读取ascx页中的隐藏控件,来得到当前选中项的文本和值。


\n

最后的使用效果为:

a1.jpg
(图1-初始界面)


a2.jpg
(图2-显示列表)

a3.jpg
(图3-搜索和翻页)


a5.jpg
(图4-选中后隐藏显示列表)

a6.jpg
(图5-显示选中结果)


ascx控件的主要属性说明:


\n

PageSize :列表的页尺寸
TableName :读取的数据表名
ItemText :数据表中用作项文本的字段
ItemValue :数据表中用作项值的字段


\n

GetValue :得到当前的选中值.
GetText :得到当前的选中文本.

来源:oupatch的cnblogs

\n