最近写了一个工作室随机出人为某部门干活的小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吧
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。