|
|
答：在ASP.NET的頁(yè)面上，ListBox最終是渲染成select元素，而CheckListBox最終被渲染成div或者是table，使得二者的樣式無(wú)法統(tǒng)一，或者說(shuō)要統(tǒng)一很麻煩。
解決：
于是，決定干脆自行組合一些元素，實(shí)現(xiàn)單選列表、多選列表的統(tǒng)一樣式。
首先，無(wú)論是單選列表還是多選列表，都用一個(gè)有邊框的div來(lái)做容器：
<div class="list"></div>
然后，在這個(gè)div中添加數(shù)據(jù)項(xiàng)。為了在響應(yīng)onclick事件時(shí)，能夠遍歷數(shù)據(jù)項(xiàng)，進(jìn)而做一些樣式上的控制，我需要把各個(gè)數(shù)據(jù)項(xiàng)的name屬性設(shè)為一樣的，然后用getElementsByName獲取（這種辦法我在復(fù)選框的全選功能上常用）。然而，經(jīng)過(guò)實(shí)踐，發(fā)現(xiàn)div、span均無(wú)name屬性，最終找到用錨點(diǎn)，也就是<a>標(biāo)記，可以實(shí)現(xiàn)。
例如：
復(fù)制代碼 代碼如下:
<div id="divDepartments" class="list">
<a name="aDep" style="width:100%" onclick="ItemClicked(this);">部門(mén)1</a>
<a name="aDep" style="width:100%" onclick="ItemClicked(this);">部門(mén)2</a>
<a name="aDep" style="width:100%" onclick="ItemClicked(this);">部門(mén)3</a>
<a name="aDep" style="width:100%" onclick="ItemClicked(this);">部門(mén)4</a>
<a name="aDep" style="width:100%" onclick="ItemClicked(this);">部門(mén)5</a>
<a name="aDep" style="width:100%" onclick="ItemClicked(this);">部門(mén)6</a>
<a name="aDep" style="width:100%" onclick="ItemClicked(this);">部門(mén)7</a>
<a name="aDep" style="width:100%" onclick="ItemClicked(this);">部門(mén)8</a>
<a name="aDep" style="width:100%" onclick="ItemClicked(this);">部門(mén)9</a>
<a name="aDep" style="width:100%" onclick="ItemClicked(this);">部門(mén)10</a>
<a name="aDep" style="width:100%" onclick="ItemClicked(this);">部門(mén)11</a>
<a name="aDep" style="width:100%" onclick="ItemClicked(this);">部門(mén)12</a>
</div>
其中，list樣式：
復(fù)制代碼 代碼如下:
.list
{
overflow-y:scroll;
width:120px;
height:150px;
padding:3px;
border:solid 1px #AFAFAF;
background-color: #ffffff;
cursor: pointer;
}
ItemClicked函數(shù)用來(lái)響應(yīng)click事件。下面的代碼只是做一些樣式上的變化，還可繼續(xù)添加加載數(shù)據(jù)的內(nèi)容：
復(fù)制代碼 代碼如下:
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";}
}
}
帶有復(fù)選框的多選列表也大同小異，只是這里由于遍歷數(shù)據(jù)項(xiàng)時(shí)，只要對(duì)復(fù)選框遍歷即可，故可以使用div做數(shù)據(jù)項(xiàng)的容器了：
復(fù)制代碼 代碼如下:
<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>
最后，關(guān)于數(shù)據(jù)的加載問(wèn)題，在當(dāng)前的具體問(wèn)題中，我打算用Ajax.Updater，來(lái)實(shí)現(xiàn)對(duì)相應(yīng)列表的div中數(shù)據(jù)項(xiàng)的填充。
AspNet技術(shù)：asp.net 自制的單選、多選列表實(shí)現(xiàn)代碼，轉(zhuǎn)載需保留來(lái)源！
鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除，多謝。
