2013-03-21 129 views
2

我有一個jgrid設置並正確顯示數據。我添加了filtertoolbox,但是當我輸入一些東西時,網格不顯示任何數據。如果我使用放大鏡進行搜索,一切都按預期工作。jqgrid filtertoolbar不工作,搜索對話框沒有問題

下面是代碼: 的index.html

 <!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" /> 
     <title>blablabla</title> 

     <link rel="stylesheet" type="text/css" media="screen" href="css/jquery-ui-1.10.2.custom.css" /> 
     <link rel="stylesheet" type="text/css" media="screen" href="css/ui.jqgrid.css" /> 
     <?php 
     include("dbconfig.php"); 
     ?> 


     <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> 


     <script type="text/javascript"> 
     $(function(){ 
      $("#list").jqGrid({ 
      url:'example.php', 
      datatype: 'json', 
      colNames:['Edit','ID','Alliance Name','Player', 'Level','Might','City 1','City 2','City 3','City 4','Notes'], 
      colModel :[ 
      {name: 'myac', width:80, fixed:true, sortable:false, resize:false,search:false, formatter:'actions', 
        formatoptions:{keys:true}}, 
       {name:'id', index:'id', width:30,searchoptions: { sopt: ['eq', 'cn']} }, 
       {name:'alliance_name', index:'alliance_name', editable:true, sorttype: 'int' ,sortable:true, search:true,searchoptions: { sopt: ['eq', 'cn']}, stype:'text', width:110}, 
       {name:'player_name', index:'player_name', editable:true, sortable:true,search:true,searchoptions: { sopt: ['eq', 'cn']}, stype:'text', width:80, align:'center'}, 
       {name:'player_lvl', index:'player_lvl', editable:true, sortable:true, search:true,searchoptions: { sopt: ['eq', 'cn']}, stype:'text', width:80, align:'center'}, 
       {name:'player_might', index:'player_might', editable:true, sortable:true,search:true, searchoptions: { sopt: ['eq', 'cn']},stype:'text', width:80, align:'center'}, 
       {name:'city1_coords', index:'city1_coords', editable:true, width:80,search:true,searchoptions: { sopt: ['eq', 'cn']}, stype:'text' ,align:'center'}, 
       {name:'city2_coords', index:'city2_coords',editable:true, width:80,search:true,searchoptions: { sopt: ['eq', 'cn']}, stype:'text', align:'center'}, 
       {name:'city3_coords', index:'city3_coords',editable:true, width:80,search:true,searchoptions: { sopt: ['eq', 'cn']}, stype:'text', align:'center'}, 
       {name:'city4_coords', index:'city4_coords',editable:true, width:80,search:true,searchoptions: { sopt: ['eq', 'cn']}, stype:'text', align:'center'},  
       {name:'notes', index:'notes', width:150, editable:true,search:true, searchoptions: { sopt: ['eq', 'cn']}, stype:'text',sortable:false} 
      ], 


      pager: '#pager', 
      rowNum:30, 
      rowList:[10,20,30,40,50,60,70,100], 
      sortname: 'id', 
      mtype: "GET", 
      sortorder: 'asc', 
      viewrecords: true, 
      ignoreCase:true, 
      gridview: true, 
      subGrid : true, 
      height: "100%", 
      editurl: 'dummy.php', 
      autowidth: true, 
      subGridUrl: 'subgrid.php', 
      subgridtype: "json", 


      autoencode: true, 


     subGridModel: [{ name : ['Wild 1','Wild 2','Wild 3','Wild 4','Wild 5','Wild 6','Wild 7','Wild 8','Wild 9','Wild 10'], 
          width : [120,120,120,120,120,120,120,120,120,120]} 
      ], 
      caption: 'Enemy Coordrinates', 

      repeatitems: false, 
      loadComplete: function(){ $('#list').setGridParam({datatype: 'json'}); 
      jQuery("#list").trigger("reloadGrid"); 
      } 

      }); 
      jQuery("#list").showCol('subgrid'); 
      jQuery("#list").jqGrid('navGrid',"#pager",{edit:false,add:false,del:false,search:true}); 
      jQuery("#list").jqGrid('inlineNav',"#pager"); 
      jQuery("#list").jqGrid('filterToolbar',{stringResult: false, searchOnEnter : false, defaultSearch: 'cn', ignoreCase: true}); 

     }); 


     </script> 

     </head> 
     <body> 
     <table id="list"><tr><td/></tr></table> 
     <div id="pager"></div> 


     </body> 
     </html> 

