自製的單選 多選列表

2021-05-02 12:11:58 字數 931 閱讀 9509

問:為什麼要「自製」?不是有現成的控制項嗎?

答:在asp.net的頁面上,listbox最終是渲染成select元素,而checklistbox最終被渲染成div或者是table,使得二者的樣式無法統一,或者說要統一很麻煩。

解決:於是,決定乾脆自行組合一些元素,實現單選列表、多選列表的統一樣式。

首先,無論是單選列表還是多選列表,都用乙個有邊框的div來做容器:

然後,在這個div中新增資料項。為了在響應onclick事件時,能夠遍歷資料項,進而做一些樣式上的控制,我需要把各個資料項的name屬性設為一樣的,然後用getelementsbyname獲取(這種辦法我在核取方塊的全選功能上常用)。然而,經過實踐,發現div、span均無name屬性,最終找到用錨點,也就是標記,可以實現。

例如:部門1

部門2部門3

部門4部門5

部門6部門7

部門8部門9

部門10

部門11

部門12

其中,list樣式:

.list

itemclicked函式用來響應click事件。下面的**只是做一些樣式上的變化,還可繼續新增載入資料的內容:

function itemclicked(a){

a.style.backgroundcolor="#eeeeee";

as=document.getelementsbyname(a.name);

for(i=0;i帶有核取方塊的多選列表也大同小異,只是這裡由於遍歷資料項時,只要對核取方塊遍歷即可,故可以使用div做資料項的容器了:

人員1人員2

人員3人員4

人員5人員6

人員7人員8

人員9人員10

人員11

最後,關於資料的載入問題,在當前的具體問題中,我打算用ajax.updater,來實現對相應列表的div中資料項的填充。

單選多選按鈕

專案 現單選多選這種情況挺多的,所以整合成乙個控制項了,使用方便,可以設定單選,也可以設定多選,最主要的是採用了流式布局,會自動根據螢幕大小和內容進行自動折行。android id id buttnlayout android layout width match parent android la...

ExtJs grid單選,多選

一 seltype checkboxmodel singleselect true,單選 multiselect true,多選 singleselects edit 表示只有選擇一行記錄時edit才可點選,其他情況被禁用,edit表示按鈕的id multiselects delete 表示當選擇一...

單選多選(CocosCreator)

推薦閱讀 首先來說說我們的需求吧 隨機出現單選題或者多選題,完全回答正確才算正確 多選題中少選錯選算錯 核實答案的正確性,某個選項選擇正確出現選項正確標誌,某個選項選擇錯誤出現錯誤標誌 選項錯誤包括單選中選擇錯誤的選項 多選中未選擇的選項 下面,先來實現單選多選介面 單選 為singleanswer...