【WEB前端开辟】表格东西按钮列显现更多时也能触发table的事宜

先看个人人可以都遇到过的题目的结果图:

就是假如东西栏没有设置宽度,有时刻会被内容挤压得比较小,或许宽度设置不够,也会跟内容一样涌现...然后点击显现下拉图标的时刻会显现出更多的内容,然则跟一般的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+一样的结果。

测试页面: https://sun_zoro.gitee.io/layuitableplug/testTableReload.html
gitee项目: https://gitee.com/sun_zoro/layuiTablePlug

完成代码以下:

  //缓存当前操纵的是哪一个表格的哪一个tr的哪一个td
    $(document).off('mousedown','.layui-table-grid-down').on('mousedown','.layui-table-grid-down',function (event) {
        //直接纪录td的jquery对象
        table._tableTrCurrr = $(this).closest('td');
    });

    //给弹出的概况内里的按钮增加监听级联的触发原始table的按钮的点击事宜
    $(document).off('click','.layui-table-tips-main [lay-event]').on('click','.layui-table-tips-main [lay-event]',function (event) {
        var elem = $(this);
        var tableTrCurrr =  table._tableTrCurrr;
        if(!tableTrCurrr){
            return;
        }
        var layerIndex = elem.closest('.layui-table-tips').attr('times');
        layer.close(layerIndex);
        table._tableTrCurrr.find('[lay-event="' + elem.attr('lay-event') + '"]').first().click();
    });

引荐:layui教程

以上就是表格东西按钮列显现更多时也能触发table的事宜的细致内容,更多请关注ki4网别的相干文章!

点赞

发表评论

电子邮件地址不会被公开。必填项已用 * 标注