使用 JQuery Mobile 我想弹出一个对话框，用户可以在其中输入搜索过滤器，然后当他们提交查询时，在模态窗口中显示 jqmobile 网格（trirand）。这可能吗。下面是我的代码：
qr.php
<?php require_once '../auth.php'; require_once '../jqSuitePHP/jq-config.php'; // include the PDO driver class require_once '../../jqSuitePHP/php/jqGridPdo.php'; // Connection to the server $conn = new PDO(DB_DSN,DB_USER,DB_PASSWORD); // Tell the db that we use utf-8 $conn->query("SET NAMES utf8"); if(isset($_REQUEST['a'])) { //get asset information $conn = new PDO(DB_DSN,DB_USER,DB_PASSWORD); $sql = "SELECT asset_no, dept_id as dept, short_desc, `LOTO #` as loto FROM mfg_eng_common.machine WHERE asset_no ='".$_REQUEST['a']."'"; $result = $conn->query($sql); $row = $result->fetch(PDO::FETCH_ASSOC); //check to see if active work order exists in MWO system for current asset //status_id of 50 mean Approved/Closed $sql = "SELECT count(*) woCnt FROM mfg_eng_mwo.mwo WHERE asset_id ='".$_REQUEST['a']."' AND status_id != 50"; $result = $conn->query($sql); $woCnt = $result->fetch(PDO::FETCH_ASSOC); } else { header("Location: http://rworley-laptop.dayton-phoenix.com/dpg/mwo/forms/MWO.php"); } ?> <!DOCTYPE HTML> <html lang="en-US"> <head> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" /> <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> <script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script> <script type="text/javascript"> function getWOCnt() { var cntval = <?php echo $woCnt['woCnt'];?>; if(cntval > 0) { if (confirm(" There are already active work order(s) for asset <?php echo $_REQUEST['a']?>. \n To see active work orders:\n Click Cancel and then click 'Update Work Orders'. \n\n To enter a new work order for asset <?php echo $_REQUEST['a']?> \n Click OK .")) { window.open("../forms/MWO.php?a=<?php echo $_REQUEST['a']?>", "new"); /* $(function () { $("#newMWO").on('click', (function (event) { event.preventDefault(); var loadVars=(encodeURI("../forms/MWO.php?a=<?php echo $_REQUEST['a']?>")); var dialogName= $("#mwoForm").load(loadVars); $(dialogName).dialog({ autoOpen: false, resizable: true, modal: true, bigframe: true, height: 600, width: 1000, overflow: scroll, resizable: true, title: "MWO New Work Order" }); dialogName.dialog('open'); return false; })); }); */ } } else { window.open("../forms/MWO.php?a=<?php echo $_REQUEST['a']?>", "new"); /* $(function () { $("#newMWO").on('click', (function (event) { event.preventDefault(); var loadVars=(encodeURI("../forms/MWO.php?a=<?php echo $_REQUEST['a']?>")); var dialogName= $("#mwoForm").load(loadVars); $(dialogName).dialog({ autoOpen: false, resizable: true, modal: true, bigframe: true, height: 600, width: 1000, overflow: scroll, resizable: true, title: "MWO New Work Order" }); dialogName.dialog('open'); return false; })); }); */ } }; </script> </head> <body> <div data-role="page" data-theme="b" align="center"> <div data-theme="a" data-role="header"> <h1>Maintenance Work Orders</h1> <img alt="<?php echo $_REQUEST['a']?>" src="../../Machine Pictures/<?php echo $row['dept']?>/<?php echo $row['asset_no']?>.jpg" height="240" width="300"/> <b><br><?php echo $row['short_desc']?></b> </div><!-- /header --> <br> <div data-theme="c" data-content-theme="d" > <hr> <a href="../../PMProcedures/<?php echo $_REQUEST['a']?>.pdf" target="_blank"><?php echo "PM Procedure" ?></a> <b>|</b> <a href="../../loto/<?php echo $row['loto']?>.pdf" target="_blank"><?php echo "Loto Procedure" ?></a> </div> <div data-role="collapsible-set" data-theme="b" data-content-theme="d" > <ul data-role="listview" data-inset="true" align="center" data-filter="false" data-theme="b"> <li> <a id="newMWO" name="newMWO" data-role="button" data-inline="true" target="_blank" onclick=getWOCnt() > New Work Order </a> </li> </ul> <ul data-role="listview" data-inset="true" align="center" data-filter="false" data-theme="b"> <li> <a href="updateWork.php?a=<?php echo $_REQUEST['a']?>" data-role="button" data-inline="true" data-rel="dialog" data-transition="slidedown"> Update Work Order </a> </li> </ul> <ul data-role="listview" data-inset="true" align="center" data-filter="false" data-theme="b"> <li> <a href="../../mwo/MWO_mobile.php?a=<?php echo $_REQUEST['a']?>" data-role="button" data-inline="true" data-rel="dialog" target="mwoSearch" data-transition="slidedown" > Search Work Orders </a> </li> </ul> </div> <?php if(!($_POST)) { echo " <a href='#popupBasic' data-rel='popup' data-role='button' data-inline='true'>Quick Search</a> <div data-role='popup' id='popupBasic' data-transition='flip' > <a href='#' data-rel='back' data-role='button' data-theme='a' data-icon='delete' data-iconpos='notext' class='ui-btn-right'>Close</a> <form action='#' method='POST'> <div data-theme='a' data-role='header'> <h2>Look Up MWO</h2> </div> <p> Problem<textarea name='search_prob' data-theme = 'a' data-content-theme = 'd' rows = '3' cols = '50' id = 'search_prob' /></textarea> </p> <p> Solution<textarea name='search_sol' data-theme = 'a' data-content-theme = 'd' rows = '3' cols = '50' id = 'search_sol' /></textarea> </p> <p id = 'submit-area'> <input type='submit' data-theme='b' value='Search' id = 'sub1'/> </p> </form> </div> "; } else { echo " <ul data-role='listview' data-inset='true' align='center' data-filter='false' data-theme='b'> <li> <a href=\"QS.php?a=".$_REQUEST['a']."\" data-role='button' data-inline='true' data-rel='dialog' data-transition='slidedown'> Qucick Search Results </a> </li> </ul>"; } ?> <div data-role="footer" data-theme="a"> <h4>Dayton-Phoenix Group, Inc.</h4> </div><!-- footer --> </div><!-- page --> </body> </html>
QS.php
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>MWO Quick Search</title>
<link rel="stylesheet" href="../../jquerymobile.jqGrid/css/themes/default/jquery.mobile.css" />
<link rel="stylesheet" href="../../jquerymobile.jqGrid/css/themes/ui.jqgridmobile.css" />
<link rel="stylesheet" href="../../jquerymobile.jqGrid/css/themes/shCoreEclipse.css" />
<link rel="stylesheet" href="../../jquerymobile.jqGrid/css/themes/shThemeEclipse.css" />
<script src="../../jquerymobile.jqGrid/js/jquery.js" type="text/javascript"></script>
<script src="../../jquerymobile.jqGrid/js/jquerymobile.jqGrid.min.js" type="text/javascript"></script>
<script src="../../jquerymobile.jqGrid/js/jquery.mobile.js" type="text/javascript"></script>
<script src="../../jquerymobile.jqGrid/js/grid.locale-en.js" type="text/javascript"></script>
</head>
<body>
<a href="quickSearch2.php?a=<?php echo $_REQUEST['a'];?>&search_prob=<?php echo $_REQUEST['search_prob']; ?>">Paging, sorting and searching</a>
</body>
</html>
快速搜索2.php
<!DOCTYPE html>
<html>
<body>
<div id="page" data-role="page" data-theme="b">
<div data-role="header" data-theme="b" style="margin-bottom: 10px">
<h1> MWO Quick Search Results</h1>
<a href="../indexhtml.html" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
</div>
<!-- HTML table Definition -->
<table id='grid'></table>
<div id='pager'></div>
<!-- Java Scruipt Code -->
<script type='text/javascript'>
var a = <?php echo json_encode($_REQUEST['a']); ?>;
var prob = <?php echo json_encode($_REQUEST['search_prob']); ?>;
jQuery('#grid').jqGrid({
"hoverrows":false,
"viewrecords":true,
//"jsonReader":{"repeatitems":false,"subgrid":{"repeatitems":false}},
"gridview":true,
"url":"../../mwo/mobile/quicksearch.php?a=" + a + "&search_prob=" + prob,
"loadonce": true,
"rowNum":10,
"height":200,
"autowidth":true,
"sortname":"mwo_id",
"rowList":[10,30,40],
"datatype":"json",
"colModel":[
{"name":"e", "index":"empty", "sorttype":"int", "hidden":true,"width":50,"editable":true},
{"name":"MWO #", "index":"mwo_id", "sorttype":"int", "key":true,"width":80,"editable":true},
{"name":"DPG #", "index":"asset_id", "sorttype":"string", "width":80, "editable":true},
{"name":"Assigned to", "index":"assigned_id", "sorttype":"string", "width":80, "editable":true},
{"name":"Entered", "index":"entered_time", "sorttype":"datetime", "width":80, "editable":true,"datefmt":"m/d/Y", "searchoptions":{sopt:['eq']}, "formatter":"date","formatoptions":{"srcformat":"Y-m-d H:i:s","newformat":"m/d/Y"}},
{"name":"Problem", "index":"long_desc", "sorttype":"string", "width":80, "editable":true},
{"name":"Solution", "index":"solution", "sorttype":"string", "width":80, "editable":true}
],
"pager":"#pager"
});
</script>
</div>
</body>
</html>
正在使用的json数据：