最新版本5.2 收费
JQGrid是一个在jquery基础上做的一个表格控件，以ajax的方式和服务器端通信。
文件解压结构
我们需要的使用的是css目录和js 目录 src目录是源码目录 plugins是额外插件目录
引入文件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="css/ui.jqgrid-bootstrap-ui.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/ui.jqgrid-bootstrap.css">
<link rel="stylesheet" type="text/css" href="css/ui.jqgrid.css">
</head>
<body>
<script type="text/javascript" src="js/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="js/i18n/grid.locale-cn.js"></script>
<script type="text/javascript" src="js/jquery.jqGrid.min.js"></script>
</body>
</html>
注意js引入顺序。
第一个demo 加载本地数据
html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="css/ui.jqgrid-bootstrap-ui.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/ui.jqgrid-bootstrap.css">
<link rel="stylesheet" type="text/css" href="css/ui.jqgrid.css">
</head>
<body>
<style>
html,
body {
margin: 0;
padding: 0;
font-size: 75%;
}
</style>
<table id="list4"></table>
<script type="text/javascript" src="js/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="js/i18n/grid.locale-cn.js"></script>
<script type="text/javascript" src="js/jquery.jqGrid.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#list4").jqGrid({
datatype: "local",
height: 250,
colNames: ['Inv No', 'Date', 'Client', 'Amount', 'Tax', 'Total', 'Notes'],
colModel: [{
name: 'id',
index: 'id',
width: 60,
sorttype: "int"
}, {
name: 'invdate',
index: 'invdate',
width: 90,
sorttype: "date"
}, {
name: 'name',
index: 'name',
width: 100
}, {
name: 'amount',
index: 'amount',
width: 80,
align: "right",
sorttype: "float"
}, {
name: 'tax',
index: 'tax',
width: 80,
align: "right",
sorttype: "float"
},
{
name: 'total',
index: 'total',
width: 80,
align: "right",
sorttype: "float"
}, {
name: 'note',
index: 'note',
width: 150,
sortable: false
}
],
multiselect: true,
caption: "Manipulating Array Data"
});
var mydata = [{
id: "1",
invdate: "2007-10-01",
name: "test",
note: "note",
amount: "200.00",
tax: "10.00",
total: "210.00"
}, {
id: "2",
invdate: "2007-10-02",
name: "test2",
note: "note2",
amount: "300.00",
tax: "20.00",
total: "320.00"
}, {
id: "3",
invdate: "2007-09-01",
name: "test3",
note: "note3",
amount: "400.00",
tax: "30.00",
total: "430.00"
}, {
id: "4",
invdate: "2007-10-04",
name: "test",
note: "note",
amount: "200.00",
tax: "10.00",
total: "210.00"
}, {
id: "5",
invdate: "2007-10-05",
name: "test2",
note: "note2",
amount: "300.00",
tax: "20.00",
total: "320.00"
}, {
id: "6",
invdate: "2007-09-06",
name: "test3",
note: "note3",
amount: "400.00",
tax: "30.00",
total: "430.00"
}, {
id: "7",
invdate: "2007-10-04",
name: "test",
note: "note",
amount: "200.00",
tax: "10.00",
total: "210.00"
}, {
id: "8",
invdate: "2007-10-03",
name: "test2",
note: "note2",
amount: "300.00",
tax: "20.00",
total: "320.00"
}, {
id: "9",
invdate: "2007-09-01",
name: "test3",
note: "note3",
amount: "400.00",
tax: "30.00",
total: "430.00"
}];
for (var i = 0; i <= mydata.length; i++) jQuery("#list4").jqGrid('addRowData', i + 1, mydata[i]);
});
</script>
</body>
</html>
