table中使用templet模板渲染单列出现省略号事件监听问题的处理

分享 未结
6 856
海枫
海枫 VIP3 2017-12-21
悬赏:20飞吻
在使用table中的templet模板渲染单列信息并且绑定事件时,发现当该列不出现省略信息时监听事件是OK的,而当出现省略号信息时第一次点击监听OK,点击的同时该列信息全部展现,然后再次点击时监听不到事件。
看过源码之后发现监听事件是绑定在that.layBody中所有的[lay-event]上面的,而出現省略号展示全部信息时是使用layer中的tip弹出的故监听不到全部信息中的lay-event。
故对源码做了以下调整:
//如果出现省略,则可查看更多
if(elemCell.find('.layui-form-switch,.layui-form-checkbox')[0]) return; //限制不出现更多(暂时)
if(Math.round(elemCell.prop('scrollWidth')) > Math.round(elemCell.outerWidth())){
that.tipsIndex = layer.tips([
'<div class="layui-table-tips-main" style="margin-top: -'+ (elemCell.height() + 16) +'px;'+ function(){
if(options.size === 'sm'){
return 'padding: 4px 15px; font-size: 12px;';
}
if(options.size === 'lg'){
return 'padding: 14px 15px;';
}
return '';
}() +'">'
,elemCell.html()
,'</div>'
,'<i class="layui-icon layui-table-tips-c">ဆ</i>'
].join(''), elemCell[0], {
tips: [3, '']
,time: -1
,anim: -1
,maxWidth: (device.ios || device.android) ? 300 : 600
,isOutAnim: false
,skin: 'layui-table-tips'
,success: function(layero, index){
layero.find('.layui-table-tips-c').on('click', function(){
layer.close(index);
});
//ADD BY HYPHONE ON 2018-12-20
layero.find('*[lay-event]').on('click', function(){
that.layBody.find('*[lay-event$="' + $(this).attr('lay-event') + '"]').eq(elemCell.parents('tr').eq(0).data('index')).trigger('click');
});
}
});
}
});
上效果图:

设置按钮和管理员增加了lay-event属性。

以上是我的解决方案,有不妥之处还望大家能够给出更好的建议和解决方案。
回帖
  • Mistyss
    2017-12-21
    没有展开的时候呈现点点点状态么
    0 回复
  • 楼主大神666,我也写了个素材源码分享站: http://www.erdangjiade.com/
    0 回复
  • 海枫
    2017-12-21
    @Mistyss 未明白你想表达何意
    0 回复
  • stock2
    2017-12-28
    我也发现这个问题,绑定了event事件,导致点击第二次无效,我明天试试你的方法,感谢
    0 回复
  • stock2
    2017-12-29
    请问楼主,@海枫
    if(elemCell.find('.layui-form-switch,.layui-form-checkbox')[0]) 在哪里源码里?谢谢
    我准备判断 ,如果该列有 event属性, 就不展开. 这样比较通用些,不太影响.
    谢谢.
    0 回复
  • stock2
    2017-12-29
    @海枫
    我找到了是在源码的table.js里
    意思是, 但 执行了 event 的点击事件后, 模拟点击下单元格, 会自动缩进.从而避免了 必须关闭,否则不能再次点击
    //ADD BY HYPHONE ON 2018-12-20
    layero.find('*[lay-event]').on('click', function(){
    alert("aa"); //也不执行 你的代码 我的应用里无效. 不知道什么原因.
    });
    0 回复
本帖已设置禁止回复