jquery - JQgrid MVC4下方的添加，编辑，搜索，页面按钮

Question

我使用以下方法来绑定 JQGrid 中的数据。它工作正常。

我的问题是，网格底部的添加、编辑、页面、搜索等按钮（在 ReferImage 中突出显示）不显示。

如何在 JQgrid 下面插入添加、编辑、搜索、页面按钮？

添加脚本文件，如下所示，

    <link href="~/Content/Content/redmond/jquery-ui-1.10.4.custom.css" rel="stylesheet" />
    <link href="~/JQGrid/css/ui.jqgrid.css" rel="stylesheet" />
    <script src="~/JQGrid/js/jquery-1.11.0.min.js"></script>
    <script src="~/JQGrid/js/i18n/grid.locale-en.js"></script>
    <script src="~/JQGrid/js/jquery.jqGrid.min.js"></script>
    <script src="~/JQGrid/js/jquery.jqGrid.src.js"></script>

JqG​​rid 脚本

<script type="text/javascript">
    $(document).ready(function () { 
    $(function () {
        jQuery("#persontable").jqGrid({
            url: '/Home/passjson',
            datatype: "json",
            mtype: 'GET',
            colNames: ['FirstName', 'LastName', 'LevelOfEducation','Company'],
            colModel: [
                        { name: 'FirstName', index: 'FirstName', width: 100, align: 'left' },
                        { name: 'LastName', index: 'LastName', width: 110, align: 'left' },
                        { name: 'LevelOfEducation', index: 'LevelOfEducation', width: 110, align: 'left' },
                        { name: 'Company', index: 'Company', width: 110, align: 'left' }
            ],
            rowNum: 10,
            rowList: [10, 20, 30],
            sort: 'FirstName',
            viewrecords: true,
            gridview: true,
            loadonce: true,
            toolbar: [true, 'bottom'],
            multiselect: true,
            pager: "#jQGridPager",
            cellEdit: false,
            rowNumbers: true,
            viewrecords: true
        });

        $('#persontable').jqGrid('navGrid', '#jQGridPager',
        {
            edit: true,
            add: true,
            del: true,
            search: true,
            searchtext: "Search",
            addtext: "Add",
            edittext: "Edit",
            deltext: "Delete",
            refreshtext: "Refresh",
            position: 'left'
        });

    });
    });
</script>   
<table id="persontable" ></table>

参考图片

Answer 1

首先，您应该使用其中一个 jquery.jqGrid.min.js 或 jquery.jqGrid.src.js两个，但不能同时使用。

你的问题似乎我很容易。您使用pager: "#jQGridPager"jqGrid 的选项并navGrid使用参数调用'#jQGridPager'，但您没有<div>使用定义为空id="jQGridPager"。所以我想你应该只追加

<table id="persontable"></table>

和

<div id="jQGridPager"></div>

顺便说一句，该选项sort: 'FirstName'不存在。可能你的意思是sortname: 'FirstName'。

Answer 2

jqgrid 使用的按钮图像来自 jquery 主题。检查图像是否在images主题 css 的子目录名称中，在您的情况下可能在 redmond/images 文件夹中。