jquery + jqGrid + json 范例
日期：2014-05-16 浏览次数：20312 次
jquery + jqGrid + json 实例
jqgriddemo.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk">
<title>jQuery jqGrid Demo joyopod</title>
<link rel="stylesheet" type="text/css" media="screen" href="themes/redmond/jquery-ui-1.7.1.custom.css" />
<link rel="stylesheet" type="text/css" media="screen" href="themes/ui.jqgrid.css" />
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/jquery.ui.all.js" type="text/javascript"></script>
<script src="js/i18n/grid.locale-zh_CN.js" type="text/javascript"></script>
<script src="js/jquery.jqGrid.min.js" type="text/javascript"></script>
<!--添加grid.tree.js -->
<script src="js/grid.treegrid.js" type="text/javascript"></script>
<script type="text/javascript" src="json2.js"></script>
</head>
<body>
<div>
</div>
<div class="content">
<table id="list1" cellpadding="0" cellspacing="0"></table>
<div id="pager" class="scroll" style="text-align:center;"></div>
</div>
</body>
</html>
json2.js
$(document).ready(function(){
jQuery("#list1").jqGrid({
treeGrid: true,
treeGridModel: 'adjacency',
ExpandColumn: 'menu',
ExpandColClick: true,
url: 'tree1.json',
datatype: 'json',
colNames: ["menu", "url"],
colModel: [{
name: 'menu',
index: 'menu',
hidden: false,
sortable: false
}, {
name: 'url',
index:'url',
hidden: false
}],
pager: false,
height:'auto',
width:'500',
viewrecords: true,
caption:'LIST'
});
});
tree1.json
{
total:1,
page:1,
records:8,
rows:[
{
id: 1,
cell:[
&nb
jqgriddemo.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk">
<title>jQuery jqGrid Demo joyopod</title>
<link rel="stylesheet" type="text/css" media="screen" href="themes/redmond/jquery-ui-1.7.1.custom.css" />
<link rel="stylesheet" type="text/css" media="screen" href="themes/ui.jqgrid.css" />
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/jquery.ui.all.js" type="text/javascript"></script>
<script src="js/i18n/grid.locale-zh_CN.js" type="text/javascript"></script>
<script src="js/jquery.jqGrid.min.js" type="text/javascript"></script>
<!--添加grid.tree.js -->
<script src="js/grid.treegrid.js" type="text/javascript"></script>
<script type="text/javascript" src="json2.js"></script>
</head>
<body>
<div>
</div>
<div class="content">
<table id="list1" cellpadding="0" cellspacing="0"></table>
<div id="pager" class="scroll" style="text-align:center;"></div>
</div>
</body>
</html>
json2.js
$(document).ready(function(){
jQuery("#list1").jqGrid({
treeGrid: true,
treeGridModel: 'adjacency',
ExpandColumn: 'menu',
ExpandColClick: true,
url: 'tree1.json',
datatype: 'json',
colNames: ["menu", "url"],
colModel: [{
name: 'menu',
index: 'menu',
hidden: false,
sortable: false
}, {
name: 'url',
index:'url',
hidden: false
}],
pager: false,
height:'auto',
width:'500',
viewrecords: true,
caption:'LIST'
});
});
tree1.json
{
total:1,
page:1,
records:8,
rows:[
{
id: 1,
cell:[
&nb
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
