jquery.jqGrid 分页样式
时间: 2023-08-25 15:21:50 浏览: 47
jquery.jqGrid 的分页样式可以通过设置 `pager` 属性来实现。可以在 `pager` 属性中设置一些样式,如下所示:
```javascript
$("#grid").jqGrid({
// ...其他属性
pager: "#pager",
pagerpos: "center",
recordpos: "left",
pgbuttons: true,
pgtext: "{0} 共 {1} 页",
viewrecords: true
});
```
其中,`pager` 属性指定了分页按钮的容器元素,`pagerpos` 属性指定了分页按钮的位置(可选值为 "left", "center", "right"),`recordpos` 属性指定了记录信息的位置(可选值为 "left", "center", "right"),`pgbuttons` 属性指定了是否显示分页按钮,`pgtext` 属性指定了分页信息的格式,`viewrecords` 属性指定了是否显示记录信息。你可以根据自己的需要来设置这些属性。
相关问题
jquery.jqGrid 分页参数封装
在使用jquery.jqGrid插件时,分页参数的封装可以通过设置`postData`属性来实现。
具体步骤如下:
1. 定义一个函数来封装分页参数:
```javascript
function getGridData(pageNum, pageSize) {
var postData = {};
postData.page = pageNum;
postData.rows = pageSize;
return postData;
}
```
其中,`pageNum`和`pageSize`分别表示当前页码和每页显示的记录数。
2. 在jqGrid初始化时,将上一步中定义的函数赋值给`postData`属性:
```javascript
$("#grid").jqGrid({
url: "data.json",
datatype: "json",
colNames: ['ID', 'Name', 'Price'],
colModel: [
{name: 'id', index: 'id', width: 55},
{name: 'name', index: 'name', width: 90},
{name: 'price', index: 'price', width: 80, align: "right"}
],
rowNum: 10,
rowList: [10, 20, 30],
pager: '#pager',
sortname: 'id',
viewrecords: true,
sortorder: "desc",
postData: getGridData(1, 10) // 设置分页参数
});
```
在上面的代码中,`postData`属性的值是`getGridData(1, 10)`,表示默认显示第一页,每页显示10条记录。
3. 当用户点击分页按钮时,重新设置`postData`属性:
```javascript
$("#grid").jqGrid('navGrid','#pager',{edit:false,add:false,del:false});
$("#grid").jqGrid('navButtonAdd','#pager',{
caption:"Next",
buttonicon:"ui-icon-arrowthick-1-e",
onClickButton:function(){
var currentPage = $("#grid").getGridParam('page');
var pageSize = $("#grid").getGridParam('rowNum');
$("#grid").setGridParam({postData:getGridData(currentPage+1, pageSize)}).trigger("reloadGrid");
},
position:"last"
});
```
在上面的代码中,当用户点击“Next”按钮时,会重新设置`postData`属性为`getGridData(currentPage+1, pageSize)`,即下一页的分页参数,然后重新加载表格数据。
通过上面的步骤,就可以实现jquery.jqGrid的分页参数封装。
jquery.jqGrid 分页梅花详细代码
下面是使用 `jquery.jqGrid` 实现分页梅花的详细代码:
HTML 结构:
```html
<table id="grid"></table>
<div id="pager"></div>
```
jQuery 代码:
```javascript
$("#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 代码:
```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` 两个样式类分别对应男性和女性的背景颜色。