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

  问:为什么要“自制”?不是有现成的控件吗?

  答:在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中数据项的填充。