jquery-bootgrid如何隐藏列

时间:2015-03-02 19:53:00

标签: jquery jquery-plugins

如何隐藏启动网格上的列?

我试图像这样隐藏ID列:

<data-column-id="token" data-identifier="true" data-type="string"  visible="false">token<>

3 个答案:

答案 0 :(得分:13)

你需要这样写,

<data-column-id="token" data-identifier="true" data-type="string" data-visible="false">

在这里阅读详细信息, http://www.jquery-bootgrid.com/Documentation

答案 1 :(得分:0)

这将对以后的人有所帮助。通过提供链接来发布答案作为答案,因为有时我们不会阅读评论部分。
回答from

<style>
 {
.HideColHead
{
display: none
}
.HideCol
{
display: none
}
</style>


<th data-column-id="ID" data-header-css-class="HideColHead" data-css-class="HideCol">ID</th>
<th data-column-id="User" data-header-css-class="HideColHead" data-css-class="HideCol">User</th>

这只会隐藏未从DOM中删除的列

答案 2 :(得分:0)

可选。

方法1.将Bootgrid更新到1.3版并 设置“数据可见”

<th data-column-id="Id" data-visible="false">Id</th>

// ----------------------------------

方法2.(旧版本) 使用Jquery触发隐藏/显示列工具。

 <table id="grid-keep-selection" class="table table-condensed table-hover table-striped">
        <thead>
            <tr>
                <th data-column-id="id_col1" data-order="desc" data-width="4.3%">id_col1</th>
                <th data-column-id="id_col2" data-order="desc" data-width="4.3%">id_col2</th>
                <th data-column-id="id_col3"  data-order="desc" data-width="4.3%">id_col3</th>
            </tr>
        </thead>
    </table>

// --------------------------------------------- -

var check_first_load = 0; //--> for set default column.
$("#grid-keep-selection").bootgrid({
    ajax: true,
    post: function ()
    {
        return {
            id: "xx"
        };
    },
    url: "api/data/xx.php",
    formatters: {
        "commands": function(column, row)
        {
            return '<a> xxx </a>';
        }
    }
    ,labels: {
        noResults: "where are my results"
    }

}).on("loaded.rs.jquery.bootgrid", function()
{
    //--> for set default hiding column.
    if(check_first_load == 0){
        check_first_load++;

        $('input[name=id_col1]').trigger("click");
        $('input[name=id_col2]').trigger("click");
        $('input[name=id_col3]').trigger("click");
    }
});