jQGrid - 从Grid1选择行来填充Grid2（MySQL，jQuery，PHP）

时间：2013-08-24 16:51:31

标签： php jquery mysql jqgrid

我正在尝试创建一个填充两个jQGrids的简单页面。

网格1中填充了一些信息。

我希望用户能够在网格1上选择一行，在所选行中找到一个单元格的值，并使用MySQL和网格1中选定的单元格值填充网格2。

我附上了一些我已经缝合在一起的源代码。

我读过的所有东西似乎都引导我走两条路（Ajax和$ _GET）。正如您将在下面的代码中看到的那样，我试图将用户选择的Cell Value传递给process_jobs.php中的MySQL查询，但它似乎无法正常工作。如果我用$myvar传递值，它似乎有效。如果我将$myvar设置为$_GET['invid']，则不会。我觉得我错过了一小块馅饼，但是一个巨大的概念。

包括/ 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;
?>

1 个答案:

答案 0 :(得分：0)

OP解决方案。

我昨天尝试使用$_SESSION，但它似乎对我不起作用。

原来，我使用不正确;）

我将在下面发布更新的代码。我不介意你们有什么建议让这些代码变得更好，因为我总是在努力改进。

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");

session_start();
$myvar = mysql_real_escape_string($_SESSION['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;
?>

的index.php 

<?php require_once 'includes/header.php'; ?>
<body>
    <table>
        <tr>
            <td><table id="list"><tr><td></td></tr></table> 
    <div id="pager"></div></td>
        </tr>
        <?php
    if(isset($_GET['invid'])) {
        echo $_GET['invid'];
        session_start();
        $_SESSION['invid'] = $_GET['invid'];
        echo '<table id="list2"><tr><td></td></tr></table>';
        echo '<div id="pager2">';
        }
    ?>
    </table>
<!--    <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>
相关问题
最新问题