javascript — JQgrid & quot; поиск больших наборов & quot; демонстрация
Это моя первая реализация jqgrid. Это также первый раз, когда я пытался заставить javascript и php играть вместе. Нам нужна таблица, которая позволит пользователю выполнять поиск более 100 тыс. Записей, поэтому я пытаюсь создать таблицу, которая отображает не более 500 записей. Затем он позволит пользователю изменять содержимое представления с помощью панелей поиска, флажков и тому подобного. Я пытаюсь продублировать демонстрацию «search big sets», найденную на демонстрационном сайте jqgrid в разделе «Advanced» http://trirand.com/blog/jqgrid/jqgrid.html
Я добился определенного прогресса, но я достиг точки, когда я полностью застрял. Я не понимаю, почему то, что я сделал, не работает. Там нигде нет ошибок, которые я могу найти, и все выглядит так должен работать по демоверсии.
Отказ от ответственности: код для демонстрации не создан … идеальным способом. Часть кода в демонстрационном php-файле не могу Функция предоставляется предоставленный файл JavaScript. Я обеспокоен тем, что из-за этого дизайна мое собственное дублирование кода (код, который сам по себе не может работать), вероятно, содержит ошибки, которые действительно трудно обнаружить новичку.
Мои HTML и PHP файлы включены ниже. Под этим я также включил ответ на сообщение firebug от POST:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" media="screen" href="theme/jquery-ui-1.11.1.custom/jquery-ui.css" />
<link rel="stylesheet" type="text/css" media="screen" href="src/css/ui.jqgrid.css" />
<link rel="stylesheet" type="text/css" media="screen" href="plugins/ui.multiselect.css" />
<!-- The actual JQuery code -->
<script type="text/javascript" src="js/jquery-1.11.0.min.js" ></script>
<!-- The JQuery UI code -->
<script type="text/javascript" src="theme/jquery-ui-1.11.1.custom/jquery-ui.min.js" ></script>
<!-- The jqGrid language file code-->
<script src="src/grid.locale-en.js" type="text/javascript"></script>
<!-- The atual jqGrid code -->
<script src="src/jquery.jqGrid.js" type="text/javascript"></script>
<script src="plugins/ui.multiselect.js" type="text/javascript"></script>
<script src="src/jquery.jqGrid.js" type="text/javascript"></script>
<script src="plugins/jquery.tablednd.js" type="text/javascript"></script>
<script src="plugins/jquery.contextmenu.js" type="text/javascript"></script>
<script type="text/javascript">
$.jgrid.no_legacy_api = true;
$.jgrid.useJSON = true;
</script>
</head>
<body>
<div class="h">Search By:</div>
<div>
<input type="checkbox" id="autosearch" onclick="enableAutosubmit(this.checked)"> Enable Autosearch <br/>
Code<br />
<input type="text" id="search_cd" onkeydown="doSearch(arguments[0]||event)" />
</div>
<div>
Name<br>
<input type="text" id="item" onkeydown="doSearch(arguments[0]||event)" />
<button onclick="gridReload()" id="submitButton" style="margin-left:30px;">Search</button>
</div>
<br />
<table id="bigset"></table>
<div id="pagerb" ></div>
<script type="text/javascript">
jQuery("#bigset").jqGrid({
url:'http://localhost/DataGrid/ReviewRetrieval.php',
datatype: "json",
height: 255,
width: 600,
colNames:['ProductId','Date', 'Rating'],
colModel:[
{name:'productId',index:'productId', width:65, sorttype:'string', searchoptions:{sopt:['eq','ne','le','lt','gt','ge']}},
{name:'reviewCreated',index:'reviewCreated', width:150, sorttype:'string', searchoptions:{sopt:['eq','bw','bn','cn','nc','ew','en']}},
{name:'starValue',index:'starValue', width:100}
],
rowNum:12,
// rowList:[10,20,30],
mtype: "POST",
pager: jQuery('#pagerb'),
pgbuttons: false,
pgtext: false,
pginput:false,
sortname: 'productId',
viewrecords: true,
sortorder: "asc",
caption: "Reviews"});
jQuery("#bigset").jqGrid('filterToolbar',{searchOperators : true});
var timeoutHnd;
var flAuto = false;
function doSearch(ev){
if(!flAuto)
return;
// var elem = ev.target||ev.srcElement;
if(timeoutHnd)
clearTimeout(timeoutHnd)
timeoutHnd = setTimeout(gridReload,500)
}
function gridReload(){
var nm_mask = jQuery("#item_nm").val();
var cd_mask = jQuery("#search_cd").val();
jQuery("#bigset").jqGrid('setGridParam',{url:"http://localhost/DataGrid/ReviewRetrieval.php?nm_mask="+nm_mask+"&cd_mask="+cd_mask,page:1}).trigger("reloadGrid");
}
function enableAutosubmit(state){
flAuto = state;
jQuery("#submitButton").attr("disabled",state);
}
</script>
</body>
</html>
PHP:
<?php
//error_reporting(E_ALL);
//ini_set('display_errors', 1);
$page = !empty($_GET['page']) ? $_GET['page'] : 1;// get the requested page
$limit = 500;// get how many rows we want to have into the grid
$sidx = !empty($_GET['sidx']) ? $_GET['sidx'] : 1;// get index row - i.e. user click to sort
$sord = !empty($_GET['sord']) ? $_GET['sord'] : "DESC"; // get the direction
if(!$sidx) $sidx =1;if(isset($_GET["nm_mask"]))
$nm_mask = $_GET['nm_mask'];
else
$nm_mask = "";
if(isset($_GET["cd_mask"]))
$cd_mask = $_GET['cd_mask'];
else
$cd_mask = "";
//construct where clause
$where = "WHERE 1=1";
if($nm_mask!='')
$where.= " AND starValue LIKE '$nm_mask%'";
if($cd_mask!='')
$where.= " AND reviewCreated LIKE '$cd_mask%'";
// connect to the database
$db = mysql_pconnect(host,user,pass)
or die("Connection Error: " . mysql_error());
mysql_select_db("products") or die("Error conecting to db.");
$result = mysql_query("SELECT COUNT(*) AS count FROM products.Reviews ".$where);
$row = mysql_fetch_array($result,MYSQL_ASSOC);
$count = $row['count'];
if( $count >0 ) {
$total_pages = ceil($count/$limit);
} else {
$total_pages = 0;
}
if ($page > $total_pages) $page=$total_pages;
if ($limit<0) $limit = 0;
$start = $limit*$page - $limit; // do not put $limit*($page - 1)
if ($start<0) $start = 0;
$SQL = "SELECT productId, starValue, reviewCreated FROM products.Reviews ".$where." ORDER BY $sidx $sord LIMIT $start , $limit";
$result = mysql_query( $SQL ) or die("Couldn?t execute query.".mysql_error());
$responce->page = $page;
$responce->total = $total_pages;
$responce->records = $count;
$i=0;
while($row = mysql_fetch_array($result,MYSQL_ASSOC)) {
$responce->rows[$i]['id']=$row["productId"];
$responce->rows[$i]['cell']=array($row["productId"],$row["starValue"],$row["reviewCreated"]);
$i++;
}
echo json_encode($responce);
mysql_close($db);
?>
Ответ POST из php-файла (кредит на firebug) Обратите внимание, что я удалил несколько продуктов из json, чтобы сэкономить место в этом посте:
POST http://localhost/DataGrid/ReviewRetrieval.php
200 OK
130ms
jquery-....min.js (line 4)
HeadersPostResponseHTML
<br />
<font size='1'><table class='xdebug-error xe-deprecated' dir='ltr' border='1' cellspacing='0' cellpadding='1'>
<tr><th align='left' bgcolor='#f57900' colspan="5"><span style='background-color: #cc0000; color: #fce94f; font-size: x-large;'>( ! )</span> Deprecated: mysql_pconnect(): The mysql extension is deprecated and will be removed in the future: use mysqli or PDO instead in C:\wamp\www\DataGrid\ReviewRetrieval.php on line <i>27</i></th></tr>
<tr><th align='left' bgcolor='#e9b96e' colspan='5'>Call Stack</th></tr>
<tr><th align='center' bgcolor='#eeeeec'>#</th><th align='left' bgcolor='#eeeeec'>Time</th><th align='left' bgcolor='#eeeeec'>Memory</th><th align='left' bgcolor='#eeeeec'>Function</th><th align='left' bgcolor='#eeeeec'>Location</th></tr>
<tr><td bgcolor='#eeeeec' align='center'>1</td><td bgcolor='#eeeeec' align='center'>0.0000</td><td bgcolor='#eeeeec' align='right'>259552</td><td bgcolor='#eeeeec'>{main}( )</td><td title='C:\wamp\www\DataGrid\ReviewRetrieval.php' bgcolor='#eeeeec'>..\ReviewRetrieval.php<b>:</b>0</td></tr>
<tr><td bgcolor='#eeeeec' align='center'>2</td><td bgcolor='#eeeeec' align='center'>0.0000</td><td bgcolor='#eeeeec' align='right'>260936</td><td bgcolor='#eeeeec'><a href='http://www.php.net/function.mysql-pconnect' target='_new'>mysql_pconnect</a>
( )</td><td title='C:\wamp\www\DataGrid\ReviewRetrieval.php' bgcolor='#eeeeec'>..\ReviewRetrieval.php<b>:</b>27</td></tr>
</table></font>
<br />
<font size='1'><table class='xdebug-error xe-warning' dir='ltr' border='1' cellspacing='0' cellpadding='1'>
<tr><th align='left' bgcolor='#f57900' colspan="5"><span style='background-color: #cc0000; color: #fce94f; font-size: x-large;'>( ! )</span> Warning: Creating default object from empty value in C:\wamp\www\DataGrid\ReviewRetrieval.php on line <i>47</i></th></tr>
<tr><th align='left' bgcolor='#e9b96e' colspan='5'>Call Stack</th></tr>
<tr><th align='center' bgcolor='#eeeeec'>#</th><th align='left' bgcolor='#eeeeec'>Time</th><th align='left' bgcolor='#eeeeec'>Memory</th><th align='left' bgcolor='#eeeeec'>Function</th><th align='left' bgcolor='#eeeeec'>Location</th></tr>
<tr><td bgcolor='#eeeeec' align='center'>1</td><td bgcolor='#eeeeec' align='center'>0.0000</td><td bgcolor='#eeeeec' align='right'>259552</td><td bgcolor='#eeeeec'>{main}( )</td><td title='C:\wamp\www\DataGrid\ReviewRetrieval.php' bgcolor='#eeeeec'>..\ReviewRetrieval.php<b>:</b>0</td></tr>
</table></font>
{"page":1,"total":203,"records":"101345","rows":[{"id":"10000","cell":["10000","3",null]},{"id":"10000","cell":["10000","2",null]},{"id":"10000","cell":["10000","1",null]},{"id":"10000","cell":["10000","1",null]},{"id":"10000","cell":["10000","5",null]},{"id":"10000","cell":["10000","3",null]},{"id":"10000","cell":["10000","4",null]},{"id":"10000","cell":["10000","5",null]},{"id":"10000","cell":["10000","3",null]},{"id":"10000","cell":["10000","5",null]},{"id":"10000","cell":["10000","1",null]},{"id":"10000","cell":["10000","2",null]},{"id":"10000","cell":["10000","5",null]}]}
Решение
Я понял проблему. Ответ POST содержит кучу нежелательных сообщений об ошибках. Мне пришлось установить следующее значение в php.ini:
error_reporting = E_ERROR
Другие решения
Других решений пока нет …