HTML多選操作的實現

最近寫了一個工作室隨機出人為某部門干活的小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吧