? ?1.準備工作

? ? ? ? ? ?首先，要引入基本的jquery文件，然后是下載jqgrid插件，我這里引入的有jquery.jqGrid.src.js,grid.setcolumns.js,grid.locale-en.js,jqgrid.css,ui.multiselect.css.

? ?2.創建用來承載jqgrid的標簽

? ? ? ? ??<table id="gridTable"></table>

? ? ? ? ? ? ?<div id="gridPager"></div>//顯示分頁工具條

? ?3.填寫jqgrid初始化信息

? ? ? ? ?(1)有查詢參數需要從后臺加載數據并分頁顯示

??function inittestGrid()?

{
var jsonReader = {
root : "items",// 數據模型
total : "total",// 數據總頁數
page : "page",// 數據頁碼
records : "records"// 數據總記錄數
};
var options = {
datatype : "local",//可以是json
mtype : "POST",
caption : "標題",
// 添加表單數據到postData
beforeRequest : putFormData,//請求前調用函數
autowidth : false,
shrinkToFit : false,
autoScroll : false,
height : 700,
rowNum : 30,
page : 1,
beforeProcessing : function(d, status, xhr) {//在執行某操作前調用，這里主要是將數據全部顯示的all字符串轉換為該數據的總條數
if ($(this).jqGrid("getGridParam", "rowNum") == "all")
$(this).setGridParam({
rowNum : d.records
});
},
jsonReader : jsonReader,
pager : "#gridPager",//顯示分頁
rowList : [ 30, 50, 100, 'all' ],//每頁顯示記錄數,值去正整數，特殊情況需要處理。
viewrecords : true,
multiselect : true,//是否設置多選
hoverrows : true,
rownumbers : true,
colNames : [ 'Test001', 'Test002'],//設置標題列
colModel : [
{
name : "test001",
//hidden : true ? ? ? 是否隱藏該列
},
{
defval : "test002",
width : document.body.clientWidth * 0.12,//格式化某一列的顯示值
sortable:false,
formatter : function(cellvalue, options, rowObject) {
if (rowObject.test002== "false" && rowObject.test001=="")
return "";
?if (rowObject.test002=="true" && rowObject.test001== "")
return "Yes";
if(rowObject.test001!= "")
return "<font color='red'>No</font>";
}
}

]
};
$("#gridTable").jqGrid(options);
}

（2）如果不分頁且沒有查詢參數可以這樣寫。

? ? ? ? ? function inittestGrid() {
var options = {
datatype : "local",
mtype : "POST",
autowidth : true,
autoheight : true,
shrinkToFit : false,
autoScroll : false,
viewrecords : true,
hoverrows : true,
rownumbers : true,
colNames : ['Test001','Test002'],
colModel : [
{
name : "test001",
sortable: false,
width : document.body.clientWidth * 0.16
},
{
name : "test002",
sortable: false,
width : document.body.clientWidth * 0.16
}
]
};
$("#gridTable").jqGrid(options);
}? ? ??

?4.加載數據。

? ? 1）分頁情況。

? ? ??$("#gridTable").jqGrid("setGridParam", {
url : ‘’,//查詢數據Url
postData : param,//請求參數
datatype : "json"
}).trigger("reloadGrid");

? ?2)不分頁。

? ? ? ?function getData()
{
var param={};
param.test=test;
request(__path + "***",
{
data:param,
success:
function(data)
{

var costData = [];
if(data != ""&&data!=null&&data!="null"){
var json = eval(data);
$(json).each(function(){
costData.push({
test001: this.test01,//test001需要與jqgrid初始化時設置的列名一樣，test01與json的屬性名一樣.
test002:this.test02,
});
});
}
$("#gridTable")[0].addJSONData(costData);//將數據手動裝載到jqgrid里面。

}
});
? }

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的jqgrid使用的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。