试水select唯一性选择

讨论 已结 精帖
41 1787
岁月小偷
悬赏: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 回复
  • 楼主是前端工程师吧?我前端太菜了,还得再花一些时间才能搬到我项目上。。。。
    学习了
    感激不尽
    0 回复
  • @sleep_开拓者 嗯嗯,不客气[微笑] ,主要做前端,昨晚太晚才弄好,今天找时间再打磨一番
    0 回复
  • Jasmine_w
    2018-7-18
    @岁月小偷 大神在广州做前端开发吗,广州要求很高吧?
    0 回复
  • @茉莉 最近几年一直在北京,用QQ登录的好久没更新里面的信息[微笑] ,要求的这个估计还是看公司吧,在哪里估计差别不是太大
    0 回复
  • Jasmine_w
    2018-7-18
    @岁月小偷 [鼓掌] 向大神学习,我也是做前端,前端渣渣一枚[可怜]
    0 回复
  • 小青年a
    2018-7-18
    @岁月小偷 大神,收徒弟吗[嘻嘻]
    0 回复
  • @小青年a 不敢当哈[微笑]
    0 回复
  • @sleep_开拓者 今天下班再花了些时间整理了一番更新了一下了额,有兴趣可以看看正文更新的额[微笑]
    0 回复
  • nice,今天争取抽个空看看,赶项目忙死了。。。
    0 回复
  • hi_stce
    2018-7-20
    @岁月小偷 经测试,IE浏览器无法使用,select 点开后显示异常,无法选择
    0 回复
  • @hi_stce 谢谢反馈哈,着实有这个问题,上回测试的时候也就看到了,但是想着不是主要问题,就先pass了,实际上这个是因为宽度的问题,在其他浏览器上没问题,ie上点击的时候校验到里面的内容宽度超出了,就变成了查看详情的功能了,然后还把原始节点给显示了,就乱套了

    刚刚处理了一下可以了

    处理的地方

    代码也重新传一份上去了哈,太懒了没人催就不动哈[偷笑] ,再次感谢[微笑]
    0 回复
  • hi_stce
    2018-7-20
    处理好快,[good] [good] [good]
    0 回复
  • 0 回复
  • @岁月小偷 大神,我按你的代码弄了一个下拉框,为啥下拉值出不来呢,被隐藏了
    0 回复
  • @Jonathan735 截图还有代码看看额,这个是因为table中的td中的div它原本的设置是overflow:hidden的,里面的元素如果超出范围了就看不到的,如果是select目前的一般做法是找到这个对应的div给添加样式,

    就是这一块的代码,然后还有一个就是table的size,目前select的个头硕大而且没有可以定义size,所以临时的可以给table的size设置为lg,如果要在一个普通高度或者sm的table里面去显示一个完整的select需要自己处理一下样式。
    然后还有一个比较在意的是你这个table是否有排序列,如果有这个排序列是否监听了排序,执行了reload,目前表格自带的排序是当前页面排序然后重绘一下当前页面,但是,最后不会走done回调,这个比较坑爹,所以如果再done里面做了一些页面的渲染处理,然后没有再渲染完成之后执行的话就出现异常了。
    0 回复
  • @岁月小偷 谢谢大神!摩拜单车啊!没注意到这段代码,毕竟我不是搞前端的~[偷笑]
    0 回复
  • @Jonathan735 免押金[偷笑]
    0 回复
  • @岁月小偷 大神,再请教一个问题,如果表格 size:改成'sm',那么下拉框样式该怎么调整来适应更小的单元格呀,
    0 回复
  • @Jonathan735 这个方式也可能有多种,我这边的处理是这样子的,你可以试试看。

    我是测试页面所以没仔细处理,你可以把这一段样式放到你项目中的合适的css文件里面去就行了。然后自己调试一下看看哪个样式还不行的就调整一下。
    <!--调整select在不同大小的table中的样式-->
    .layui-table-view .layui-table[lay-size="sm"] .layui-select-title .layui-input {
    height: 28px;
    margin-top: -8px;
    font-size: 6px;
    }

    .layui-table-view .layui-table[lay-size="sm"] .layui-form-select dl dt, .layui-table-view .layui-form-select dl dd {
    line-height: 28px;
    }

    .layui-table-view .layui-table[lay-size="sm"] .layui-form-select dl {
    top: 28px;
    }

    .layui-table-view .layui-table .layui-select-title .layui-input {
    height: 32px;
    margin-top: -3px;
    }

    .layui-table-view .layui-table .layui-form-select dl dt, .layui-table-view .layui-form-select dl dd {
    line-height: 32px;
    }

    .layui-table-view .layui-table .layui-form-select dl {
    top: 32px;
    }

    .layui-table-view .layui-table[lay-size="lg"] .layui-select-title .layui-input {
    height: 38px;
    margin-top: 0;
    }

    .layui-table-view .layui-table[lay-size="lg"] .layui-form-select dl dt, .layui-table-view .layui-form-select dl dd {
    line-height: 38px;
    }

    .layui-table-view .layui-table[lay-size="lg"] .layui-form-select dl {
    top: 38px;
    }
    0 回复
  • @岁月小偷 谢谢啊,摩拜!
    0 回复