Jqgrid使用总结:
1、表格初始化
function initTable(){
jQuery("#tableId").jqGrid({
url : "",
datatype : "json",
mtype: 'POST',
colNames : [ "id","","",...], #列头
colModel : [
{ name : "id",index : "id",hidden : true },
{ name : "name", index : "name", hidden:true},
{ name : "name_href", index : "name_href", align : "left",
formatter: function (cellvalue, options, rowObject) { #自定义函数
...
return ***;
}
},
...
],
autowidth : true,
height : 200,
rowNum : 10, #分页大小
rowList : [ 10, 20, 30 ],
pager : "#table_pager_id", #表格分页div
pagerpos : "left",
viewrecords : true,
multiselect : true #是否多选
});
}
2、根据条件查询加载
function reloadTable(){
var name = $("#name").val();
var code = $("#code").val();
var status = $("#status").val();
$("#tableId").jqGrid('setGridParam',{
postData:{
"name": name,
"code": code,
"status":status
}, //请求的业务参数数据
page:1
}).trigger("reloadGrid"); //重新载入
}
3、动态设置单元格属性及值
$("#tableId").setColProp("sub_org",{editoptions : {value : getSubOrgList(value)}});
$("#tableId").jqGrid("setCell", rowid, "sub_org_code",value);
4、获取表格值
var ids = $("#tableId").jqGrid("getGridParam","selarrrow"); #多选时,获取勾选的id数组
var id = $("#tableId").jqGrid("getGridParam","selrow"); #单选
var rowData = $("#tableId").jqGrid("getRowData",rowId); #根据id,获取行数据
var rowDatas = $("#tableId").jqGrid("getRowData");
1、表格初始化
function initTable(){
jQuery("#tableId").jqGrid({
url : "",
datatype : "json",
mtype: 'POST',
colNames : [ "id","","",...], #列头
colModel : [
{ name : "id",index : "id",hidden : true },
{ name : "name", index : "name", hidden:true},
{ name : "name_href", index : "name_href", align : "left",
formatter: function (cellvalue, options, rowObject) { #自定义函数
...
return ***;
}
},
...
],
autowidth : true,
height : 200,
rowNum : 10, #分页大小
rowList : [ 10, 20, 30 ],
pager : "#table_pager_id", #表格分页div
pagerpos : "left",
viewrecords : true,
multiselect : true #是否多选
});
}
2、根据条件查询加载
function reloadTable(){
var name = $("#name").val();
var code = $("#code").val();
var status = $("#status").val();
$("#tableId").jqGrid('setGridParam',{
postData:{
"name": name,
"code": code,
"status":status
}, //请求的业务参数数据
page:1
}).trigger("reloadGrid"); //重新载入
}
3、动态设置单元格属性及值
$("#tableId").setColProp("sub_org",{editoptions : {value : getSubOrgList(value)}});
$("#tableId").jqGrid("setCell", rowid, "sub_org_code",value);
4、获取表格值
var ids = $("#tableId").jqGrid("getGridParam","selarrrow"); #多选时,获取勾选的id数组
var id = $("#tableId").jqGrid("getGridParam","selrow"); #单选
var rowData = $("#tableId").jqGrid("getRowData",rowId); #根据id,获取行数据
var rowDatas = $("#tableId").jqGrid("getRowData");