如何让表格的工具按钮列显示更多的时候也能点击触发table的事件

分享 未结 精帖
21 480
岁月小偷
悬赏:80飞吻
先看个大家可能都遇到过的问题的效果图:

就是如果工具栏没有设置宽度,有时候会被内容挤压得比较小,或者宽度设置不够,也会跟内容一样出现...然后点击显示下拉图标的时候会显示出更多的内容,但是跟普通的td不同的是按钮是显示出来了,但是点击无法触发原先添加的tool监听,这就尴尬了,只能手动的拖拽一下列宽显示出其他的按钮然后在点击,或者应该在一开始的时候就设置一个足够的宽度,但是问题也来了,如果里面的按钮个数不确定,长度不确定,或者有很多很多,那么实际上不可能让用户主要来看按钮而不是看内容,那么有没有什么方法让它平时现实...的然后点击显示更多的时候点击还能触发原始的事件的?
方法是想出来的哈,估计有不少途径可以做到,这里抛砖引玉分享下我的方法:利用两个事件委托来实现。
基本的代码如下:

思路解析:
首先给这个下拉的图标添加一个mousedown的事件,记录当前的显示更多的是数据哪个表格的哪个tr的哪个td。然后记录在table._tableTrCurr下面。这个可能有的同学有疑问为啥不直接用click,这个是因为表格内部也做了一个事件委托,但是不是委托给document啥的而是委托给了table的body然后stope了也就是说实际上你外面再写委托到document,点击监听的时候到table的逻辑之后就停了,不会走到你的监听里面,所以避开了它用了一个mousedown,那如果是移动端的会不会有什么问题和这个可以自己试试看,这里以web端为主。
然后是另外一个监听,就是监听打开的这个tips里面的“按钮”的click,然后找到刚才记录的那个_tableTrCurr信息,找到我们要的那个table的那个tr的那个td的那个按钮,找到了就好办了,直接click一下就能触发写的table.on('tool')的内容了。
效果:

注意:这个修改是在最新版本的基础上修改的(v2.4.5)里面有一个关键的就是获得表格的id,这个id不是单纯的是table节点的id,而是render出来之后这个实例的id,如果不设置默认就是table的节点的id如果没有,table内部会生成一个index之类的作为这个table的id,在2.4.4更新中有一个可能大家不太容易注意到但是确实意义很大的修改,就是在table的view中添加了一个lay-id这个属性来保存当前的这个table的实例的id,这个是非常非常非常好用的一个变化,意义很大的,后面你要reload某个table只要知道你reload的到底是哪个节点,自然就能够找到你要reload的tableId是什么。所以强烈的建议如果还在使用2.4.0~2.4.3的小伙伴还是升级成2.4.4+;

当然如果你使用了我那个tablePlug插件,实际可以不用担心这个问题,因为我在tablePlug内部就做了处理,如果render之后没有和这个lay-id会给添加上去,达到跟2.4.4+同样的效果。
好了,砖就抛完了,期待小伙伴分享更方便的方法[微笑]
更新于2018年12月6日08:49:13
来一波简化,实际要记录的就是操作的是哪个td,所以完全可以直接记录jquery对象就可以了,后面就不需要通过table的id还有tr的index之类的,如下:
回帖
  • [good] [good] [good]
    0 回复
  • [哈哈] Orz
    0 回复
  • [good] [good] [good] [good] [good]
    0 回复
  • [good] [good]
    0 回复
  • 0 回复
  • [good]
    0 回复
  • @沉默死海 谢谢认可[微笑]
    0 回复
  • helloi
    2018-12-4
    layui怎么在表格上加树形下拉框呀 望大佬
    0 回复
  • Ivan721
    2018-12-4
    大神?select下拉框的数据怎么拿?
    0 回复
  • 你说的是后面保存的时候要得到当前这一行的这个下拉的值么?实际这个应该是在下拉的监听里面再值改变的时候就得把值同步到table的数据缓存中,后面要提交的时候得到当前表格的数据里面就是最新的select中的值了,我觉得这样子会更加合理一点。
    0 回复
  • @Ivan721 你说的是后面保存的时候要得到当前这一行的这个下拉的值么?实际这个应该是在下拉的监听里面再值改变的时候就得把值同步到table的数据缓存中,后面要提交的时候得到当前表格的数据里面就是最新的select中的值了,我觉得这样子会更加合理一点。
    0 回复
  • @helloi 这个的初始化应该跟其他的地方的差不多的,关键是要在done回调里面去render你的树形下拉的节点,应为只有在done回调里面的时候页面上要初始化的这些节点它才存在,去初始化他们才有意义。
    0 回复
  • Ivan721
    2018-12-4
    @岁月小偷 是,我是想拿到当前选择的这个值,但是没有拿到
    0 回复
  • @Ivan721 这个一般来说是监听表格中的这些select的切换,然后把值更新到table.cache[tableId][trIndex][field]中,后面得到表格的缓存数据就是最新的当前select的值了
    0 回复
  • yacker
    2018-12-5
    不愧是大神,佩服
    0 回复
  • helloi
    2018-12-5
    @岁月小偷 怎么把表格里的下拉框所选的value值 和text值更新到表格cache上呀
    0 回复
  • @helloi https://pan.baidu.com/s/1kT57Xknf4CqqDct2Il_K0A 可以看看这个就知道大概的套路了
    0 回复
  • @yacker 谢谢认可[微笑]
    0 回复
  • helloi
    2018-12-5
    @岁月小偷 看了这个 这个是往name上传 name是唯一呀 那样更新的只有一个值value 但是text怎么弄了 往哪传了
    0 回复
  • Jasmine_w
    2018-12-5
    谢谢大佬分享,先收藏了[抱抱]
    0 回复
  • EmmyDuo
    2018-12-10
    谢谢大佬分享
    0 回复