摘要：最近写了一个工作室随机出人为某部门干活的小源码处理的过程中也学到了一个新技能多选操作主要是前端的实现这里就简单记录一下不过学长说我的代码耦合性太强不宜于维护再加油吧首先是思路构造思路往往比写代码更占据时间我首先想到的是那种点击之后可以切换属
最近写了一个工作室随机出人为某部门干活的小Demo 源码
处理的过程中也学到了一个新技能:多选操作,主要是前端的实现
这里就简单记录一下
不过学长说我的代码耦合性太强,不宜于维护.......再加油吧
动态css属性首先是思路,构造思路往往比写代码更占据时间
我首先想到的是那种点击之后可以切换css属性的前端样式
然后就是切换的时候记录对应的所选ID,堆到数组并post给后端
全部都是JQ在带节奏,强大啊
css属性的改变就是在点击之后,JQ选择器固定标签,修改相应的属性
这里为了方便进行选择,我给每个button都赋予带有特征的id
然后使用JQ中的.attr获取相应的class内容
(具体的JQ的各种函数用法可以随意的搜索到)
... ...多选操作
这里我加了一个提交名单的按钮,然后再js函数中用id=0区别(数据库中没有id为0的数据)
点击之后将数组传递给后端
然后每次unchecked的改变都记录在数组中
......
至于取消选中的操作则是数组的删除固定元素
这里我找了一个网上的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吧
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/89606.html
摘要：最近写了一个工作室随机出人为某部门干活的小源码处理的过程中也学到了一个新技能多选操作主要是前端的实现这里就简单记录一下不过学长说我的代码耦合性太强不宜于维护再加油吧首先是思路构造思路往往比写代码更占据时间我首先想到的是那种点击之后可以切换属 最近写了一个工作室随机出人为某部门干活的小Demo 源码处理的过程中也学到了一个新技能:多选操作,主要是前端的实现这里就简单记录一下不过学长说我的...
摘要：实现中按住的多选功能微信公众号开发企业级产品全栈开发速成周末班首期班号正式开班，欢迎抢座作者简介是推出的一个天挑战。同时，将所有标记为的项设置为选中。此外，对于取消选中，无法批量操作。 Day10 - JS 实现 Checkbox 中按住 Shift 的多选功能 (Node+Vue+微信公众号开发)企业级产品全栈开发速成周末班首期班(10.28号正式开班，欢迎抢座) 作者：©liyue...
摘要：多选如果已经选中了，那就取消选中，如果没有，则选中接下来我们写一下全选，全取消，反选的实现。 单选 当我们用v-for渲染一组数据的时候，我们可以带上index以便区分他们我们这里利用这个index来简单地实现单选 {{item}} 首选定义一个selectedNum,当我们点击item时，便把这个selectedNum更改为我们所点击的item的index，然后每个item上加入判...
阅读 1907·2021-09-23 11:21
阅读 1692·2019-08-29 17:27
阅读 1052·2019-08-29 17:03
阅读 718·2019-08-29 15:07
阅读 1914·2019-08-29 11:13
阅读 2373·2019-08-26 12:14
阅读 903·2019-08-26 11:52
阅读 1728·2019-08-23 17:09
