1.html页面中定义table
(1)首先在js中定义定义表格id和 page id
// 定义表格id
var grid_selector = "#grid-table";
// 定义分页id
var pager_selector = "#grid-pager";
(2)在jQuery(function($) {})初始化表格;
formatter : function(cellValue, options, rowObject){
//其中cellValue是指当前列的值
//rowObject指的是这一行的值
//options 来设置对应formatter的参数,jqGrid中预定义了常见的格式及其options(有待确定)
<div class="row-fluid">
<div class="span12">
<table id="grid-table"></table>
<div id="grid-pager"></div>
</div>
</div>
其中的table(grid-table)代表的是表格;id为grid-pager 用于放分页时用到的数据包括(当前是第几页、总共多少页、每页多少条、当前页是第几条到第几条、总共多少条记录)
2.js
(1)首先在js中定义定义表格id和 page id
// 定义表格id
var grid_selector = "#grid-table";
// 定义分页id
var pager_selector = "#grid-pager";
(2)在jQuery(function($) {})初始化表格;
jQuery(grid_selector).jqGrid({
subGrid : false, // 此处设置为true时可以打开子项,子项用不到已删除
url : "",// 获取数据的地址
rownumbers : true,
datatype : "json",
mtype : "POST",
hidegrid : false,//收缩列表按钮
prmNames : {
page : "pageNumInput",
rows : "pageSize"
},// 重新定义分页信息
height : 385, // 表格高度
colNames : ['手机号', '意见内容','提交时间'],
colModel : [ {
name : 'phone',
index : 'phone',
width : 100,
editable : true,
}, {
name : 'idea',
index : 'idea',
width : 120,
editable : false,
}, {
name : 'timestamp',
index : 'timestamp',
width : 120,
editable : false,
}],
viewrecords : true,
rowNum : 20,
rowList : [20, 50, 100,200],
pager : pager_selector,
altRows : true,
multiselect : false,
multiboxonly : true,
emptyrecords : "无数据",
loadComplete : function(data) {
var table = this;
setTimeout(function() {
styleCheckbox(table);
updateActionIcons(table);
updatePagerIcons(table);
enableTooltips(table);
}, 0);
if (data.status == "success") {
$("#alert_success").show();
setTimeout(function() {
$("#alert_success").hide();
}, 1000);
}
},
jsonReader : { // jsonReader来跟服务器端返回的数据做对应
root : "dataRows", // 包含实际数据的数组
page : "currPage", // 当前页
total : "totalPage",// 总页数
records : "totalCount", // 查询出的记录数
id : "id",
repeatitems : false
},
editurl : "",// nothing is saved
caption : ""
});
注意:
1.需要主要的是colNames的个数要和colModel集合中的个数要相同;如果要隐藏列表中的你某个字段时只需要加上hidden:true;
2.字段显示格式化如下:formatter : function(cellValue, options, rowObject){
//其中cellValue是指当前列的值
//rowObject指的是这一行的值
//options 来设置对应formatter的参数,jqGrid中预定义了常见的格式及其options(有待确定)
}
例如时间格式化显示:
{
name : 'registrationTime',
index : 'registrationTime',
width : 100,
editable : true,
formatter : function(cellValue, options, rowObject){
return getTime(cellValue);
}
}
function getTime(time){
var item ="";
if(time!=null){
var date = new Date(time);
Y = date.getFullYear() + '-';
M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-';
D = (date.getDate() < 10 ? '0'+(date.getDate()) : date.getDate())+ ' ';
h = (date.getHours()< 10 ? '0' +(date.getHours()) : date.getHours() )+ ':';
m = (date.getMinutes()< 10 ? '0' +(date.getMinutes()) : date.getMinutes() )+ ':';
s = (date.getSeconds()<10 ? '0' +(date.getSeconds()) : date.getSeconds());
item=Y+M+D+h+m+s;
}
return item;
}
注:
registrationTime在实体类中为Date 类型;
例如将某个字段作为连接调到另一个页面
{
name : 'id',
index : 'id',
width : 100,
editable : true,
formatter:function(cellvalue,options,rowObject){
var temp="<a href=\"javascript:void(0)\" οnclick=\"viewMember("+cellvalue+")\">"+cellvalue+"</a>";
return temp;
}
}
function viewMember(id){
window.location.href="viewMember.do?id="+id;
}
3.将js文件引入到HTML中去