2 つの jQGrid を設定する単純なページを作成しようとしています。
グリッド 1 にはいくつかの情報が入力されています。
ユーザーがグリッド 1 の行を選択し、選択した行内のセルの値を見つけ、MySQL とグリッド 1 から選択したセル値を使用してグリッド 2 に入力できるようにしたいと考えています。
つなぎ合わせたソースコードをいくつか添付しました。
私が読んできたものはすべて、2 つの道 (Ajax と $_GET) につながっているようです。次のコードでわかるように、ユーザーが選択したセル値を の MySQL クエリに渡そうとしましたが、process_jobs.phpうまくいかないようです。値を渡せば$myvarうまくいくようです。$myvarに設定すると、そうはなりません$_GET['invid']。パイの小さなピースが 1 つ欠けているように感じますが、大きなコンセプトが 1 つあります。
include/header.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.10.3.custom.css" />
<link rel="stylesheet" type="text/css" media="screen" href="css/ui.jqgrid.css" />
<style type="text/css">
html, body {
margin: 0;
padding: 0;
font-size: 75%;
}
</style>
<script src="js/jquery-1.9.0.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>
<?php require 'grids/grid_customers.php';
require 'grids/grid_jobs.php';
?>
<script type='text/javascript'>
function get_cust(){
var grid = jQuery('#list');
var sel_id = grid.jqGrid('getGridParam', 'selrow');
var myCellData = grid.jqGrid('getCell', sel_id, 'invid');
// alert(myCellData);
window.location.href = "index.php?invid=" + myCellData;
}
</script>
</head>
index.php
<?php require_once 'includes/header.php'; ?>
<body>
<table id="list"><tr><td></td></tr></table>
<div id="pager"></div>
<?php
if(isset($_GET['invid'])) {
echo $_GET['invid'];
echo '<table id="list2"><tr><td></td></tr></table>';
echo '<div id="pager2"></div>';
}
?>
<button id="btn_alert" onclick="get_cust()">Clicky</button>
</body>
</html>
グリッド/grid_customers.php
<script type="text/javascript">
$(function() {
$("#list").jqGrid({
url: "process_customers.php",
datatype: "xml",
mtype: "GET",
colNames: ["Inv No", "Date", "Amount", "Tax", "Total", "Notes"],
colModel: [
{name: "invid", width: 55},
{name: "invdate", width: 90},
{name: "amount", width: 80, align: "right"},
{name: "tax", width: 80, align: "right"},
{name: "total", width: 80, align: "right"},
{name: "note", width: 150, sortable: false}
],
pager: "#pager",
rowNum: 10,
rowList: [10, 20, 30],
sortname: "invid",
sortorder: "desc",
viewrecords: true,
gridview: true,
autoencode: true,
caption: "My first grid",
onSelectRow: function get_cust() {
var grid = jQuery('#list');
var sel_id = grid.jqGrid('getGridParam', 'selrow');
var myCellData = grid.jqGrid('getCell', sel_id, 'invid');
window.location.href = "index.php?invid=" + myCellData;
}
});
});
</script>
グリッド/grid_jobs.php
<script type="text/javascript">
$(function() {
$("#list2").jqGrid({
url: "process_jobs.php",
datatype: "xml",
mtype: "GET",
colNames: ["Inv No", "Date", "Amount", "Tax", "Total", "Notes"],
colModel: [
{name: "invid", width: 55},
{name: "invdate", width: 90},
{name: "amount", width: 80, align: "right"},
{name: "tax", width: 80, align: "right"},
{name: "total", width: 80, align: "right"},
{name: "note", width: 150, sortable: false}
],
pager: "#pager2",
rowNum: 10,
rowList: [10, 20, 30],
sortname: "invid",
sortorder: "desc",
viewrecords: true,
gridview: true,
autoencode: true,
caption: "My job grid",
});
});
</script>
process_customers.php
<?php
//include the information needed for the connection to MySQL data base server.
// we store here username, database and password
include("dbconfig.php");
// to the url parameter are added 4 parameters as described in colModel
// we should get these parameters to construct the needed query
// Since we specify in the options of the grid that we will use a GET method
// we should use the appropriate command to obtain the parameters.
// In our case this is $_GET. If we specify that we want to use post
// we should use $_POST. Maybe the better way is to use $_REQUEST, which
// contain both the GET and POST variables. For more information refer to php documentation.
// Get the requested page. By default grid sets this to 1.
$page = $_GET['page'];
// get how many rows we want to have into the grid - rowNum parameter in the grid
$limit = $_GET['rows'];
// get index row - i.e. user click to sort. At first time sortname parameter -
// after that the index from colModel
$sidx = $_GET['sidx'];
// sorting order - at first time sortorder
$sord = $_GET['sord'];
// if we not pass at first time index use the first column for the index or what you want
if(!$sidx) $sidx =1;
// connect to the MySQL database server
$db = mysql_connect($dbhost, $dbuser, $dbpassword) or die("Connection Error: " . mysql_error());
// select the database
mysql_select_db($database) or die("Error connecting to db.");
// calculate the number of rows for the query. We need this for paging the result
$result = mysql_query("SELECT COUNT(*) AS count FROM invheader");
$row = mysql_fetch_array($result,MYSQL_ASSOC);
$count = $row['count'];
// calculate the total pages for the query
if( $count > 0 && $limit > 0) {
$total_pages = ceil($count/$limit);
} else {
$total_pages = 0;
}
// if for some reasons the requested page is greater than the total
// set the requested page to total page
if ($page > $total_pages) $page=$total_pages;
// calculate the starting position of the rows
$start = $limit*$page - $limit;
// if for some reasons start position is negative set it to 0
// typical case is that the user type 0 for the requested page
if($start <0) $start = 0;
// the actual query for the grid data
$SQL = "SELECT invid, invdate, amount, tax, total, note FROM invheader ORDER BY $sidx $sord LIMIT $start , $limit";
$result = mysql_query( $SQL ) or die("Couldn't execute query.".mysql_error());
// we should set the appropriate header information. Do not forget this.
header("Content-type: text/xml;charset=utf-8");
$s = "<?xml version='1.0' encoding='utf-8'?>";
$s .= "<rows>";
$s .= "<page>".$page."</page>";
$s .= "<total>".$total_pages."</total>";
$s .= "<records>".$count."</records>";
// be sure to put text data in CDATA
while($row = mysql_fetch_array($result,MYSQL_ASSOC)) {
$s .= "<row id='". $row['invid']."'>";
$s .= "<cell>". $row['invid']."</cell>";
$s .= "<cell>". $row['invdate']."</cell>";
$s .= "<cell>". $row['amount']."</cell>";
$s .= "<cell>". $row['tax']."</cell>";
$s .= "<cell>". $row['total']."</cell>";
$s .= "<cell><![CDATA[". $row['note']."]]></cell>";
$s .= "</row>";
}
$s .= "</rows>";
echo $s;
?>
process_jobs.php
<?php
//include the information needed for the connection to MySQL data base server.
// we store here username, database and password
include("dbconfig.php");
$myvar = mysql_real_escape_string($_GET['invid']);
//$myvar = '3';
// to the url parameter are added 4 parameters as described in colModel
// we should get these parameters to construct the needed query
// Since we specify in the options of the grid that we will use a GET method
// we should use the appropriate command to obtain the parameters.
// In our case this is $_GET. If we specify that we want to use post
// we should use $_POST. Maybe the better way is to use $_REQUEST, which
// contain both the GET and POST variables. For more information refer to php documentation.
// Get the requested page. By default grid sets this to 1.
$page = $_GET['page'];
// get how many rows we want to have into the grid - rowNum parameter in the grid
$limit = $_GET['rows'];
// get index row - i.e. user click to sort. At first time sortname parameter -
// after that the index from colModel
$sidx = $_GET['sidx'];
// sorting order - at first time sortorder
$sord = $_GET['sord'];
// if we not pass at first time index use the first column for the index or what you want
if(!$sidx) $sidx =1;
// connect to the MySQL database server
$db = mysql_connect($dbhost, $dbuser, $dbpassword) or die("Connection Error: " . mysql_error());
// select the database
mysql_select_db($database) or die("Error connecting to db.");
// calculate the number of rows for the query. We need this for paging the result
$result = mysql_query("SELECT COUNT(*) AS count FROM invheader");
$row = mysql_fetch_array($result,MYSQL_ASSOC);
$count = $row['count'];
// calculate the total pages for the query
if( $count > 0 && $limit > 0) {
$total_pages = ceil($count/$limit);
} else {
$total_pages = 0;
}
// if for some reasons the requested page is greater than the total
// set the requested page to total page
if ($page > $total_pages) $page=$total_pages;
// calculate the starting position of the rows
$start = $limit*$page - $limit;
// if for some reasons start position is negative set it to 0
// typical case is that the user type 0 for the requested page
if($start <0) $start = 0;
// the actual query for the grid data
$SQL = "SELECT invid, invdate, amount, tax, total, note FROM invheader WHERE invid = {$myvar} ORDER BY $sidx $sord LIMIT $start , $limit";
$result = mysql_query( $SQL ) or die("Couldn't execute query.".mysql_error());
// we should set the appropriate header information. Do not forget this.
header("Content-type: text/xml;charset=utf-8");
$s = "<?xml version='1.0' encoding='utf-8'?>";
$s .= "<rows>";
$s .= "<page>".$page."</page>";
$s .= "<total>".$total_pages."</total>";
$s .= "<records>".$count."</records>";
// be sure to put text data in CDATA
while($row = mysql_fetch_array($result,MYSQL_ASSOC)) {
$s .= "<row id='". $row['invid']."'>";
$s .= "<cell>". $row['invid']."</cell>";
$s .= "<cell>". $row['invdate']."</cell>";
$s .= "<cell>". $row['amount']."</cell>";
$s .= "<cell>". $row['tax']."</cell>";
$s .= "<cell>". $row['total']."</cell>";
$s .= "<cell><![CDATA[". $row['note']."]]></cell>";
$s .= "</row>";
}
$s .= "</rows>";
echo $s;
?>