HTML多選操作的實現

2022-08-20 21:39:10 字數 1544 閱讀 9949

最近寫了乙個工作室隨機出人為某部門幹活的小demo

處理的過程中也學到了乙個新技能:多選操作,主要是前端的實現

這裡就簡單記錄一下

不過學長說我的**耦合性太強,不宜於維護.......再加油吧

首先是思路,構造思路往往比寫**更佔據時間

我首先想到的是那種點選之後可以切換css屬性的前端樣式

然後就是切換的時候記錄對應的所選id,堆到陣列並post給後端

全部都是jq在帶節奏,強大啊

css屬性的改變就是在點選之後,jq選擇器固定標籤,修改相應的屬性

這裡為了方便進行選擇,我給每個button都賦予帶有特徵的id

然後使用jq中的.attr獲取相應的class內容

(具體的jq的各種函式用法可以隨意的搜尋到)

...

...if (iclass=="glyphicon glyphicon-unchecked"));

}else);

}

這裡我加了乙個提交名單的按鈕,然後再js函式中用id=0區別(資料庫中沒有id為0的資料)

點選之後將陣列傳遞給後端

然後每次unchecked的改變都記錄在陣列中

...

提交名單

...function changeselect(id)

else

} else);

nameids.push(id);

} else);

nameids.remove(id);

} }}

至於取消選中的操作則是陣列的刪除固定元素

這裡我找了乙個網上的remove示例,直接加了進去

//定義陣列刪除元素

這裡在實行的過程中,我是受到前面刪除確認的影響

在多選操作裡面也是用下面這樣的操作,和長航學長找bug找了好久....

由於在button屬性裡使用了onclick,而刪除操作裡,模態框的確是還有乙個確定按鈕,確實點選了兩次

但是在多選操作裡面再直接照搬使用,這裡只有乙個按鈕,就出現了點選兩次才會執行css動態執行的效果

$('#clickconfirm').click(function () );
這裡也證明了一次,onclick和$().click();都會各自捕捉到一次click操作

這是想起來以為大牛說的話:不求甚解是阻礙部分人進步的主要原因

爭取做乙個problem solver而不是language user吧

CFileDialog實現多選

create dialog to open multiple files.cfiledialog filedlg true,null,null,ofn hidereadonly ofn overwriteprompt ofn allowmultiselect ofn explorer,t tbl檔案...

Flex List元件多選的操作

這次我來說明一下list元件的使用,主要是當multipleselection的屬性設為 true 的時候的技巧。1.選擇了多項條目後資料的讀取,關鍵 如下 function getselecteditems mx.controls.alert.show xml.tostring message s...

swt多選樹的實現

package cn.com.test import org.eclipse.swt.widgets.display import org.eclipse.swt.widgets.shell import org.eclipse.swt.widgets.composite import org.ec...