当前位置： 移动技术网 > IT编程>开发语言>.net > asp.net 自制的单选、多选列表实现代码

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

2017年12月12日  | 移动技术网IT编程  | 我要评论

林暗草惊风的下一句,2011年存款利息,天上人间头牌花魁

问：为什么要“自制”？不是有现成的控件吗？
答：在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中数据项的填充。

您可能感兴趣的文章:

如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网