多選操作的實現

bay1發表於2018-06-22

title: 多選操作的實現 date: 2017-11-07 14:03:24 tags: [html,jQuery]

最近寫了一個工作室隨機出人為某部門幹活的小Demo 原始碼 處理的過程中也學到了一個新技能:多選操作,主要是前端的實現 這裡就簡單記錄一下 不過學長說我的程式碼耦合性太強,不宜於維護.......再加油吧

首先是思路,構造思路往往比寫程式碼更佔據時間 我首先想到的是那種點選之後可以切換css屬性的前端樣式 然後就是切換的時候記錄對應的所選ID,堆到陣列並post給後端

動態css屬性

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

css屬性的改變就是在點選之後,JQ選擇器固定標籤,修改相應的屬性 這裡為了方便進行選擇,我給每個button都賦予帶有特徵的id 然後使用JQ中的.attr獲取相應的class內容 (具體的JQ的各種函式用法可以隨意的搜尋到)

...
<a id="select{{name.id}}" onclick="changeSelect({{ name.id }})" >
<button class="btn btn-info btn-xs ">
<i id="changeclass{{ name.id }}" class="glyphicon glyphicon-unchecked"></i>
</button></a>
...
<script src="/javascripts/application.js" type="text/javascript" charset="utf-8" async defer>
var iclass = $("#changeclass"+id).attr("class");
if (iclass=="glyphicon glyphicon-unchecked"){
	$("#changeclass"+id).attr({class:"glyphicon glyphicon-record"});
		}
else{
	$("#changeclass"+id).attr({class:"glyphicon glyphicon-unchecked"});
}
</script>
複製程式碼

多選操作

這裡我加了一個提交名單的按鈕,然後再js函式中用id=0區別(資料庫中沒有id為0的資料) 點選之後將陣列傳遞給後端 然後每次unchecked的改變都記錄在陣列中

...
<center><a onclick="changeSelect(0)"><button class="btn btn-info btn-md submitNameIds">
	<span>提交名單</span>
</button></a></center>
...
<script src="/javascripts/application.js" type="text/javascript" charset="utf-8" async defer>
nameIds=[];
function changeSelect(id) {
	if (id==0) {
		if (nameIds.length>0) {
			parent.window.location="select/"+nameIds;
		}
		else{
			alert("請選擇");
		}
	}
	else{
		var iclass = $("#changeclass"+id).attr("class");
		if (iclass=="glyphicon glyphicon-unchecked"){
			$("#changeclass"+id).attr({class:"glyphicon glyphicon-record"});
			nameIds.push(id);
		}
		else{
			$("#changeclass"+id).attr({class:"glyphicon glyphicon-unchecked"});
			nameIds.remove(id);
		}
	}
}
</script>
複製程式碼

至於取消選中的操作則是陣列的刪除固定元素 這裡我找了一個網上的remove示例,直接加了進去

//定義陣列刪除元素
Array.prototype.remove = function(val) { 
	var index = this.indexOf(val); 
	if (index > -1) { 
		this.splice(index, 1); 
	} 
};
複製程式碼

效果

後記

這裡在實行的過程中,我是受到前面刪除確認的影響 在多選操作裡面也是用下面這樣的操作,和長航學長找bug找了好久....

由於在button屬性裡使用了onclick,而刪除操作裡,模態框的確是還有一個確定按鈕,確實點選了兩次 但是在多選操作裡面再直接照搬使用,這裡只有一個按鈕,就出現了點選兩次才會執行css動態執行的效果

$('#clickConfirm').click(function () {
        parent.window.location="delete/"+id;
    });
複製程式碼

這裡也證明了一次,onclick和$().click();都會各自捕捉到一次click操作 這是想起來以為大牛說的話:不求甚解是阻礙部分人進步的主要原因

爭取做一個Problem Solver而不是Language User吧

相關文章