//加载表格
function GetGrid() {
var queryJson = { anmc: encodeURI($("#anmc").val()) }
var $gridTable = $("#gridTable");
$gridTable.jqGrid({
url:"/dxfServices/anAction.do?method=find_AnByPage",
postData: { queryJson: JSON.stringify(queryJson) },
datatype: "json",
height: $(window).height() - 101,
colModel: [//常用到的属性:name 列显示的名称;index 传到服务器端用来排序用的列名称;width 列宽度;align 对齐方式;sortable 是否可以排序
{ label: '主键', name: 'id', index: 'id', width: 80, align: 'left', hidden: true },
{ label: '按钮图标', name: 'antp', index: 'antp', width: 180, align: 'center',sortable:false ,
formatter: function (cellvalue, options, rowObject) {
//return "";
return "";
}
},
{ label: '按钮名称', name: 'anmc', index: 'anmc', width: 250, align: 'center',sortable:false },
{ label: '按钮函数', name: 'anhs', index: 'anhs', width: 250, align: 'center',sortable:false },
{ label: '排序码', name: 'pxm', index: 'pxm', width: 120, align: 'center',sortable:false },
{ label: '创建时间', name: 'cjsj', index: 'cjsj', width: 250, align: 'center',sortable:false },
{ label: '按钮描述', name: 'anms', index: 'anms', width: 250, align: 'center',sortable:false }
],
viewrecords: true,//定义是否要显示总记录数
rowNum: 30,//在grid上显示记录条数,这个参数是要被传递到后台
rowList: [30, 50, 100, 500, 1000],//一个下拉选择框,用来改变显示记录数,当选择时会覆盖rowNum参数传递到后台
pager: "#gridPager",//定义翻页用的导航栏,必须是有效的html元素。翻页工具栏可以放置在html页面任意位置
sortname: 'cjsj',//排序列的名称,此参数会被传到后台
sortorder: 'desc',//排序顺序,升序或者降序(asc or desc)
rownumbers: true,//如果为ture则会在表格左边新增一列,显示行顺序号,从1开始递增。此列名为'rn'.
shrinkToFit: false,//此属性用来说明当初始化列宽度时候的计算类型,如果为ture,则按比例初始化列宽度。如果为false,则列宽度使用colModel指定的宽度
multiselect: true,//定义是否可以多选
gridview: true,//构造一行数据后添加到grid中,如果设为true则是将整个表格的数据都构造完成后再添加到grid中,但treeGrid, subGrid, or afterInsertRow 不能用
//当选择行时触发此事件。rowid:当前行id;status:选择状态,当multiselect 为true时此参数才可用
onSelectRow: function () {
//返回选中的id
selectedRowIndex = $("#" + this.id).getGridParam('selrow');
//返回点击这行xlmc的值
selectedRowValue = $("#gridTable").jqGridRowValue("xlmc");
},
//当表格所有数据都加载完成而且其他的处理也都完成时触发此事件,排序,翻页同样也会触发此事件
gridComplete: function () {
var ids = new Array();
//getDataIDs()返回当前grid里所有数据的id
ids = $("#" + this.id).getDataIDs();
//选择或反选指定行。如果onselectrow为ture则会触发事件onSelectRow,onselectrow默认为ture
$("#" + this.id).setSelection(ids[0], true);
}
});
}
案例地址:jqGrid实例详情