jquery.jqGrid 分页梅花详细代码

下面是使用 `jquery.jqGrid` 实现分页梅花的详细代码：

HTML 结构：

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

jQuery 代码：

$("#grid").jqGrid({
    url: "data.json",
    datatype: "json",
    colNames: ["编号", "姓名", "年龄", "性别"],
    colModel: [
        {name: "id", width: 60},
        {name: "name", width: 100},
        {name: "age", width: 60},
        {name: "gender", width: 60},
    ],
    rowNum: 10,
    rowList: [10, 20, 30],
    pager: "#pager",
    pagerpos: "center",
    recordpos: "left",
    pgbuttons: true,
    pgtext: "{0} 共 {1} 页",
    viewrecords: true,
    autowidth: true,
    height: "auto",
    multiselect: true,
    multiboxonly: true,
    gridComplete: function() {
        var ids = $("#grid").jqGrid("getDataIDs");
        for (var i = 0; i < ids.length; i++) {
            var id = ids[i];
            var rowData = $("#grid").jqGrid("getRowData", id);
            if (rowData.gender == "男") {
                $("#"+id).addClass("male");
            } else {
                $("#"+id).addClass("female");
            }
        }
    }
});

CSS 代码：

.ui-jqgrid .ui-jqgrid-pager .ui-pg-table {
    margin: 0 auto;
    text-align: center;
}
.ui-jqgrid tr.male td {
    background-color: #0099CC;
    color: #fff;
}
.ui-jqgrid tr.female td {
    background-color: #FF6666;
    color: #fff;
}

其中，`gridComplete` 回调函数用于在表格加载完成后为每一行添加背景颜色，`addClass` 方法用于添加样式类，CSS 代码中定义了 `male` 和 `female` 两个样式类分别对应男性和女性的背景颜色。