使用 javascript 或 jQuery 隐藏 bootstrapTable 中的列

Question

我正在使用 bootStrap Table 为我的用户使用以下示例。

http://www.redexperu.com/assets/js/bootstrap-table-master/docs/examples.html#via-javascript-table

我想通过隐藏在 table 的 operate（此处删除用户列）数据字段来隐藏编辑和删除选项。我试图通过使用下面的命令来做到这一点

$('#table').bootstrapTable('hideColumn', 'operate');

参考这个

https://github.com/wenzhixin/bootstrap-table-examples/blob/master/methods/showColumn-hideCoulumn.html

好像不行。这是我的示例代码。这不是完整的。我在这里只添加了我认为必要的部分。

https://jsfiddle.net/Menuka/ht3dwwt9/4/

我的 table 工作正常，但列隐藏部分不工作。

Answer 1

正如 Bharat 在他的评论中提到的，我的代码运行良好。但问题是当 hidecolumn 和 showcolumn 正在执行时， table 没有加载。所以那些命令运行毫无用处。避免这种情况的一种方法是将其与 .click() 之类的事件绑定。就我而言，这不是解决方案。过了一会儿，我发现了这个 setTimeout 方法。所以我用它来解决我的问题，如下所示。

<script>
 setTimeout(function(){ $('#table').bootstrapTable('showColumn', 'operate2'); }, 100);
</script>

你可以找到参考这个的setTimeout方法。 http://www.w3schools.com/jsref/met_win_settimeout.asp

希望有人觉得这有用。欢迎任何其他解决方案。

Answer 2

您可以在 bootstrap table 的初始呈现时设置可见性，将 visible:false 添加到要隐藏的列。

$('#tableContainerName').bootstrapTable('destroy').bootstrapTable({
        url: YourApiUrl,
        pagination: true,
        search: true,
        columns: [{
                field: 'ColumnName',
                title: 'ColumnTitle',
                visible:false
            }]
    });

使用 javascript 或 jQuery 隐藏 bootstrapTable 中的列

Hide a column in bootstrapTable using javascript or jQuery

html

javascript

jquery

bootstrap-table