Question

在我的引导项目中，我使用了＃34;惊人的＆＃34; 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;
}

这样在网格渲染中导航（当前）和选择框（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，以便从标题中删除rowcount下拉列表。

2）拥有自己的ui元素/变量来设置/存储您自己的rowCOunt值（在我的情况下是config.filters.rowCount）

3）在requestHandler事件集中设置rowCount到您自己的rowCount值

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

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

由于我有自己的寻呼机，我通过计算pageCount来填充它（因为getTotalPageCount返回1 ??）

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

Answer 4

我做了以下工作，它像梦一样：

1）在jquery-bootgrid.js中添加一个名为skipFirstLoad的选项并将其设置为false。

2）在jquery-bootgrid.js中如果skipFirstLoad设置为false，则仅执行loadData.call函数

3）在你的索引页面（bootgrid所在的位置）将选项skipFirstLoad：true添加到bootgrid的初始化中刷新页面时，现在不应加载任何内容。

4）使用jquery选择器：$（'* [data-action = XX'）; 其中XX是您要显示的行数。这将选择下拉列表中的按钮，当点击时，ajax会回拨给服务器以获取新的行数。

5）现在使用上面的选择器并调用.click（）函数来手动强制第一次加载，这只在页面加载时发生（所以只是第一次加载）

如果对我的方法感兴趣，我会发布一个更完整的解决方案，只需发表评论。

Answer 5

我有类似的问题。我可以告诉你我是如何用一种解决方法解决它的。不幸的是，我不得不调整jquery.bootgrid.js。

我使用ASP.NET MVC 5.在服务器端，我将当前状态（searchPhrase，current，rowCount，sortOrder）保存到会话中。重新加载页面时，我会在隐藏字段中写入当前状态。

具有挑战性的部分是用这种状态初始化网格。这是我的代码：

<input type="hidden" id="gridStateCurrent" value="@Session["ModuleGroupGridStateCurrent"]" />
<input type="hidden" id="gridStateRowCount" value="@Session["ModuleGroupGridStateRowCount"]" />
<input type="hidden" id="gridStateSearchPhrase" value="@Session["ModuleGroupGridStateSearchPhrase"]" />
<input type="hidden" id="gridStateSortDirection" value="@Session["ModuleGroupGridStateSortDirection"]" />
<input type="hidden" id="gridStateSortField" value="@Session["ModuleGroupGridStateSortField"]" />


$(document).ready(function () {
            $("#grid-data").on("initialize.rs.jquery.bootgrid", function (e) {
                if ($("#gridStateCurrent").val() !== "") {
                    $("#grid-data").bootgrid("setCurrentPage", $("#gridStateCurrent").val());
                }
                if ($("#gridStateRowCount").val() !== "") {
                    $("#grid-data").bootgrid("setRowCount", $("#gridStateRowCount").val());
                }
                if ($("#gridStateSearchPhrase").val() !== "") {
                    $("#grid-data").bootgrid("setSearchPhrase", $("#gridStateSearchPhrase").val());
                }
                if ($("#gridStateSortDirection").val() !== "" && $("#gridStateSortField").val() !== "") {
                    $("#grid-data").bootgrid("setSortDictionary", $("#gridStateSortField").val(), $("#gridStateSortDirection").val());
                }
                else {
                    $("#grid-data").bootgrid("setSortDictionary", "SortOrder", "Ascending");
                }
            }).on("initialized.rs.jquery.bootgrid", function (e) {
                if ($("#gridStateSearchPhrase").val() !== "") {
                    $("#grid-data").bootgrid("setSearchBoxText", $("#gridStateSearchPhrase").val());
                }
            });

            $("#grid-data").bootgrid({
                ajax: true,
                url: "~/../../ModuleGroupAdmin/LoadModuleGroupList",

                                   ... etc. ...
                }
            });

重要说明：

必须在初始化之前添加初始化处理程序 bootgrid - ＆gt; GitHub issue 87
＆＃34;初始化＆＃34;需要处理程序在文本框中显示searchPhrase。
方法 setCurrentPage， setRowCount，setSearchPhrase，setSortDictionary和setSearchBoxText 我刚刚添加到jquery.bootgrid.js。在GitHub上查看我的文件（下面的链接）。
我在renderSearchField中进行了更改第736行的方法。这有效当你删除了搜索短语开始新的搜索。

我可以在此处下载修改后的文件：GitHub issue 215

Answer 6

这会对你有所帮助

$("#data-table-basic").bootgrid()
     .on("loaded.rs.jquery.bootgrid", function(e) {
         $(".page-" + $("#data-table-basic").bootgrid("getCurrentPage")).addClass("active")
     });

Answer 7

我正在为预设的rowCount寻找方法，或者也许是设置rowCount但没有运气的方法。但是以下工作正常：

var rowCount = 15;          // default is 10 [10, 15, 25, -1]
$('.bootgrid-pagination-count ul.dropdown-menu li a[data-action=' +
                rowCount + ']').trigger('click');

jquery-bootgrid预设当前和rowCount

7 个答案: