jqGrid显示隐藏按钮navGrid inlineNav

jqGrid 是一个基于 jQuery 的强大的网格插件，它提供了丰富的功能，包括分页、排序、编辑等

引入 jqGrid 相关的 CSS 和 JS 文件：

<link rel="stylesheet" type="text/css" href="jquery-ui.min.css" />
<link rel="stylesheet" type="text/css" href="jquery.jqGrid.min.css" />
<script src="jquery.min.js"></script>
<script src="jquery-ui.min.js"></script>
<script src="jquery.jqGrid.min.js"></script>

创建一个表格容器：

<table id="grid"></table>
<div id="pager"></div>

初始化 jqGrid，并配置 navGrid 和 inlineNav：

$(document).ready(function () {
    $("#grid").jqGrid({
        url: 'your-data-url', // 数据源 URL
        editurl: 'your-edit-url', // 编辑数据的 URL
        datatype: "json",
        colNames: ['列1', '列2', '列3'],
        colModel: [
            { name: 'col1', index: 'col1', width: 100 },
            { name: 'col2', index: 'col2', width: 100 },
            { name: 'col3', index: 'fig', width: 100, editable: true }
        ],
        rowNum: 10,
        rowList: [10, 20, 30],
        pager: '#pager',
        sortname: 'col1',
        viewrecords: true,
        sortorder: "asc",
        caption: "jqGrid 示例"
    });

    // 配置 navGrid
    $("#grid").jqGrid('navGrid', '#pager',
        { edit: true, add: true, del: true, search: true, refresh: true },
        { // 编辑选项
            zIndex: 100,
            url: 'your-edit-url',
            closeAfterEdit: true
        },
        { // 添加选项
            zIndex: 100,
            url: 'your-add-url',
            closeAfterAdd: true
        },
        { // 删除选项
            zIndex: 100,
            url: 'your-delete-url',
            closeAfterDel: true
        },
        { // 搜索选项
            zIndex: 100
        },
        { // 刷新选项
            zIndex: 100
        }
    );

    // 配置 inlineNav
    $("#grid").jqGrid('inlineNav', '#pager',
        {
            edit: true,
            add: true,
            del: true,
            addParams: { position: "first" },
            editParams: { position: "first" },
            delParams: { position: "first" }
        });
});

请注意替换 your-data-url、your-edit-url、your-add-url 和 your-delete-url 为您实际的数据和操作 URL。

这段代码将创建一个 jqGrid，并配置 navGrid 和 inlineNav。navGrid 提供了分页、搜索、编辑、添加和删除按钮，而 inlineNav 则允许您在表格内直接编辑、添加和删除数据。