1. 程式人生 > >Jquery DataTable增加多選按鈕需要注意的事情

Jquery DataTable增加多選按鈕需要注意的事情

在修改公司遺留專案時,需要對原先的表格增加多選按鈕,並相應的增加全選功能,本以為是一個很簡單的需求,可是,在增加多選按鈕後,無法獲得首行全選按鈕的選中狀態,無論是否選擇,獲得的選中狀態均為false。
本以為是Jquery的版本問題,獲取選中狀態的方法不對造成的,更換了prop、attr、is等方法,還是無法獲得正確的選中狀態,這讓一個本來很簡單的問題變得毫無頭緒。
後來在頁面的其它位置新增多選按鈕後,使用prop方法可以正確的獲得選中狀態?!難道是DataTable不能增加多選按鈕?查找了網上的許多資料,發現有很多新增多選的方法和程式碼,也就是說,這個功能是可以實現的,為什麼在我這裡不行?
經過許多測試後發現,Jquery DataTable中提供了一個功能—固定列,所謂的固定列是在表格列過多,滑動橫向滾動軸時,被固定的列不會跟著滑動,就像excel中的“凍結”一樣,而實現這個功能本質,就是在表格上再覆蓋一層表格,將設定固定的列載入到覆蓋層上,這樣,滑動的時候,是在滑動底層列表,而上方的列表是不會隨著滑動的,看上去就像是固定了一樣,也正是這個原因,我本地的專案中對前3列進行了固定,導致了每次頁面點選的多選按鈕是上層的,而我獲取的是底層的按鈕選中狀態,所以每次獲取都是false。

解決方法:
1、去除固定列,如果可以擠一擠,還是不要加固定列,這樣就不會有這些問題了
2、如果列很多,必須要使用固定列的時候,獲取全選按鈕的選中狀態一定不能用ID,只能用class或者name來獲取,而且獲取的時候,得到的控制元件數量是兩個,使用(((".class")[(".class").length1]).prop("checked");F12(".class").length-1]).prop("checked");來獲取,因為覆蓋層是在最後新增進去的(按F12可以檢視)。同樣,列表中資料行的多選按鈕也是每行兩個,在獲取時也是很麻煩的,如果多選按鈕在左側固定列,可以通過

(".DTFC_LeftBodyWrapper .class")來獲取覆蓋層的多選按鈕集合。(以上的class換成你程式碼中的全選按鈕的class和資料行的多選按鈕的class即可)