ui jqgrid bdiv

ui jqgrid 中的 bdiv 表示表格的主体部分，即表格中的数据部分。它是由 ui jqgrid 插件自动生成的 div 元素，用于包含表格的数据部分。bdiv 的样式可以通过 CSS 进行自定义，以满足不同的需求。一般情况下，可以通过设置 bdiv 的高度和宽度来控制表格的显示效果，也可以通过设置 overflow 属性来实现滚动条的显示。

相关问题

设置 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;
}

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

jqgrid pagerCustomI

很抱歉，我的回答不完整，我补充一下。

`pagerCustomIcons` 属性用于自定义 jqGrid 分页控件的图标，示例代码如下：

$("#grid").jqGrid({
    // 其他配置项
    pager: "#pager",
    pagerCustomIcons: {
        prev: "ui-icon ui-icon-circle-arrow-w",
        next: "ui-icon ui-icon-circle-arrow-e",
        first: "ui-icon ui-icon-seek-first",
        last: "ui-icon ui-icon-seek-end"
    },
    // 其他配置项
});

在上述代码中，我们通过设置 `pagerCustomIcons` 属性来自定义分页控件的图标，其中 `prev` 表示上一页按钮的图标，`next` 表示下一页按钮的图标，`first` 表示第一页按钮的图标，`last` 表示最后一页按钮的图标。

你可以根据需要使用自己喜欢的图标，例如使用 Font Awesome 图标：

$("#grid").jqGrid({
    // 其他配置项
    pager: "#pager",
    pagerCustomIcons: {
        prev: "fa fa-angle-left",
        next: "fa fa-angle-right",
        first: "fa fa-angle-double-left",
        last: "fa fa-angle-double-right"
    },
    // 其他配置项
});

在上述代码中，我们使用了 Font Awesome 图标来自定义分页控件的图标。