JQgrid“搜索大集”演示

时间：2014-09-26 00:23:35

标签： javascript php jquery html jqgrid

这是我第一次实现jqgrid。这也是我第一次尝试让javascript和php一起玩。我们需要一个允许用户搜索100k +记录的表格，因此我尝试创建一个最多显示500条记录的表格。然后，它将允许用户通过搜索栏，复选框和诸如此类的内容来更改视图的内容。我正在尝试复制＆＃34;搜索大集＆＃34;在jqgrid演示网站上的＆＃34; Advanced＆＃34; http://trirand.com/blog/jqgrid/jqgrid.html

我已经取得了一些进展，但我已经达到了完全陷入困境的程度。我不明白为什么我所做的事情不起作用。在我能找到的任何地方都没有任何错误，并且所有内容看起来都是应该按照演示工作。

免责声明：演示代码不是以理想的方式构建的。在提供的javascript文件中，演示php文件中的一些代码无法功能。我担心由于这种设计，我自己的代码重复（代码本身不可能工作）可能有一些新手很难发现的错误。

我的html和php文件包含在下面。在其下面，我还包括来自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);
?>

来自php文件的POST响应（贷记给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]}]}

1 个答案:

答案 0 :(得分：0)

我弄明白了这个问题。 POST响应包含一堆垃圾错误消息。我必须在php.ini中设置以下值：

error_reporting = E_ERROR
相关问题
最新问题