全国统一热线:
028-86758058
18980748058
购买流程
付款方式
常见问题
在线提问
续租服务
购物车(
0
件)
用户名:
密 码:
记住
首 页
HOME
域名注册
DOMAIN
虚拟主机
WEB HOST
成品网站超市
AUTO Site
VPS主机
VPS SERVER
云 主 机
CLOUD HOST
租用托管
SERVER
海外主机
HK HOST
代理专区
AGENT
客服中心
SERVICE
站长教程
SERVICE
欢迎光临西部数据云计算中心,我们将竭诚为您提供最优质的服务!
中文域名
域名转入
域名转出
DNS管理
动态域名
获取域名证书
域名停放
域名过户
集群主机
双线主机
基本主机
港台主机
论坛主机
Linux主机
Vip合租主机
超G型主机
ASP.net主机
Java主机
智能建站主机
网店主机
美国主机
数据库
成品网站超市
智能建站主机
集群VPS主机
国内VPS主机
香港VPS主机
美国VPS主机
云主机介绍
云主机购买
服务器租用
主机托管
常见问题
香港主机
港台主机
美国主机
国内免备案
步骤流程
代理级别
代理合同
代理模式
代理优势
在线申请
产品列表
常见问题
代理商分布图
常见问题
有问必答
跟踪提问
购买流程
产品价格
付款方式
常用软件
网站备案
续租服务
汇款确认
相关文档
联系我们
域名资讯
主机资讯
行业动态
网页制作
php教程
mysql教程
域名资讯
云计算资讯
网络编程
您当前的位置:
首页
>
网络编程
>
Net教程
asp.net 自制的单选、多选列表实现代码
时间:2015-01-29 来源:互联网 作者:佚名
问:为什么要“自制”?不是有现成的控件吗?
答:在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 url重写浅谈
ActionlessForm.dll------用来处理回发 URLRewriter.dll----
C#精髓 GridView72大绝技 学习grid
快速预览:GridView无代码分页排序GridView选中,编辑,取消
相关文章
ASP.NET单选按钮控件RadioButton常用属性和方法介绍
asp.net listbox实现单选全选取消
在.net中用CheckBoxList实现单选
gridview中实现radiobutton的单选示例
DataGridView中CheckBox实现某一列单选
限制CheckBoxList控件只能单选实现代码及演示动画
通过RadioButton对DataList控件进行单选实例说明
asp.net 扩展GridView 增加单选按钮列的代码
栏目更新
栏目热门
返回首页
关于我们
联系我们
付款方式
价格总览
资讯中心
友情链接
媒体关注
有问必答
投诉建议
网站备案
《中华人民共和国增值电信业务经营许可证》编号:川B2-20080058号
官方网址:
xibushuju.com
西部数据
Copyright © 2002~2015
天府快车
版权所有
电话总机:
028-86758058
(50线) 传真:
028-86758058