可调整大小的列无法正确显示 x 可编辑输入

【问题标题】：x-editable inputs aren't shown properly with resizable columns可调整大小的列无法正确显示 x 可编辑输入
【发布时间】：2015-08-30 10:16:54
【问题描述】：

我使用 bootstrap 3 并有一个 bootstrap-table 表，其中包含可编辑的单元格和可调整大小的列。为了调整大小，我使用扩展名bootstrap-table-resizable 和用于编辑单元格的bootstrap-table-editable

当我不使用可调整大小的插件时，我可以编辑单元格并查看整个可编辑输入。

jsfiddle

当我使用可调整大小的插件时，只有部分可编辑输入可见。

jsfiddle

当我想编辑单元格时，我想查看整个输入。我关注了this 的帖子并尝试设置z-index, overflow 属性或container: 'body' 为可编辑插件，但它没有帮助。

【问题讨论】：

标签： jquery twitter-bootstrap twitter-bootstrap-3 x-editable bootstrap-table

【解决方案1】：

不确定是否有任何本机方法，但这可能是一种简单的解决方法。

这个想法是当检测到.editable 元素上的点击事件时，设置相应（在给定索引上）<th> 元素的width 样式：

$('.editable').click(function(){
    // change the <td> width only if it's less than '.editable-container' width
    if($(this).next().width() > $(this).closest('td').width()){
        $('th:eq('+$(this).closest('td').index()+')').css('width', $(this).next().width()+15);
    }
});

注意：
$(this).next() 指向.editable-container span 元素，该元素包含输入字段和✔ ✖ 按钮。

然后使用editable的hidden事件将<th>的宽度再次重置为auto：

$('.editable').on('hidden', function() {
    $('th:eq('+$(this).closest('td').index()+')').css('width', 'auto'); 
});

JSFiddle

【讨论】：

很高兴我能帮上忙 :-)