设置 jqgrid表格样式

可以通过以下步骤设置 jqGrid 表格样式：

1. 引入 jqGrid 插件和样式文件。

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqgrid/5.4.0/css/ui.jqgrid.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqgrid/5.4.0/js/jquery.jqgrid.min.js"></script>

2. 在 HTML 页面中添加一个 div 元素作为表格容器。

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

3. 使用 JavaScript 代码初始化 jqGrid 表格并设置样式。

$(function(){
    $("#grid").jqGrid({
        url: "data.json",
        datatype: "json",
        colModel: [
            { name: "id", label: "ID", width: 50 },
            { name: "name", label: "Name", width: 150 },
            { name: "age", label: "Age", width: 50 },
            { name: "address", label: "Address", width: 200 }
        ],
        rowNum: 10,
        rowList: [10, 20, 30],
        pager: "#pager",
        sortname: "id",
        viewrecords: true,
        sortorder: "asc",
        caption: "Sample Grid"
    });
    $("#grid").jqGrid("navGrid", "#pager", { edit: false, add: false, del: false });
});

4. 在 CSS 文件中添加样式。

.ui-jqgrid {
    font-size: 14px;
}
.ui-jqgrid tr.jqgrow td {
    padding: 5px;
}
.ui-jqgrid .ui-jqgrid-hdiv {
    background-color: #f2f2f2;
}
.ui-jqgrid .ui-jqgrid-btable {
    border-collapse: separate;
    border-spacing: 0px;
}
.ui-jqgrid .ui-jqgrid-pager {
    background-color: #f2f2f2;
    border-top: none;
}
.ui-jqgrid .ui-jqgrid-pager .ui-pg-table {
    margin: 0;
}
.ui-jqgrid .ui-jqgrid-pager .ui-pg-table .ui-pg-button {
    border: none;
    margin: 0 5px;
}
.ui-jqgrid .ui-jqgrid-pager .ui-pg-table .ui-pg-button:hover {
    background-color: #e6e6e6;
}

注意：样式文件中的样式可以根据需要进行修改，以上只是一个示例。