繁體中文当前位置: 首页 > 图文教程 > 网络编程 > ASP.NET > asp.net 自制的单选、多选列表实现代码
- ASP.NET
- .NET框架类库中的定时器类的使用
- net得到本地电脑基本信息的简单方法
- 如何通过ASP.NET页面重启服务器
- .net开发工具LINQ框架设计指南
- .net ajax 与Ext2框架在.net程序中的应用
- .Net上传图片按比例自动缩小或放大
- .NET的死锁调试工具:ACorns.Debugging
- ADO在vb.net中的使用（与datagrid结合）
- Visual C++中实现双缓冲的基本原理
- .net App中集成COM组件的一些简单技巧
- vb.net通过app.config来改变编译路径
- 实例了解Asp.Net的继承和多态性
- asp.net里导出excel表方法汇总
- ASP.NET上传大于4M的文件的相关设置
- .Net开发漫谈：关于命名空间和目录划分
- .Net(C#)开发漫谈：关于变量的命名和属性
- .Net新手学堂：Lambda表达式的一般应用
- 故障解析：.NET开发正则表达式中BUG一例
- 一步一步安装VB.Net（图片较多，请稍等）
- 关于用ＶＢ做更漂亮的窗体的思考
ASP.NET 中的 asp.net 自制的单选、多选列表实现代码
出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-09-13 浏览: 138 ::
收藏到网摘: n/a
在ASP.NET的页面上，ListBox最终是渲染成select元素，而CheckListBox最终被渲染成div或者是table，使得二者的样式无法统一，或者说要统一很麻烦。 问：为什么要“自制”？不是有现成的控件吗？
答：在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中数据项的填充。
评论 (0) All
