jquery-bootgrid preset current和rowCount

Question

在我的bootstrap项目中，我使用了“令人惊叹的”bootgrid插件(1.2.0)。

HTML

<table id="grid" class="table table-condensed table-hover table-striped table-bordered">
    <thead>
        <tr>
            <th data-column-id="id" data-visible="false" data-converter="numeric">id</th>
            <th data-column-id="name">Name</th>
            <th data-column-id="version">Version</th>
            <th data-column-id="commands" data-formatter="commands" data-sortable="false">Actions</th>
        </tr>
    </thead>
</table>

JS

var grid = $("#grid").bootgrid({
    ajax: true,
    requestHandler: function (rq) {
        return rq;
    },
    url: "grid.php",
    caseSensitive   : false,
    rowCount        : [25, 50, -1],
    columnSelection : false,
    formatters  : {
        "commands": function(column, row) {
            return "<button type=\"button\" class=\"btn btn-xs btn-warning command-edit\" data-row-id=\"" + row.id + "\"><span class=\"glyphicon glyphicon-edit\"></span></button> " +
                   "<button type=\"button\" class=\"btn btn-xs btn-danger command-delete\" data-row-id=\"" + row.id + "\"><span class=\"glyphicon glyphicon-trash\"></span></button>";
        }
    },
}).on("loaded.rs.jquery.bootgrid", function() {

    grid.find(".command-edit").on("click", function(e) {

        //do something

    }).end().find(".command-delete").on("click", function(e) {

        //do something
    });
});

我将属性数据保存在个人数据对象或php会话中，以保留导航数据，这样您就可以使用已经设置好的数据导航回网格。为了在网格中设置数据，我使用了可用的方法(排序和搜索)，如下所示

$("#grid").bootgrid("sort", { name : "asc"}).bootgrid("search", "a");

Bootgrid方法代码提取(搜索)

Grid.prototype.search = function(phrase)
{
    phrase = phrase || "";

    if (this.searchPhrase !== phrase)
    {
        var selector = getCssSelector(this.options.css.searchField),
            searchFields = findFooterAndHeaderItems.call(this, selector);
        searchFields.val(phrase);
    }

    executeSearch.call(this, phrase);


    return this;
};

现在我想预置rowCount和current (导航)，但没有方法可以做到这一点。我只能通过在函数requestHandler中设置这些值来做到这一点。

requestHandler: function (rq) {
    rq.rowCount = 50;
    rq.current = 2;
    return rq;
}

这样，在网格渲染中，导航(current)和选择框(rowCount)不会改变它们的值(就像我使用方法时发生的那样)，但会保留默认值。

我该怎么做呢？谢谢

Answer 1

根据您的问题，您可以通过ajax直接发送行数和当前值。因为bootgrid总是正确地进行分页。因此请求处理程序在这里仅用于您代码方式搜索目的。

Answer 2

您需要使用响应处理程序。至少“当前”会起作用。我还没有试过rowCount。下面是一个示例：

responseHandler: function(data){
    var response = {
        current: YourSavedCurrentPageValue,  // instead of data.current,
        rowCount: data.rowCount,
        rows: data.rows,
        total: data.total
    };

    return response; //must return a response object so your grid has records
},
requestHandler: function (req) {
    ...
},...

Answer 3

我已经设法让它工作了，尽管你需要自己处理事情：

1)将选项rowCount设置为-1，以便从标题中删除行数下拉列表。

2)有你自己的ui元素/变量来设置/存储你自己的rowCOunt值。

(在我的例子中是config.filters.rowCount)

3)在requestHandler事件中，将rowCount设置为您自己的rowCount值

4)在loaded.rs.jquery.bootgrid事件中

在您自己的rowcount ui元素上填充/选择您自己的行数。

因为我有自己的寻呼机，所以我通过计算pageCount来填充它(因为getTotalPageCount返回1??)

var pageCount = Math.ceil(config.grid.bootgrid("getTotalRowCount") / config.filters.rowCount);