jqGrid 使用笔记
工作中用到的jqgrid笔记
- 默认参数设置
- 实例化jqGrid
- 获取所有行
- 获取选中行
- 添加行数据
- 清空表数据
- 刷新表格数据
默认参数设置
var navGridParams = {
edit:false,add:false,del:false,search:false
};
var jqGridParams = {
mtype:'post',
datatype:'json',
autowidth:true,
height:'auto',
viewrecords: true,
multiselect:true,
multiboxonly:true,
sortorder:'desc',
rowNum:10,
rowList:[5,10,15,20],
toolbar:[true,"bottom"],
hidegrid:false,
gridComplete:function(){
$('.ui-pg-input').focus(function(){
tcode_foucs=false;
});
}
};
实例化jqGrid
var Grid=null;
var GridParam = $.extend({},jqGridParams,{
url:url,
pager: '#Page',
caption: '列表标题',
multiselect:false,
sortname: 'id',
colNames:['表头1','表头2','表头3','','表头4','操作项'],
colModel:[
{name:'字段1',width:30,align:"center"},
{name:'字段2',width:100,align:"center"},
{name:'字段3', width:60,align:"center"},
{name:'不显示字段', hidden:true},
{name:'需要格式化值的字段', width:80,align:"center",formatter:function(cellvalue, options, rowObject){
return statusFormatter(rowObject);
}},
{name:'act',width:140,align:"center",formatter:function(cell,event,data){
return $('#GridFormatterDIV').html().replace(/{要替换的变量1}/g,data['字段1'])
.replace(/{要替换的变量2}/g,data['字段2']);
}}
],
ondblClickRow:function(rowid,iRow,iCol,e){
//绑定双击事件
});
Grid = $("#Table").jqGrid(GridParam);
//列表操作项
$("#t_Table").css(jqGridTopStyles);
$("#t_Table").html($('#Toolbar').html());
$("#Table").navGrid('#Page',navGridParams);
获取所有行
var obj = Grid.jqGrid("getRowData");
$(obj).each(function(){
alert(this.字段);
});
获取选择行
Grid.jqGrid(‘getGridParam’,'selrow’);
添加行数据
Grid.addRowData(i+1,{"id":id,"name":“aaa”,"retailPrice":123,"retailPricestr":"xx","act":"x"},"last");
清空表数据
Grid.clearGridData();
刷新表格数据
Grid.trigger("reloadGrid");