asp.net 自制的单选、多选列表实现代码

所属分类: 网络编程 / ASP.NET 阅读数: 1102
收藏 0 赞 0 分享
问:为什么要“自制”?不是有现成的控件吗?
答:在ASP.NET的页面上,ListBox最终是渲染成select元素,而CheckListBox最终被渲染成div或者是table,使得二者的样式无法统一,或者说要统一很麻烦。
解决:
于是,决定干脆自行组合一些元素,实现单选列表、多选列表的统一样式。
首先,无论是单选列表还是多选列表,都用一个有边框的div来做容器:
<div class="list"></div>
然后,在这个div中添加数据项。为了在响应onclick事件时,能够遍历数据项,进而做一些样式上的控制,我需要把各个数据项的name属性设为一样的,然后用getElementsByName获取(这种办法我在复选框的全选功能上常用)。然而,经过实践,发现div、span均无name属性,最终找到用锚点,也就是<a>标记,可以实现。
例如:
复制代码 代码如下:

<div id="divDepartments" class="list">
<a name="aDep" style="width:100%" onclick="ItemClicked(this);">部门1</a>
<a name="aDep" style="width:100%" onclick="ItemClicked(this);">部门2</a>
<a name="aDep" style="width:100%" onclick="ItemClicked(this);">部门3</a>
<a name="aDep" style="width:100%" onclick="ItemClicked(this);">部门4</a>
<a name="aDep" style="width:100%" onclick="ItemClicked(this);">部门5</a>
<a name="aDep" style="width:100%" onclick="ItemClicked(this);">部门6</a>
<a name="aDep" style="width:100%" onclick="ItemClicked(this);">部门7</a>
<a name="aDep" style="width:100%" onclick="ItemClicked(this);">部门8</a>
<a name="aDep" style="width:100%" onclick="ItemClicked(this);">部门9</a>
<a name="aDep" style="width:100%" onclick="ItemClicked(this);">部门10</a>
<a name="aDep" style="width:100%" onclick="ItemClicked(this);">部门11</a>
<a name="aDep" style="width:100%" onclick="ItemClicked(this);">部门12</a>
</div>

其中,list样式:
复制代码 代码如下:

.list
{
overflow-y:scroll;
width:120px;
height:150px;
padding:3px;
border:solid 1px #AFAFAF;
background-color: #ffffff;
cursor: pointer;
}

ItemClicked函数用来响应click事件。下面的代码只是做一些样式上的变化,还可继续添加加载数据的内容:
复制代码 代码如下:

function ItemClicked(a){
a.style.backgroundColor="#EEEEEE";
as=document.getElementsByName(a.name);
for(i=0;i<as.length;i++){
if(as[i]!=a){as[i].style.backgroundColor="#FFFFFF";}
}
}

带有复选框的多选列表也大同小异,只是这里由于遍历数据项时,只要对复选框遍历即可,故可以使用div做数据项的容器了:
复制代码 代码如下:

<div id="divPersons" class="list">
<div><input type="checkbox" />人员1</div>
<div><input type="checkbox" />人员2</div>
<div><input type="checkbox" />人员3</div>
<div><input type="checkbox" />人员4</div>
<div><input type="checkbox" />人员5</div>
<div><input type="checkbox" />人员6</div>
<div><input type="checkbox" />人员7</div>
<div><input type="checkbox" />人员8</div>
<div><input type="checkbox" />人员9</div>
<div><input type="checkbox" />人员10</div>
<div><input type="checkbox" />人员11</div>
</div>

最后,关于数据的加载问题,在当前的具体问题中,我打算用Ajax.Updater,来实现对相应列表的div中数据项的填充。
更多精彩内容其他人还在看

ASP.Net 之Datalist删除功能详解附代码

ASP.Net 之Datalist删除功能详解附代码,需要的朋友可以参考一下
收藏 0 赞 0 分享

ASP.NET(C#)验证数字的两种方法

ASP.NET(C#)验证数字的两种方法,需要的朋友可以参考一下
收藏 0 赞 0 分享

此页的状态信息无效,可能已损坏 的处理办法及原因分析

此页的状态信息无效,可能已损坏 的处理办法及原因分析,需要的朋友可以参考一下
收藏 0 赞 0 分享

MultiLine 换行后实现读取不换行的具体思路

输入内容中有换行,保存到数据库,直接查看感觉没有换行,但查询结果“以文本格式显示结果”你就会发现 其实是有换行的,下面与大家分享下具体的解决方法
收藏 0 赞 0 分享

swfupload ajax无刷新上传图片实例代码

在这里上传图片就需要用到ajax无刷新上传图片,这里面包含的东西不是一点半点。这里用到的是一个插件swfupload实现无刷新上传图片,感兴趣的朋友可以参考下哈
收藏 0 赞 0 分享

静态gb2312编码在项目传值出现中文乱码现象

参考的美工静态页面是gb2312格式的,当此编码拿到项目中后,utf-8编码的系统,加载页面时,会出现样式问题,比如不能正常居中等
收藏 0 赞 0 分享

System.Timers.Timer定时执行程序示例代码

如果是某个逻辑功能的定时,可以将code放到逻辑功能的类的静态构造函数中,在该逻辑类第一次执行时,静态构造函数会被调用,则定时自然启动
收藏 0 赞 0 分享

分享下Asp.Net面试题目及答案集合

这篇文章主要是总结asp.net开发人员在面试过程中常遇到的一些问题小结,需要的朋友可以参考下
收藏 0 赞 0 分享

给自定义Web控件添加事件(前后台代码)

给自定义控件(Web Control)添加事件具体前后台代码如下,感兴趣的朋友可以参考下哈
收藏 0 赞 0 分享

ASP.NET过滤器的应用方法介绍

ASP.NET过滤器的应用方法介绍,需要的朋友可以参考一下
收藏 0 赞 0 分享
查看更多