您的位置：首页 > 其它

jqGrid分页技术学习（一）jqGrid环境准备

2011-03-29 06:38 543 查看

从http://www.trirand.com/blog/下载jqGrid和Demo。

使用Eclipse Java EE IDE for Web Developers（伽利略）建立一个Dynamic Web Project。将如下文件拷贝入WebContent下的js和themes目录下：

WebContent
js
i18n
jquery-ui-1.8.2.custom.min.js
jquery.contextmenu.js
jquery.jqGrid.min.js
jquery.layout.js
jquery.min.js
jquery.tablednd.js
tablednd.js
ui.multiselect.js
themes
ellipsis-xbl.xml
jquery.searchFilter.css
redmond
ui.jqgrid.css
ui.multiselect.css

拷贝jqgrid_demo38中的navgrid.html和navgrid.js作为编程的起始基础，navgrid.html做如下修改：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jqGrid Demos</title>
<!-- In head section we should include the style sheet for the grid -->
<link rel="stylesheet" type="text/css" media="screen" href="themes/redmond/jquery-ui-1.8.2.custom.css" mce_href="themes/redmond/jquery-ui-1.8.2.custom.css" />
<link rel="stylesheet" type="text/css" media="screen" href="themes/ui.jqgrid.css" mce_href="themes/ui.jqgrid.css" />
<link rel="stylesheet" type="text/css" media="screen" href="themes/ui.multiselect.css" mce_href="themes/ui.multiselect.css" />
<link rel="stylesheet" type="text/css" media="screen" href="themes/jquery.searchFilter.css" mce_href="themes/jquery.searchFilter.css" />
<mce:style><!--
html, body {
margin: 0;			/* Remove body margin/padding */
padding: 2px;
overflow: hidden;	/* Remove scroll bars on browser window */
font-size: 75%;
}
.ui-layout-west .ui-jqgrid tr.jqgrow td {
height: auto;
white-space: normal !important;
border-bottom: 0px none;
}
.rotate
{
/* for Safari */
-webkit-transform: rotate(-90deg);
/* for Firefox */
-moz-transform: rotate(-90deg);
/* for Internet Explorer */
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
--></mce:style><style mce_bogus="1">    html, body {
margin: 0;			/* Remove body margin/padding */
padding: 2px;
overflow: hidden;	/* Remove scroll bars on browser window */
font-size: 75%;
}
.ui-layout-west .ui-jqgrid tr.jqgrow td {
height: auto;
white-space: normal !important;
border-bottom: 0px none;
}
.rotate
{
/* for Safari */
-webkit-transform: rotate(-90deg);
/* for Firefox */
-moz-transform: rotate(-90deg);
/* for Internet Explorer */
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}</style>
<!-- Of course we should load the jquery library -->
<mce:script src="js/jquery.min.js" mce_src="js/jquery.min.js" type="text/javascript"></mce:script>
<!-- and at end the jqGrid Java Script file -->
<mce:script src="js/jquery-ui-1.8.2.custom.min.js" mce_src="js/jquery-ui-1.8.2.custom.min.js" type="text/javascript"></mce:script>
<mce:script src="js/jquery.layout.js" mce_src="js/jquery.layout.js" type="text/javascript"></mce:script>
<mce:script src="js/i18n/grid.locale-en.js" mce_src="js/i18n/grid.locale-en.js" type="text/javascript"></mce:script>
<mce:script type="text/javascript"><!--
$.jgrid.no_legacy_api = true;
$.jgrid.useJSON = true;

// --></mce:script>
<mce:script src="js/ui.multiselect.js" mce_src="js/ui.multiselect.js" type="text/javascript"></mce:script>
<mce:script src="js/jquery.jqGrid.min.js" mce_src="js/jquery.jqGrid.min.js" type="text/javascript"></mce:script>
<mce:script src="js/jquery.tablednd.js" mce_src="js/jquery.tablednd.js" type="text/javascript"></mce:script>
<mce:script src="js/jquery.contextmenu.js" mce_src="js/jquery.contextmenu.js" type="text/javascript"></mce:script>
<mce:script src="js/src/grid.formedit.js" mce_src="js/src/grid.formedit.js" type="text/javascript"></mce:script>
</head>
<body>
<div style="font-size:12px;" mce_style="font-size:12px;">
This example show navigator.<br/>
See below for all available options. <br/>
Note: The data is not saved to the server<br/>
</div>
<br />
<table id="navgrid"></table>
<div id="pagernav"></div>
<mce:script src="navgrid.js" mce_src="navgrid.js" type="text/javascript"></mce:script>
</body>
</html>

navgrid.js做如下修改：

jQuery("#navgrid").jqGrid({
url: 'paging.go',
datatype: "json",
colNames: ['Inv No','Date', 'Client', 'Amount','Tax','Total','Closed','Ship via','Notes'],
colModel: [
{name:'id',index:'id', width:55,editable:false,editoptions:{readonly:true,size:10}},
{name:'invdate',index:'invdate', width:80,editable:true,editoptions:{size:10}},
{name:'client_id',index:'client_id', width:90,editable:true,editoptions:{size:25}},
{name:'amount',index:'amount', width:60,align:"right",editable:true,editoptions:{size:10}},
{name:'tax',index:'tax', width:60,align:"right",editable:true,editoptions:{size:10}},
{name:'total',index:'total', width:60,align:"right",editable:true,editoptions:{size:10}},
{name:'closed',index:'closed',width:55,align:'center',editable:true,edittype:"checkbox",editoptions:{value:"Yes:No"}},
{name:'ship_via',index:'ship_via',width:70,editable: true,edittype:"select",editoptions:{value:"FE:FedEx;TN:TNT"}},
{name:'note',index:'note', width:100,sortable:false,editable: true,edittype:"textarea", editoptions:{rows:"2",cols:"100"}}
],
rowNum: 10,
rowList: [10,20,30],
pager: '#pagernav',
sortname: 'id',
viewrecords: true,
jsonReader : {
root: "rows",
page: "page",
total: "total",
records: "records",
repeatitems: false,
cell: "cell",
id: "id"
},
sortorder: "desc",
caption:"Navigator Example",
editurl:"paging.go",
height:210
});
jQuery("#navgrid").jqGrid('navGrid','#pagernav',
{view:true}, //options
{
height:280,
jqModal:true,
closeOnEscape:true, // 使用esc键关闭对话框
reloadAfterSubmit:false
}, // edit options
{
recreateForm:true,
height:280,
closeOnEscape:true, // 使用esc键关闭对话框
reloadAfterSubmit:false
}, // add options
{
mtype:"POST",
reloadAfterSubmit:false
}, // del options
{
multipleSearch:true
} // search options
);

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航