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

Question

我使用 bootstrap 3 并有一个带有可编辑单元格和可调整大小列的bootstrap-table表。对于调整大小，我使用扩展bootstrap-table-resizable和用于编辑bootstrap-table-editable的单元格

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

jsfiddle

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

jsfiddle

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

Answer 1

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

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

$('.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元素。✔✖

---

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

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

JSFiddle