jqGrid添加用于在工具栏中添加/编辑/删除的按钮不起作用

Question

我试图在示例网站http://www.guriddo.net/demo/bootstrap/中实现用于在jqGrid工具栏中添加按钮的代码，但我很惊讶地发现它对我不起作用。搜索了几个小时，但我无法弄清楚。这是我的代码：

<script type="text/javascript">
$(function () {

    var gridDataUrl = '@Url.Action("JsonCategories", "AdminNomCategory")'

    var grid = $("#reportsGrid").jqGrid({
        url: gridDataUrl,
        datatype: "json",
        mtype: 'POST',
        colNames: [
            '@Html.DisplayNameFor(model => model.CategoryGuid)',
            '@Html.DisplayNameFor(model => model.CategoryName)',
            '@Html.DisplayNameFor(model => model.CategoryDescription)'
        ],
        colModel: [
            { name: 'CategoryGuid', index: 'CategoryGuid', width: 10, align: 'left', classes: "nts-grid-cell", hidden: true },
            { name: 'CategoryName', index: 'CategoryName', width: 10, align: 'left', classes: "nts-grid-cell" },
            { name: 'CategoryDescription', index: 'CategoryDescription', width: 10, align: 'left', classes: "nts-grid-cell" }
        ],
        rowNum: 20,
        rowList: [10, 20, 30],
        height: 450,
        width: 1140,
        pager: '#pager',    /*jQuery('#pager'),*/
        sortname: 'CategoryGuid',
        toolbarfilter: true,

        viewrecords: true,
        sortorder: "asc",
        caption: "Categories",

        ondblClickRow: function (rowid) {
            var gsr = jQuery("#reportsGrid").jqGrid('getGridParam', 'selrow');
            if (gsr) {
                var CategoryGuid = grid.jqGrid('getCell', gsr, 'CategoryGuid');
                window.location.href = '@Url.Action("Edit", "AdminNomCategory")/' + CategoryGuid
            }
            else {
                alert("Please select Row");
            }
        },

        @*onSelectRow: function (rowid) {
            var gsr = jQuery("#reportsGrid").jqGrid('getGridParam', 'selrow');
            if (gsr) {
                var CategoryGuid = grid.jqGrid('getCell', gsr, 'CategoryGuid');
                window.location.href = '@Url.Action("Edit", "AdminNomCategory")/' + CategoryGuid
            }
            else {
                alert("Please select Row");
            }
        }*@
    });

    //jQuery("#reportsGrid").jqGrid('navGrid', '#pager', { edit: true, add: true, del: true });

    var template = "<div style='margin-left:15px;'><div> Customer ID <sup>*</sup>:</div><div> {CustomerID} </div>";
    template += "<div> Company Name: </div><div>{CompanyName} </div>";
    template += "<div> Phone: </div><div>{Phone} </div>";
    template += "<div> Postal Code: </div><div>{PostalCode} </div>";
    template += "<div> City:</div><div> {City} </div>";
    template += "<hr style='width:100%;'/>";
    template += "<div> {sData} {cData}  </div></div>";



      $('#reportsGrid').navGrid('#pager',
    // the buttons to appear on the toolbar of the grid
    { edit: true, add: true, del: true, search: false, refresh: false, view: false, position: "left", cloneToTop: false },
    //// options for the Edit Dialog
{
    editCaption: "The Edit Dialog",
    template: template,
    errorTextFormat: function (data) {
        return 'Error: ' + data.responseText
    }
},
// options for the Add Dialog
{
    template: template,
    errorTextFormat: function (data) {
        return 'Error: ' + data.responseText
    }
},
// options for the Delete Dailog
{
    errorTextFormat: function (data) {
        return 'Error: ' + data.responseText
    }
}
    );

        grid.jqGrid('filterToolbar', { searchOnEnter: true, enableClear: false });
        jQuery("#pager .ui-pg-selbox").closest("td").before("<td dir='ltr'>Rows per page </td>");
        grid.jqGrid('setGridHeight', $(window).innerHeight() - 450);
    });

    $(window).resize(function () {
        $('#reportsGrid').jqGrid('setGridHeight', $(window).innerHeight() - 450);

    });

</script>

我正在使用jqGrid 4.4.4和ASP.NET。我注意到的是，在示例页面上，按钮位于div中，其id为'jqGridPagerLeft'，但在我的页面上，该div没有id。所以我去查看jqGrid源代码但是我迷路了，我无法弄清楚为什么它没有分配id。

任何线索？我只想将按钮添加到底部工具栏。 THX！