欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2024-03-08 22:32:58
问:为什么要“自制”?不是有现成的控件吗? 答:在asp.net的页面上,listbox最终是渲染成select元素,而checklistbox最终被渲染成div或者是ta...
问:为什么要“自制”?不是有现成的控件吗?
答:在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中数据项的填充。