主从表
<!DOCTYPE html>
<html lang="en">
<head>
<!-- The jQuery library is a prerequisite for all jqSuite products -->
<script type="text/ecmascript" src="js/jquery.min.js"></script>
<!-- We support more than 40 localizations -->
<script type="text/ecmascript" src="js/i18n/grid.locale-en.js"></script>
<!-- This is the Javascript file of jqGrid -->
<script type="text/ecmascript" src="js/jquery.jqGrid.min.js"></script>
<!-- A link to a Boostrap and jqGrid Bootstrap CSS siles-->
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" media="screen" href="css/ui.jqgrid-bootstrap.css"/>
<script>
$.jgrid.defaults.width = 780;
$.jgrid.defaults.responsive = true;
$.jgrid.defaults.styleUI = 'Bootstrap';
</script>
<script src="js/bootstrap3.3.4.min.js"></script>
<script type="text/ecmascript" src="js/bootstrap-datepicker.js"></script>
<script type="text/ecmascript" src="js/bootstrap3-typeahead.js"></script>
<link rel="stylesheet" type="text/css" media="screen" href="css/bootstrap-datepicker.css"/>
<meta charset="utf-8"/>
<title>jqGrid Loading Data - Inline - Edit Controls</title>
</head>
<body>
<table id="list10"></table>
<div id="pager10"></div>
<br /> Invoice Detail
<table id="list10_d"></table>
<div id="pager10_d"></div>
<a href="javascript:void(0)" id="ms1">Get Selected id's</a>
<script type="text/javascript">
$(function(){
pageInit();
});
function pageInit(){
jQuery("#list10").jqGrid(
{
url : 'ajax.php',
datatype : "json",
editurl:'ajax.php', //定义对form编辑时的url
colNames : [ 'Inv No', 'ShipName', 'Client', 'Amount','Tax', 'Total', 'Notes' ],
colModel : [
{name : 'OrderID',index : 'OrderID',width : 55, editable: true},
{name : 'OrderDate',index : 'OrderDate',width : 90, editable: true},
{name : 'name',index : 'name',width : 100, editable: true},
{name : 'amount',index : 'amount',width : 80,align : "right", editable: true},
{name : 'tax',index : 'tax',width : 80,align : "right", editable: true},
{name : 'total',index : 'total',width : 80,align : "right", editable: true},
{name : 'note',index : 'note', width : 150,sortable : false, editable: true}
],
rowNum : 10,
rowList : [ 10, 20, 30 ],
pager : '#pager10',
sortname : 'id',
viewrecords : true,
sortorder : "desc",
multiselect : false,
caption : "Invoice Header",
onSelectRow : function(ids) { //当选择行时触发此事件。rowid：当前行id；status：选择状态，当multiselect 为true时此参数才可用
if (ids == null) {
ids = 0;
if (jQuery("#list10_d").jqGrid('getGridParam', 'records') > 0) { // 返回请求的参数信息
jQuery("#list10_d").jqGrid(
'setGridParam', //设置grid的参数。有些参数的修改必须要重新加载grid才可以生效，这个方法可以覆盖事件
{
url : "ajax.php?q=1&id="
+ ids,
page : 1
});
jQuery("#list10_d").jqGrid('setCaption',
"Invoice Detail: " + ids).trigger( 'reloadGrid'); // 重新加载当前表格，也会向服务器发起新的请求
}
} else {
jQuery("#list10_d").jqGrid('setGridParam', {
url :"ajax.php?q=1&id=" + ids,
page : 1
});
jQuery("#list10_d").jqGrid('setCaption',
"Invoice Detail: " + ids).trigger(
'reloadGrid');
}
}
});
jQuery("#list10").jqGrid('navGrid', '#pager10', {
add : true,
edit : true,
del : true
});
jQuery("#list10_d").jqGrid({
height : 100,
url : 'ajax.php',
datatype : "json",
// 列显示名称，是一个数组对象
colNames : [ 'CustomerID', 'ShipName', 'Qty', 'Unit', 'Line Total' ],
colModel : [
{name : 'CustomerID',index : 'CustomerID',width : 55},
{name : 'ShipName',index : 'ShipName',width : 180},
{name : 'qty',index : 'qty',width : 80,align : "right"},
{name : 'unit',index : 'unit',width : 80,align : "right"},
{name : 'linetotal',index : 'linetotal',width : 80,align : "right",sortable : false,search : false}
],
rowNum : 5, //在grid上显示记录条数，这个参数是要被传递到后台
rowList : [ 5, 10, 20 ], // 一个下拉选择框，用来改变显示记录数，当选择时会覆盖rowNum参数传递到后台
pager : '#pager10_d', // 定义翻页用的导航栏，必须是有效的html元素。翻页工具栏可以放置在html页面任意位置
sortname : 'item', // 默认的排序列。可以是列名称或者是一个数字，这个参数会被提交到后台
viewrecords : true, // 定义是否要显示总记录数
sortorder : "asc", // 排序顺序，升序或者降序（asc or desc）
multiselect : true, // 定义是否可以多选
caption : "Invoice Detail" // 表格名称
}).navGrid('#pager10_d', {
add : false,
edit : false,
del : false
});
jQuery("#ms1").click(function() {
var s;
s = jQuery("#list10_d").jqGrid('getGridParam', 'selarrrow');
alert(s);
});
}
</script>
</body>
</html>
ps2:
一个页面有 2个 table 一个为主table 而一个为明细table 那么 我们要做的就是 单击 主table 的某一行，明细table 的内容就显示出来。
方法如下:
需要用到事件
onSelectRow: function(id){
if( id!=null){
$("#list2").jqGrid('setGridParam',{url:'servlet/SampleReceiveDetail?sampleReceiveNo='+id+''}).trigger("reloadGrid");
$("#list2").jqGrid('setGridParam',{editurl:"servlet/SampleReceiveDetailUpdate?sampleReceiveNo="+id});
}
}
这是一个选择行的事件，触发这个事件的时候同时设置好 明细table 的 url 和editurl 就行了 同时别忘了去触发
trigger("reloadGrid");
//默认值设置(间隔明暗)
<!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" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><title>My First Grid</title>
<link rel="stylesheet" type="text/css" media="screen" href="css/ui-lightness/jquery-ui-1.7.1.custom.css" /><link rel="stylesheet" type="text/css" media="screen" href="css/ui.jqgrid.css" />
<style>
html, body {
margin: 0;
padding: 0;
font-size: 75%;
}
</style>
<script src="js/jquery-1.3.2.min.js" type="text/javascript"></script><script src="js/i18n/grid.locale-en.js" type="text/javascript"></script><script src="js/jquery.jqGrid.min.js" type="text/javascript"></script>
<script type="text/javascript">
// Here we set the altRows option globally
jQuery.extend(jQuery.jgrid.defaults, { altRows:true });
</script>
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery("#list").jqGrid({
url:'example.php',
再次设置和重新设置
<!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" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><title>My First Grid</title>
<link rel="stylesheet" type="text/css" media="screen" href="css/ui-lightness/jquery-ui-1.7.1.custom.css" /><link rel="stylesheet" type="text/css" media="screen" href="css/ui.jqgrid.css" />
<style>
html, body {
margin: 0;
padding: 0;
font-size: 75%;
}
</style>
<script src="js/jquery-1.3.2.min.js" type="text/javascript"></script><script src="js/i18n/grid.locale-en.js" type="text/javascript"></script><script src="js/jquery.jqGrid.min.js" type="text/javascript"></script>
<script type="text/javascript">
// Here we set the altRows option globallly
jQuery.extend(jQuery.jgrid.defaults, { altRows:true });
</script>
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery("#list").jqGrid({
url:'example.php',
// here we do not want zebra for this grid
altRows: false,
...