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中數據項的填充。
 
 




聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com