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