使用example.php

 <?php 
     //include the information needed for the connection to MySQL data base server. 
     // we store here username, database and password 
     include("dbconfig.php"); 
     //ini_set("display_errors",1); 
     // 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 = $_REQUEST['page']; 
     $limit = $_REQUEST['rows']; 
     $sidx = $_REQUEST['sidx']; 
     $sord = $_REQUEST['sord']; 

     // if we not pass at first time index use the first column for the index or what you want 
     if(!$sidx) $sidx =1; 

     //array to translate the search type 
     $ops = array(
      'eq'=>'=', //equal 
      'ne'=>'<>',//not equal 
      'lt'=>'<', //less than 
      'le'=>'<=',//less than or equal 
      'gt'=>'>', //greater than 
      'ge'=>'>=',//greater than or equal 
      'bw'=>'LIKE', //begins with 
      'bn'=>'NOT LIKE', //doesn't begin with 
      'in'=>'LIKE', //is in 
      'ni'=>'NOT LIKE', //is not in 
      'ew'=>'LIKE', //ends with 
      'en'=>'NOT LIKE', //doesn't end with 
      'cn'=>'LIKE', // contains 
      'nc'=>'NOT LIKE' //doesn't contain 
     ); 
     function getWhereClause($col, $oper, $val){ 
      global $ops; 
      if($oper == 'bw' || $oper == 'bn') $val .= '%'; 
      if($oper == 'ew' || $oper == 'en') $val = '%'.$val; 
      if($oper == 'cn' || $oper == 'nc' || $oper == 'in' || $oper == 'ni') $val = '%'.$val.'%'; 
      return " WHERE $col {$ops[$oper]} '$val' "; 
     } 
     $where = ""; //if there is no search request sent by jqgrid, $where should be empty 
     $searchField = isset($_GET['searchField']) ? $_GET['searchField'] : false; 
     $searchOper = isset($_GET['searchOper']) ? $_GET['searchOper']: false; 
     $searchString = isset($_GET['searchString']) ? $_GET['searchString'] : false; 
     if ($_GET['_search'] == 'true') { 
      $where = getWhereClause($searchField,$searchOper,$searchString); 
     // var_dump($where); 

     } 



     $totalrows = isset($_REQUEST['totalrows']) ? $_REQUEST['totalrows']: false; 
     if($totalrows) { 
      $limit = $totalrows;  
     } 

     // 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."); 
     if ($limit<0) $limit = 0; 
     // calculate the number of rows for the query. We need this for paging the result 
     $result = mysql_query("SELECT COUNT(*) AS count FROM enemy_coords"); 
     $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; 
       $start = $limit*$page - $limit; // do not put $limit*($page - 1) 
       if ($start<0) $start = 0; 

     // if for some reasons start position is negative set it to 0 
     // typical case is that the user type 0 for the requested page 


     // the actual query for the grid data 
     $SQL = "SELECT * FROM enemy_coords ".$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[ID]; 
      $responce->rows[$i]['cell']=array($row[ID],$row[ID],$row[alliance_name],$row[player_name],$row[player_lvl],$row[player_might],$row[city1_coords],$row[city2_coords],$row[city3_coords],$row[city4_coords],$row[notes]); 
      $i++; 
     }   

     echo json_encode($responce); 
     // var_dump($SQL); 
     ?> 

subgrid.php

 <?php 
     include("dbconfig.php"); 
     $id = $_GET['id']; 

     // connect to the database 
     $db = mysql_connect($dbhost, $dbuser, $dbpassword) 
     or die("Connection Error: " . mysql_error()); 

     mysql_select_db($database) or die("Error conecting to db."); 
     $SQL = "SELECT wild1,wild2,wild3,wild4,wild5,wild6,wild7,wild8,wild9,wild10 FROM enemy_coords WHERE id=".$id.""; 
     $result = mysql_query($SQL) or die("Couldnt execute query.".mysql_error()); 

     $i=0; 
     while($row = mysql_fetch_array($result,MYSQL_ASSOC)) { 
      $responce->rows[$i]['id']=$row[num]; 
      $responce->rows[$i]['cell']=array($row[wild1],$row[wild2],$row[wild3],$row[wild4],$row[wild5],$row[wild6],$row[wild7],$row[wild8],$row[wild9],$row[wild10],); 
      $i++; 
     } 
     echo json_encode($responce); 
     ?> 

什麼I M做錯了嗎?我不是一個PHP專家!謝謝!

+0

你在搜索的POST中看到什麼與在過濾器框中鍵入文本有關? – Mark 2013-03-21 12:24:32

回答

1

您使用stringResult: false選項。這意味着數據的另一種格式作爲您當前使用的single field searching的格式。您可以嘗試使用Fiddler或Firebug或IE或Chrome的開發工具來捕捉HTTP流量。你會看到,在stringResult: false選項的情況下jqGrid的形式

key=value 

發送數據凡key就是應用了過濾器的列indexname屬性的值。例如,如果用戶鍵入文本輸入字段超過notes柱大於參數

notes=bla 

「BLA」將在URL找到。你可以使用$_REQUEST['notes']來獲得它。

由於單字段搜索的數據格式不同於stringResult: false的格式,我個人更喜歡使用stringResult: true格式,它與高級搜索的格式相同,請參見the documentation

+0

我已經設置了字符串爲true,但它不會工作!如果我var轉儲SQL查詢where子句是空的,那就是爲什麼我得到空行。我必須添加什麼代碼才能獲取過濾器和輸入類型?我與谷歌奮鬥了4-5小時,但沒有運氣...... – 2013-03-21 13:12:57

+0

@StathisNtonasII:如果設置了'stringResult:true',則jqGrid將過濾器作爲'filters'參數發送到服務器。所以如果你決定使用'stringResult:true',你將不得不重新實現生成'WHERE'部分的服務器代碼。一般來說,使用'stringResult:true'還是'stringResult:false'並不重要。只需編寫與您使用的'stringResult'值相對應的服務器代碼就很重要。 – Oleg 2013-03-21 13:22:32

+0

@StathisNtonasII:或者,如果您在服務器端實施數據過濾*時遇到問題,您可以在客戶端執行此操作。您只需添加jqGrid的'loadonce:true'選項並修改服務器代碼,以便它返回所有數據**而無需分頁。你只需要正確地對數據進行排序。如果你有幾百行,甚至有幾千行,那麼客戶端的實現將會非常好。 – Oleg 2013-03-21 13:26:48