資訊專欄INFORMATION COLUMN
摘要：最近寫了一個工作室隨機出人為某部門干活的小源碼處理的過程中也學到了一個新技能多選操作主要是前端的實現(xiàn)這里就簡單記錄一下不過學長說我的代碼耦合性太強不宜于維護再加油吧首先是思路構(gòu)造思路往往比寫代碼更占據(jù)時間我首先想到的是那種點擊之后可以切換屬
最近寫了一個工作室隨機出人為某部門干活的小Demo 源碼
處理的過程中也學到了一個新技能:多選操作,主要是前端的實現(xiàn)
這里就簡單記錄一下
不過學長說我的代碼耦合性太強,不宜于維護.......再加油吧
動態(tài)css屬性首先是思路,構(gòu)造思路往往比寫代碼更占據(jù)時間
我首先想到的是那種點擊之后可以切換css屬性的前端樣式
然后就是切換的時候記錄對應的所選ID,堆到數(shù)組并post給后端
全部都是JQ在帶節(jié)奏,強大啊
css屬性的改變就是在點擊之后,JQ選擇器固定標簽,修改相應的屬性
這里為了方便進行選擇,我給每個button都賦予帶有特征的id
然后使用JQ中的.attr獲取相應的class內(nèi)容
(具體的JQ的各種函數(shù)用法可以隨意的搜索到)
... ...多選操作
這里我加了一個提交名單的按鈕,然后再js函數(shù)中用id=0區(qū)別(數(shù)據(jù)庫中沒有id為0的數(shù)據(jù))
點擊之后將數(shù)組傳遞給后端
然后每次unchecked的改變都記錄在數(shù)組中
......
至于取消選中的操作則是數(shù)組的刪除固定元素
這里我找了一個網(wǎng)上的remove示例,直接加了進去
//定義數(shù)組刪除元素
Array.prototype.remove = function(val) {
var index = this.indexOf(val);
if (index > -1) {
this.splice(index, 1);
}
};
后記
這里在實行的過程中,我是受到前面刪除確認的影響
在多選操作里面也是用下面這樣的操作,和長航學長找bug找了好久....
由于在button屬性里使用了onclick,而刪除操作里,模態(tài)框的確是還有一個確定按鈕,確實點擊了兩次
但是在多選操作里面再直接照搬使用,這里只有一個按鈕,就出現(xiàn)了點擊兩次才會執(zhí)行css動態(tài)執(zhí)行的效果
$("#clickConfirm").click(function () {
parent.window.location="delete/"+id;
});
這里也證明了一次,onclick和$().click();都會各自捕捉到一次click操作
這是想起來以為大牛說的話:不求甚解是阻礙部分人進步的主要原因
爭取做一個Problem Solver而不是Language User吧
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/89606.html
摘要：最近寫了一個工作室隨機出人為某部門干活的小源碼處理的過程中也學到了一個新技能多選操作主要是前端的實現(xiàn)這里就簡單記錄一下不過學長說我的代碼耦合性太強不宜于維護再加油吧首先是思路構(gòu)造思路往往比寫代碼更占據(jù)時間我首先想到的是那種點擊之后可以切換屬 最近寫了一個工作室隨機出人為某部門干活的小Demo 源碼處理的過程中也學到了一個新技能:多選操作,主要是前端的實現(xiàn)這里就簡單記錄一下不過學長說我的...
摘要：實現(xiàn)中按住的多選功能微信公眾號開發(fā)企業(yè)級產(chǎn)品全棧開發(fā)速成周末班首期班號正式開班，歡迎搶座作者簡介是推出的一個天挑戰(zhàn)。同時，將所有標記為的項設置為選中。此外，對于取消選中，無法批量操作。 Day10 - JS 實現(xiàn) Checkbox 中按住 Shift 的多選功能 (Node+Vue+微信公眾號開發(fā))企業(yè)級產(chǎn)品全棧開發(fā)速成周末班首期班(10.28號正式開班，歡迎搶座) 作者：?liyue...
摘要：多選如果已經(jīng)選中了，那就取消選中，如果沒有，則選中接下來我們寫一下全選，全取消，反選的實現(xiàn)。 單選 當我們用v-for渲染一組數(shù)據(jù)的時候，我們可以帶上index以便區(qū)分他們我們這里利用這個index來簡單地實現(xiàn)單選 {{item}} 首選定義一個selectedNum,當我們點擊item時，便把這個selectedNum更改為我們所點擊的item的index，然后每個item上加入判...
閱讀 1907·2021-09-23 11:21
閱讀 1693·2019-08-29 17:27
閱讀 1053·2019-08-29 17:03
閱讀 719·2019-08-29 15:07
閱讀 1915·2019-08-29 11:13
閱讀 2374·2019-08-26 12:14
閱讀 904·2019-08-26 11:52
閱讀 1729·2019-08-23 17:09
