多选操作前端实现-优快云博客

本文介绍了一种前端多选操作的实现方式，通过jQuery动态改变CSS样式来完成选择状态的切换，并利用数组记录已选元素ID，最终提交给后端处理。

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吧