jqGrid学习之路
1、下载引进1）官网给的链接https://github.com/tonytomov/jqGrid/archive/master.zip2）引进 下面是一个demo，样式可以根据需要重写index.html<html lang="en"><head><!--<script type="text/javascript" src="js/require.js"></script>
·
1、下载引进
1）官网给的链接
https://github.com/tonytomov/jqGrid/archive/master.zip
2）引进 下面是一个demo，样式可以根据需要重写
index.html
<html lang="en">
<head>
<!-- <script type="text/javascript" src="js/require.js"></script> -->
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.jqGrid.min.js"></script>
<script type="text/javascript" src="js/grid.locale-en.js"></script>
<link rel="stylesheet" type="text/css" media="screen" href="css/jquery-ui.min.css" />
<link rel="stylesheet" type="text/css" media="screen" href="css/ui.jqgrid.css" />
<meta charset="utf-8" />
<title>jqGrid Loading Data - JSON</title>
</head>
<body>
<table id="jqGrid"></table>
<div id="jqGridPager"></div>
<script type="text/javascript">
// define();
$(document).ready(function() {
$("#jqGrid").jqGrid({
url : 'data.json',
datatype : "json",
colModel : [ {
label : 'Category Name',
name : 'CategoryName',
width : 75
}, {
label : 'Product Name',
name : 'ProductName',
width : 90
}, {
label : 'Country',
name : 'Country',
width : 100
}, {
label : 'Price',
name : 'Price',
width : 80,
sorttype : 'integer'
},
// sorttype is used only if the data is loaded locally or loadonce is set to true
{
label : 'Quantity',
name : 'Quantity',
width : 80,
sorttype : 'number'
} ],
viewrecords : true, // show the current page, data rang and total records on the toolbar
width : 780,
height : 200,
rowNum : 30,
loadonce : true, // this is just for the demo
pager : "#jqGridPager"
});
});
</script>
</body>
</html>data.json
{
"rows":[
{
"CategoryName":"Beverages",
"ProductName":"Steeleye Stout",
"Country":"UK",
"Price":"1008.0000",
"Quantity":"65"
},
{
"CategoryName":"Beverages",
"ProductName":"Laughing Lumberjack Lager",
"Country":"USA",
"Price":"140.0000",
"Quantity":"10"
},
{
"CategoryName":"Beverages",
"ProductName":"Lakkalik\u00f6\u00f6ri",
"Country":"USA",
"Price":"2160.0000",
"Quantity":"120"
},
{
"CategoryName":"Beverages",
"ProductName":"Guaran\u00e1 Fant\u00e1stica",
"Country":"USA",
"Price":"436.5000",
"Quantity":"97"
},
{
"CategoryName":"Beverages",
"ProductName":"Ipoh Coffee",
"Country":"UK",
"Price":"1656.0000",
"Quantity":"36"
},
{
"CategoryName":"Beverages",
"ProductName":"Chang",
"Country":"UK",
"Price":"342.0000",
"Quantity":"20"
},
{
"CategoryName":"Beverages",
"ProductName":"Chartreuse verte",
"Country":"USA",
"Price":"648.0000",
"Quantity":"42"
},
{
"CategoryName":"Beverages",
"ProductName":"Ipoh Coffee",
"Country":"USA",
"Price":"1656.0000",
"Quantity":"39"
},
{
"CategoryName":"Beverages",
"ProductName":"Chai",
"Country":"UK",
"Price":"1314.0000",
"Quantity":"73"
},
{
"CategoryName":"Beverages",
"ProductName":"Chang",
"Country":"USA",
"Price":"5168.0000",
"Quantity":"294"
},
{
"CategoryName":"Beverages",
"ProductName":"Steeleye Stout",
"Country":"USA",
"Price":"2772.0000",
"Quantity":"174"
},
{
"CategoryName":"Beverages",
"ProductName":"C\u00f4te de Blaye",
"Country":"USA",
"Price":"42160.0000",
"Quantity":"170"
},
{
"CategoryName":"Beverages",
"ProductName":"Outback Lager",
"Country":"USA",
"Price":"567.0000",
"Quantity":"42"
},
{
"CategoryName":"Beverages",
"ProductName":"Sasquatch Ale",
"Country":"USA",
"Price":"1610.0000",
"Quantity":"122"
},
{
"CategoryName":"Beverages",
"ProductName":"Chai",
"Country":"USA",
"Price":"3103.2000",
"Quantity":"180"
},
{
"CategoryName":"Beverages",
"ProductName":"Chartreuse verte",
"Country":"UK",
"Price":"288.0000",
"Quantity":"20"
},
{
"CategoryName":"Beverages",
"ProductName":"Guaran\u00e1 Fant\u00e1stica",
"Country":"UK",
"Price":"288.0000",
"Quantity":"80"
},
{
"CategoryName":"Beverages",
"ProductName":"Sasquatch Ale",
"Country":"UK",
"Price":"156.8000",
"Quantity":"14"
},
{
"CategoryName":"Beverages",
"ProductName":"Lakkalik\u00f6\u00f6ri",
"Country":"UK",
"Price":"266.4000",
"Quantity":"16"
},
{
"CategoryName":"Beverages",
"ProductName":"Rh\u00f6nbr\u00e4u Klosterbier",
"Country":"USA",
"Price":"2292.4500",
"Quantity":"297"
},
{
"CategoryName":"Beverages",
"ProductName":"Outback Lager",
"Country":"UK",
"Price":"900.0000",
"Quantity":"66"
},
{
"CategoryName":"Condiments",
"ProductName":"Sirop d'\u00e9rable",
"Country":"USA",
"Price":"3505.5000",
"Quantity":"141"
},
{
"CategoryName":"Condiments",
"ProductName":"Original Frankfurter gr\u00fcne So\u00dfe",
"Country":"USA",
"Price":"988.0000",
"Quantity":"82"
},
{
"CategoryName":"Condiments",
"ProductName":"Louisiana Fiery Hot Pepper Sauce",
"Country":"USA",
"Price":"904.3500",
"Quantity":"47"
},
{
"CategoryName":"Condiments",
"ProductName":"Chef Anton's Gumbo Mix",
"Country":"UK",
"Price":"1281.0000",
"Quantity":"60"
},
{
"CategoryName":"Condiments",
"ProductName":"Louisiana Hot Spiced Okra",
"Country":"UK",
"Price":"408.0000",
"Quantity":"24"
},
{
"CategoryName":"Condiments",
"ProductName":"Chef Anton's Cajun Seasoning",
"Country":"UK",
"Price":"550.0000",
"Quantity":"25"
},
{
"CategoryName":"Condiments",
"ProductName":"Chef Anton's Gumbo Mix",
"Country":"USA",
"Price":"1783.9000",
"Quantity":"86"
},
{
"CategoryName":"Condiments",
"ProductName":"Louisiana Fiery Hot Pepper Sauce",
"Country":"UK",
"Price":"442.0500",
"Quantity":"21"
},
{
"CategoryName":"Condiments",
"ProductName":"Chef Anton's Cajun Seasoning",
"Country":"USA",
"Price":"1188.0000",
"Quantity":"61"
},
{
"CategoryName":"Condiments",
"ProductName":"Aniseed Syrup",
"Country":"USA",
"Price":"40.0000",
"Quantity":"4"
},
{
"CategoryName":"Condiments",
"ProductName":"Grandma's Boysenberry Spread",
"Country":"USA",
"Price":"25.0000",
"Quantity":"1"
},
{
"CategoryName":"Condiments",
"ProductName":"Northwoods Cranberry Sauce",
"Country":"USA",
"Price":"2320.0000",
"Quantity":"72"
},
{
"CategoryName":"Condiments",
"ProductName":"Louisiana Hot Spiced Okra",
"Country":"USA",
"Price":"17.0000",
"Quantity":"1"
},
{
"CategoryName":"Condiments",
"ProductName":"Vegie-spread",
"Country":"USA",
"Price":"4300.6000",
"Quantity":"114"
},
{
"CategoryName":"Condiments",
"ProductName":"Gula Malacca",
"Country":"USA",
"Price":"2553.5000",
"Quantity":"152"
},
{
"CategoryName":"Condiments",
"ProductName":"Aniseed Syrup",
"Country":"UK",
"Price":"240.0000",
"Quantity":"30"
},
{
"CategoryName":"Condiments",
"ProductName":"Northwoods Cranberry Sauce",
"Country":"UK",
"Price":"800.0000",
"Quantity":"20"
},
{
"CategoryName":"Condiments",
"ProductName":"Sirop d'\u00e9rable",
"Country":"UK",
"Price":"855.0000",
"Quantity":"30"
},
{
"CategoryName":"Condiments",
"ProductName":"Genen Shouyu",
"Country":"USA",
"Price":"930.0000",
"Quantity":"60"
},
{
"CategoryName":"Confections",
"ProductName":"Maxilaku",
"Country":"UK",
"Price":"680.0000",
"Quantity":"40"
},
{
"CategoryName":"Confections",
"ProductName":"Scottish Longbreads",
"Country":"USA",
"Price":"3060.0000",
"Quantity":"247"
},
{
"CategoryName":"Confections",
"ProductName":"Tarte au sucre",
"Country":"UK",
"Price":"591.6000",
"Quantity":"12"
},
{
"CategoryName":"Confections",
"ProductName":"Schoggi Schokolade",
"Country":"USA",
"Price":"3950.0000",
"Quantity":"100"
},
{
"CategoryName":"Confections",
"ProductName":"Pavlova",
"Country":"USA",
"Price":"4739.5000",
"Quantity":"295"
},
{
"CategoryName":"Confections",
"ProductName":"Gumb\u00e4r Gummib\u00e4rchen",
"Country":"UK",
"Price":"374.7600",
"Quantity":"12"
},
{
"CategoryName":"Confections",
"ProductName":"NuNuCa Nu\u00df-Nougat-Creme",
"Country":"USA",
"Price":"568.4000",
"Quantity":"42"
},
{
"CategoryName":"Confections",
"ProductName":"Gumb\u00e4r Gummib\u00e4rchen",
"Country":"USA",
"Price":"3397.3500",
"Quantity":"125"
},
{
"CategoryName":"Confections",
"ProductName":"Zaanse koeken",
"Country":"USA",
"Price":"627.0000",
"Quantity":"66"
},
{
"CategoryName":"Confections",
"ProductName":"Maxilaku",
"Country":"USA",
"Price":"1260.0000",
"Quantity":"63"
},
{
"CategoryName":"Confections",
"ProductName":"Teatime Chocolate Biscuits",
"Country":"USA",
"Price":"1278.2000",
"Quantity":"141"
},
{
"CategoryName":"Confections",
"ProductName":"Sir Rodney's Scones",
"Country":"USA",
"Price":"1390.0000",
"Quantity":"139"
},
{
"CategoryName":"Confections",
"ProductName":"Tarte au sucre",
"Country":"USA",
"Price":"16953.8000",
"Quantity":"371"
},
{
"CategoryName":"Confections",
"ProductName":"Pavlova",
"Country":"UK",
"Price":"778.4000",
"Quantity":"56"
},
{
"CategoryName":"Confections",
"ProductName":"Sir Rodney's Marmalade",
"Country":"UK",
"Price":"1215.0000",
"Quantity":"15"
},
{
"CategoryName":"Confections",
"ProductName":"Sir Rodney's Marmalade",
"Country":"USA",
"Price":"2170.8000",
"Quantity":"28"
},
{
"CategoryName":"Confections",
"ProductName":"Teatime Chocolate Biscuits",
"Country":"UK",
"Price":"46.0000",
"Quantity":"5"
},
{
"CategoryName":"Confections",
"ProductName":"Scottish Longbreads",
"Country":"UK",
"Price":"250.0000",
"Quantity":"20"
},
{
"CategoryName":"Confections",
"ProductName":"Sir Rodney's Scones",
"Country":"UK",
"Price":"262.0000",
"Quantity":"29"
},
{
"CategoryName":"Dairy Products",
"ProductName":"Mozzarella di Giovanni",
"Country":"UK",
"Price":"1356.8000",
"Quantity":"41"
},
{
"CategoryName":"Dairy Products",
"ProductName":"Geitost",
"Country":"UK",
"Price":"136.5000",
"Quantity":"57"
},
{
"CategoryName":"Dairy Products",
"ProductName":"Raclette Courdavault",
"Country":"UK",
"Price":"770.0000",
"Quantity":"14"
},
{
"CategoryName":"Dairy Products",
"ProductName":"Queso Manchego La Pastora",
"Country":"USA",
"Price":"4636.0000",
"Quantity":"122"
},
{
"CategoryName":"Dairy Products",
"ProductName":"Gudbrandsdalsost",
"Country":"UK",
"Price":"972.0000",
"Quantity":"33"
},
{
"CategoryName":"Dairy Products",
"ProductName":"Fl\u00f8temysost",
"Country":"UK",
"Price":"1689.9000",
"Quantity":"82"
},
{
"CategoryName":"Dairy Products",
"ProductName":"Gorgonzola Telino",
"Country":"USA",
"Price":"2832.5000",
"Quantity":"241"
},
{
"CategoryName":"Dairy Products",
"ProductName":"Queso Cabrales",
"Country":"UK",
"Price":"1365.0000",
"Quantity":"65"
},
{
"CategoryName":"Dairy Products",
"ProductName":"Mascarpone Fabioli",
"Country":"USA",
"Price":"1056.0000",
"Quantity":"41"
},
{
"CategoryName":"Dairy Products",
"ProductName":"Camembert Pierrot",
"Country":"UK",
"Price":"4590.0000",
"Quantity":"151"
},
{
"CategoryName":"Dairy Products",
"ProductName":"Queso Cabrales",
"Country":"USA",
"Price":"1113.0000",
"Quantity":"53"
},
{
"CategoryName":"Dairy Products",
"ProductName":"Geitost",
"Country":"USA",
"Price":"500.5000",
"Quantity":"221"
},
{
"CategoryName":"Dairy Products",
"ProductName":"Mozzarella di Giovanni",
"Country":"USA",
"Price":"3763.6000",
"Quantity":"117"
},
{
"CategoryName":"Dairy Products",
"ProductName":"Fl\u00f8temysost",
"Country":"USA",
"Price":"4364.5000",
"Quantity":"215"
},
{
"CategoryName":"Dairy Products",
"ProductName":"Raclette Courdavault",
"Country":"USA",
"Price":"14080.0000",
"Quantity":"276"
},
{
"CategoryName":"Dairy Products",
"ProductName":"Gudbrandsdalsost",
"Country":"USA",
"Price":"3600.0000",
"Quantity":"100"
},
{
"CategoryName":"Dairy Products",
"ProductName":"Gorgonzola Telino",
"Country":"UK",
"Price":"700.0000",
"Quantity":"70"
},
{
"CategoryName":"Dairy Products",
"ProductName":"Camembert Pierrot",
"Country":"USA",
"Price":"5603.2000",
"Quantity":"173"
},
{
"CategoryName":"Dairy Products",
"ProductName":"Mascarpone Fabioli",
"Country":"UK",
"Price":"768.0000",
"Quantity":"24"
},
{
"CategoryName":"Grains\/Cereals",
"ProductName":"Ravioli Angelo",
"Country":"UK",
"Price":"117.0000",
"Quantity":"6"
},
{
"CategoryName":"Grains\/Cereals",
"ProductName":"Gustaf's Kn\u00e4ckebr\u00f6d",
"Country":"UK",
"Price":"642.6000",
"Quantity":"33"
},
{
"CategoryName":"Grains\/Cereals",
"ProductName":"Filo Mix",
"Country":"UK",
"Price":"154.0000",
"Quantity":"26"
},
{
"CategoryName":"Grains\/Cereals",
"ProductName":"Tunnbr\u00f6d",
"Country":"UK",
"Price":"736.2000",
"Quantity":"86"
},
{
"CategoryName":"Grains\/Cereals",
"ProductName":"Ravioli Angelo",
"Country":"USA",
"Price":"1072.5000",
"Quantity":"65"
},
{
"CategoryName":"Grains\/Cereals",
"ProductName":"Filo Mix",
"Country":"USA",
"Price":"252.0000",
"Quantity":"36"
},
{
"CategoryName":"Grains\/Cereals",
"ProductName":"Singaporean Hokkien Fried Mee",
"Country":"USA",
"Price":"1246.0000",
"Quantity":"89"
},
{
"CategoryName":"Grains\/Cereals",
"ProductName":"Gnocchi di nonna Alice",
"Country":"USA",
"Price":"12980.8000",
"Quantity":"366"
},
{
"CategoryName":"Grains\/Cereals",
"ProductName":"Tunnbr\u00f6d",
"Country":"USA",
"Price":"414.0000",
"Quantity":"46"
},
{
"CategoryName":"Grains\/Cereals",
"ProductName":"Gustaf's Kn\u00e4ckebr\u00f6d",
"Country":"USA",
"Price":"1008.0000",
"Quantity":"48"
},
{
"CategoryName":"Grains\/Cereals",
"ProductName":"Wimmers gute Semmelkn\u00f6del",
"Country":"USA",
"Price":"3458.0000",
"Quantity":"110"
},
{
"CategoryName":"Grains\/Cereals",
"ProductName":"Wimmers gute Semmelkn\u00f6del",
"Country":"UK",
"Price":"239.4000",
"Quantity":"9"
},
{
"CategoryName":"Grains\/Cereals",
"ProductName":"Gnocchi di nonna Alice",
"Country":"UK",
"Price":"1178.0000",
"Quantity":"35"
},
{
"CategoryName":"Meat\/Poultry",
"ProductName":"Perth Pasties",
"Country":"USA",
"Price":"5916.0000",
"Quantity":"186"
},
{
"CategoryName":"Meat\/Poultry",
"ProductName":"Mishi Kobe Niku",
"Country":"UK",
"Price":"291.0000",
"Quantity":"3"
},
{
"CategoryName":"Meat\/Poultry",
"ProductName":"Th\u00fcringer Rostbratwurst",
"Country":"UK",
"Price":"2079.0000",
"Quantity":"21"
},
{
"CategoryName":"Meat\/Poultry",
"ProductName":"P\u00e2t\u00e9 chinois",
"Country":"USA",
"Price":"4008.0000",
"Quantity":"191"
},
{
"CategoryName":"Meat\/Poultry",
"ProductName":"P\u00e2t\u00e9 chinois",
"Country":"UK",
"Price":"840.0000",
"Quantity":"35"
},
{
"CategoryName":"Meat\/Poultry",
"ProductName":"Th\u00fcringer Rostbratwurst",
"Country":"USA",
"Price":"19705.1600",
"Quantity":"173"
},
{
"CategoryName":"Meat\/Poultry",
"ProductName":"Tourti\u00e8re",
"Country":"USA",
"Price":"1673.3000",
"Quantity":"240"
},
{
"CategoryName":"Meat\/Poultry",
"ProductName":"Alice Mutton",
"Country":"USA",
"Price":"13509.6000",
"Quantity":"361"
},
{
"CategoryName":"Meat\/Poultry",
"ProductName":"Alice Mutton",
"Country":"UK",
"Price":"975.0000",
"Quantity":"25"
},
{
"CategoryName":"Meat\/Poultry",
"ProductName":"Tourti\u00e8re",
"Country":"UK",
"Price":"52.1500",
"Quantity":"7"
},
{
"CategoryName":"Meat\/Poultry",
"ProductName":"Perth Pasties",
"Country":"UK",
"Price":"1113.6000",
"Quantity":"42"
},
{
"CategoryName":"Meat\/Poultry",
"ProductName":"Mishi Kobe Niku",
"Country":"USA",
"Price":"582.0000",
"Quantity":"6"
},
{
"CategoryName":"Produce",
"ProductName":"R\u00f6ssle Sauerkraut",
"Country":"USA",
"Price":"1549.2000",
"Quantity":"37"
},
{
"CategoryName":"Produce",
"ProductName":"Manjimup Dried Apples",
"Country":"USA",
"Price":"3286.0000",
"Quantity":"62"
},
{
"CategoryName":"Produce",
"ProductName":"Uncle Bob's Organic Dried Pears",
"Country":"USA",
"Price":"3780.0000",
"Quantity":"131"
},
{
"CategoryName":"Produce",
"ProductName":"Tofu",
"Country":"USA",
"Price":"1850.7000",
"Quantity":"91"
},
{
"CategoryName":"Produce",
"ProductName":"R\u00f6ssle Sauerkraut",
"Country":"UK",
"Price":"1822.4000",
"Quantity":"44"
},
{
"CategoryName":"Produce",
"ProductName":"Uncle Bob's Organic Dried Pears",
"Country":"UK",
"Price":"3840.0000",
"Quantity":"134"
},
{
"CategoryName":"Produce",
"ProductName":"Manjimup Dried Apples",
"Country":"UK",
"Price":"1420.4000",
"Quantity":"31"
},
{
"CategoryName":"Seafood",
"ProductName":"Konbu",
"Country":"UK",
"Price":"202.8000",
"Quantity":"34"
},
{
"CategoryName":"Seafood",
"ProductName":"Spegesild",
"Country":"UK",
"Price":"180.0000",
"Quantity":"15"
},
{
"CategoryName":"Seafood",
"ProductName":"Jack's New England Clam Chowder",
"Country":"USA",
"Price":"2139.8500",
"Quantity":"227"
},
{
"CategoryName":"Seafood",
"ProductName":"Escargots de Bourgogne",
"Country":"USA",
"Price":"1073.2500",
"Quantity":"87"
},
{
"CategoryName":"Seafood",
"ProductName":"Nord-Ost Matjeshering",
"Country":"UK",
"Price":"388.3500",
"Quantity":"15"
},
{
"CategoryName":"Seafood",
"ProductName":"Ikura",
"Country":"USA",
"Price":"2945.0000",
"Quantity":"95"
},
{
"CategoryName":"Seafood",
"ProductName":"Spegesild",
"Country":"USA",
"Price":"1368.0000",
"Quantity":"120"
},
{
"CategoryName":"Seafood",
"ProductName":"R\u00f8gede sild",
"Country":"USA",
"Price":"1767.0000",
"Quantity":"186"
},
{
"CategoryName":"Seafood",
"ProductName":"Gravad lax",
"Country":"USA",
"Price":"1560.0000",
"Quantity":"60"
},
{
"CategoryName":"Seafood",
"ProductName":"Inlagd Sill",
"Country":"USA",
"Price":"3515.0000",
"Quantity":"185"
},
{
"CategoryName":"Seafood",
"ProductName":"R\u00f8gede sild",
"Country":"UK",
"Price":"114.0000",
"Quantity":"15"
},
{
"CategoryName":"Seafood",
"ProductName":"Konbu",
"Country":"USA",
"Price":"1560.0000",
"Quantity":"262"
},
{
"CategoryName":"Seafood",
"ProductName":"R\u00f6d Kaviar",
"Country":"USA",
"Price":"1230.0000",
"Quantity":"82"
},
{
"CategoryName":"Seafood",
"ProductName":"Gravad lax",
"Country":"UK",
"Price":"468.0000",
"Quantity":"18"
},
{
"CategoryName":"Seafood",
"ProductName":"Jack's New England Clam Chowder",
"Country":"UK",
"Price":"211.9000",
"Quantity":"26"
},
{
"CategoryName":"Seafood",
"ProductName":"Inlagd Sill",
"Country":"UK",
"Price":"1140.0000",
"Quantity":"60"
},
{
"CategoryName":"Seafood",
"ProductName":"Ikura",
"Country":"UK",
"Price":"1116.0000",
"Quantity":"36"
},
{
"CategoryName":"Seafood",
"ProductName":"Boston Crab Meat",
"Country":"USA",
"Price":"1876.6000",
"Quantity":"104"
},
{
"CategoryName":"Seafood",
"ProductName":"Boston Crab Meat",
"Country":"UK",
"Price":"147.0000",
"Quantity":"10"
},
{
"CategoryName":"Seafood",
"ProductName":"Carnarvon Tigers",
"Country":"USA",
"Price":"5187.5000",
"Quantity":"88"
},
{
"CategoryName":"Seafood",
"ProductName":"Nord-Ost Matjeshering",
"Country":"USA",
"Price":"926.3700",
"Quantity":"44"
}
]
}2,理解一些难点。
不管怎样，阅读代码是最快的学习方式，上面其实少了一个jsonReader，
又比如下面这个例子
var search_beginTime = $("#searchDaily_beginTime").val(),
search_endTime = $("#searchDaily_endTime").val();
$('#searchDailyGrid').jqGrid({
url: '/services/daily/daily.action',
mtype: 'GET',
height: "100%",
jsonReader: {
root: 'page.result',
page: 'page.pageNo',
total: 'page.totalPages',
records: 'page.totalCount',
repeatitems: false,
},
prmNames: {
page: 'page.pageNo',
rows: 'page.pageSize',
sort: 'page.orderBy',
order: 'page.order',
search: 'page.search',
},
postData: {
"search_beginTime": search_beginTime,
"search_endTime": search_endTime
},
//numberOfColumns : 3, 跨越的列数
colNames: ['depId', '总订单数', '总金额', '操作人', '日结时间'],
colModel: [{
name: 'depId',
index: 'depId',
width: 0,
hidden: true
}, {
name: 'totalCount',
index: 'totalCount',
// width: 150,
hidden: false,
sortable: false
}, {
name: 'totalFee',
index: 'totalFee',
// width: 100,
hidden: false
}, {
name: 'createUser',
index: 'createUser',
// width: 100,
hidden: false,
sortable: false
}, {
name: 'createTime',
index: 'createTime',
// width: 100,
formatter: 'date',
formatoptions: {
srcformat: 'Y-m-d',
newformat: 'Y-m-d'
}
}],
pager: '#gridPager',
multiselect: false,
caption: "日结查询",
loadError: function(xhr, status, error) {
},
ondblClickRow: function(rowid, iRow, iCol, e) {
time = $('#searchDailyGrid').getCell(rowid, "createTime");
searchDaily .showDetail(time);
}
});
// 定义navbar部分
$('#searchDailyGrid').jqGrid('navGrid', '#gridPager', {
add: false,
edit: false,
del: false,
search: false,
refresh: true,
});
// 添加查看明细按钮
$('#searchDailyGrid').navButtonAdd('#gridPager', {
caption: "查看明细",
buttonicon: "fa fa-search icon-green",
onClickButton: function() {
var rowid = $('#searchDailyGrid').jqGrid('getGridParam', 'selrow');
if (!rowid) {
return;
}
time = $('#searchDailyGrid').getCell(rowid, "createTime");
searchDaily .showDetail(time);
}
});
下面讲解一下难点了。
（1）jsonReader 跟服务器端返回的数据做对应。什么意思呢。就是说
jsonReader 的写法是需要同服务器沟通的，按照response来写，
如上面的例子，response是这样的
（2） prmNames 则是默认的请求参数，参数为null时不会被发到服务器端。可以在header中看到
（3） postData 也是请求参数，此数组内容直接赋值到url上，参 数类型：{name1:value1…}
（4）colNames: 列名， 你准备用什么名字来命名列，可以跟服务器不一样。
（5）colModel 对象数组，定义每一个列的属性，跟jsonReader一样，需要跟服务端 沟通才能写。如上面的colModel，返回的数据是这样的。
3、事件，方法等
我主要是看这里的文档的，
http://blog.mn886.net/jqGrid/
不过说实话，很多地方看不明白，很多地方缺少，对我这个初学者，难度好大。
比如说，getGridParam这个方法就说的不清楚。
这个方法功能特别强大，可以用来获取你前面ajax请求里面的所有信息。
比如： getGridParam(“colNames”);
开放原子开发者工作坊旨在鼓励更多人参与开源活动，与志同道合的开发者们相互交流开发经验、分享开发心得、获取前沿技术趋势。工作坊有多种形式的开发者活动，如meetup、训练营等，主打技术交流，干货满满，真诚地邀请各位开发者共同参与！
更多推荐
0
0- 0
已为社区贡献1条内容
所有评论(0)