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>

JqGrid脚本

<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>

参考图片 enter image description here

Answer 1

首先，您应该使用 <{em> jquery.jqGrid.min.js 或 jquery.jqGrid.src.js，但不能同时使用。

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

id="jQGridPager"

与

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

顺便说一下，选项<div id="jQGridPager"></div>不存在。可能你的意思是sort: 'FirstName'。

Answer 2

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

在JQgrid MVC4下面添加，编辑，搜索，页面按钮

2 个答案: