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

Posted 2023-02-15

【中文标题】JQgrid MVC4下方的添加，编辑，搜索，页面按钮

【英文标题】：add,edit,search,page button in below JQgrid MVC4

【发布时间】：2014-07-24 16:11:10

【问题描述】：

我使用以下方法在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>

参考图片

【问题讨论】：

你有名为jQGridPager的寻呼机吗？

@nazmoonnoor 是的。但它不起作用

【参考方案1】：

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

【讨论】：

甚至页面也没有显示

【参考方案2】：

首先你应该使用 either jquery.jqGrid.min.js 或 jquery.jqGrid.src.js 但不能同时使用。

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

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

与

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

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