试水select唯一性选择

讨论 已结 精帖 46 2624
岁月小偷
悬赏:50飞吻
源于社区的一个帖子( http://fly.layui.com/jie/30310/ )折腾出来的一个玩意,标题可能有点不直观,看看效果图应该就知道大概的使用场景了。

就是一个区域内的select选择的值具有唯一性,不能重复选择。
剩下的貌似没啥好写的了,基本都是js的逻辑处理,有兴趣的可以下下来看看效果,觉得有用的再看看里面的代码。
插入一条记录的效果

删除一条记录的效果


都是一些js逻辑处理,做的也相对比较糙,貌似没什么特别可以说明的,基本都在代码里面表述了。有什么疑问的地方欢迎回帖提问。

更新于2018年7月18日22:02:46 https://pan.baidu.com/s/1QhSLcrNeEXXmHkwPSUMrSg 新增了一个testTableWithSelectUniquePro.html 页面效果不变,主要就是将昨天做出来的比较粗糙的代码给打磨加工了一下。
虽然帖子沉了,但是答应说要打磨的还是要花心思打磨一下,还有简单介绍一下思路额。

先说一下最主要的思路,一组select的唯一性选择,这个用一句话来描述比较恰当就是“牵一发而动全身”。
首先需要初始化,根据已选的把当前已选中的集合到一个队列中,这个队列其实就是这个测试的魂,至于这个选中的集合是怎么得到的,这个得根据实际情况来,比如可以在全部已知的数据中的某一些字段收缩,或者有什么交易可以得到,这个不是本文的重点。init之后根据这个队列把这组select中的option是否可选全部更新一遍,初始化阶段就差不多了;
然后就是更新了,比如某个select切换到其他的option,那么显然需要做的事情就是把以前已经选中的值从队列中剔除(如果有的话),然后把新选中的值添加到这个队列中,然后再次更新这组select中所有的option的是否可选状态,这就是上面说的牵一发而动全身;
新增数据以为一开始没有选中,所以这时候一般来说是没有影响的可以不用处理,删除的话就不同了,如果删掉的这条记录中有选中的假设为A,那么必须把这个选中的从队列中剔除,然后再次更新option的状态,这样删除之后还存在的记录的select中的option才能把原来不可选的A变成可选的。

最后是经过打磨之后封装出来的一个东东

详细的有兴趣可以看看代码,新手可以看看对比下里面的两个页面的代码,这个一般是我平时的一些开发习惯或者说是一些开发的经验,先实现功能,然后再打磨完善出来一个通用的函数方法。看看有没有可以借鉴的,高手忽略或者看到有什么写的不合理的也请不吝指出哈。[嘻嘻]
回帖
  • [嘻嘻] 向大神学习!
    0 回复
  • @亲嘴的奶瓶 囧,还没那个水平啦,目前也很多很成熟的啦,没什么必要重复造轮子,而且一个轮子从造到装上去能用到调优,最后还得让别人知道有这么一个轮子,都不容易哈
    1 回复
  • [good] [威武] [给力]
    0 回复
  • @菜鸟程序猿 谢谢一如既往的支持[偷笑]
    0 回复
  • 0 回复
  • 0 回复
  • SpringMVC
    2018-7-18
    @岁月小偷 您可以说一下这个的思路吗?求指点一下
    0 回复
  • @SpringMVC 嗯嗯,我今天找时间再把原来的代码优化一下,再把具体的思路给整体出来更新到帖子的正文里面。先说一下最主要的思路,一组select的唯一性选择,这个用一句话来描述比较恰当就是“牵一发而动全身”。首先需要初始化,根据已选的把当前已选中的集合到一个队列中,这个队列其实就是这个测试的魂,然后根据这个队列把这组select中的option是否可选全部更新一遍,初始化阶段就差不多了;然后就是更新了,比如某个select切换到其他的option,那么显然需要做的事情就是把以前已经选中的值从队列中剔除(如果有的话),然后把新选中的值添加到这个队列中,然后再次更新这组select中所有的option的是否可选状态,这就是上面说的牵一发而动全身;新增数据以为一开始没有选中,所以这时候一般来说是没有影响的可以不用处理,删除的话就不同了,如果删掉的这条记录中有选中的假设为A,那么必须把这个选中的从队列中剔除,然后再次更新option的状态,这样删除之后还存在的记录的select中的option才能把原来不可选的A变成可选的。大致思路就是这个了。
    0 回复
  • Jasmine_w
    2018-7-18
    [抱抱] 支持大神
    0 回复
  • 0 回复