jqGrid-jQueryの動的テーブル。 洗練された検索

はじめに

私の意見では、jqGridは現時点で最も成功した便利なjQueryプラグインであり、AJAXクエリとPHPを介してデータベーステーブルを操作します（ASP.NETのバージョンもあります）。

このプラグインを使用して複雑なテーブル検索を実行する方法の問題にのみ注意を集中しながら、この記事ではすべての詳細を省略します。

最初に、知り合いになることをお勧めします。

• プラグイン自体はここにあります。
• ここで彼の仕事の例で;
• jqGrid + php + Mysql（または他のデータベース）をバインドする方法を説明する記事「Introduction to jqGrid」 。

where句なしでデータを取得する方法については、この記事では説明しません。 「Introduction to jqGrid」という記事を読んで、結果を並べ替えてページに分割するだけでなく、テーブルの複数のフィールドで一度に複雑な検索を行うことを想定しています。

上記のリンクにある「Searching（4.0）new」->「Search query in search」という名前の下にある例に特に注意してください。

そして、HTMLドキュメントを作成しました：

<table id="newapi"></table> <div id="pnewapi"></div> 

接続されたJavaScriptコード：

 jQuery("#grps1").jqGrid({ //     url:'ajax/get.php', //  -    datatype: "json", //  - colNames:['Inv No', 'Date', 'Client', 'Amount','Tax','Total','Notes'], colModel:[ {name:'id', key : true, index:'id', width:55, searchtype:"integer"}, {name:'invdate',index:'invdate', width:90}, {name:'name', index:'name', width:100}, {name:'amount',index:'amount', width:80, align:"right", searchtype:"number"}, {name:'tax',index:'tax', width:80, align:"right", searchtype:"number"}, {name:'total',index:'total', width:80,align:"right", searchtype:"number"}, {name:'note',index:'note', width:150, sortable:false} ], rowNum:10, width:700, rowList:[10,20,30], pager: '#pgrps1', //     sortname: 'invdate', viewrecords: true, sortorder: "desc" }); jQuery("#grps1").jqGrid('navGrid','#pgrps1', //    {edit:false,add:false,del:false}, //    ,    .      : ""  "" {}, //    {}, //    {}, //    { multipleSearch:true, //     multipleGroup:true, //      showQuery: true //    } ); 

必要なスタイルとスクリプトを接続しました（ ここからダウンロードできます ）。

 <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/redmond/jquery-ui.css" rel="stylesheet" type="text/css"/> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script> <link rel="stylesheet" type="text/css" href="css/ui.jqgrid.css"/> <script type="text/javascript" src="src/grid.loader.js"></script> 

ライブラリを1つのファイルまたは個別の部分で接続することはできますが、プラグインの公式サイトにあるソース「grid.loader.js」を使用することに注意してください。 私はそれを少し変更し、修正されたコードスニペットを提供します：

 ... var pathtojsfiles = "src/"; // set include to false if you do not want some modules to be included var modules = [ { include: true, incfile:'i18n/grid.locale-ru.js'}, //       'ru' ... 

このファイルを使用すると、このモジュールのコンポーネントを管理したり、言語を選択したりするのに便利です。

高度な検索

高度な検索フォーム：


今最も甘いもの。 jqGridは検索時に何を伝えますか？
POSTまたはGETパラメーター（jqGrid設定に依存）：

1. $ _REQUEST ['_ search ']-検索語を含むクエリが真の値を受け入れる場合、ブール値。
2. $ _REQUEST [' filters ']-jsonビュー内の条件を持つオブジェクト。
3. $ _REQUEST [' searchField ']-検索するフィールドの名前（条件が単純な場合）;
4. $ _REQUEST [' searchOper ']-検索用のフィールドを比較する操作（条件が単純な場合）。
5. $ _REQUEST [' searchString ']-検索するフィールドの値（条件が単純な場合）;

ここで、このデータがわかったら、「where」条件行を生成して必要なプロシージャに渡す必要があります。これは、以前はソートされた列の名前、ソート方向、ページ番号、およびページごとのレコード数のみを受け入れました（ ページネーションのため）。

データベース内のクエリの前に挿入する必要があるコードは次のとおりです（この例ではPOSTリクエストを使用しています）。

 if($_search){ if (isset($_POST['filters'])) $filters = $_POST['filters'];//    if (isset($_POST['searchField'])) $searchField = $_POST['searchField']; //     () if (isset($_POST['searchOper'])) $searchOper = $_POST['searchOper']; //     () if (isset($_POST['searchString'])) $searchString = $_POST['searchString']; //     () $searchString = generateSearchString($filters, $searchField, $searchOper, $searchString); } 

これがこの記事の「核心」であり、データベース内の検索条件を生成する機能です。

generateSearchString（）関数：

 function generateSearchString($filters, $searchField, $searchOper, $searchString){ $where = ''; if($filters){ $filters = json_decode($filters); $where .= self::generateSearchStringFromObj($filters); } return $where; } 

データベースから取得するための条件を生成する再帰関数generateSearchStringFromObj（） ：

  function generateSearchStringFromObj($filters){ $where = ''; //     if(count($filters)) foreach($filters->rules as $index => $rule){ $rule->data = addslashes($rule->data); $where .= "`".preg_replace('/-|\'|\"/', '', $rule->field)."`"; switch($rule->op){ //          jqGrid case 'eq': $where .= " = '".$rule->data."'"; break; case 'ne': $where .= " != '".$rule->data."'"; break; case 'bw': $where .= " LIKE '".$rule->data."%'"; break; case 'bn': $where .= " NOT LIKE '".$rule->data."%'"; break; case 'ew': $where .= " LIKE '%".$rule->data."'"; break; case 'en': $where .= " NOT LIKE '%".$rule->data."'"; break; case 'cn': $where .= " LIKE '%".$rule->data."%'"; break; case 'nc': $where .= " NOT LIKE '%".$rule->data."%'"; break; case 'nu': $where .= " IS NULL"; break; case 'nn': $where .= " IS NOT NULL"; break; case 'in': $where .= " IN ('".str_replace(",", "','", $rule->data)."')"; break; case 'ni': $where .= " NOT IN ('".str_replace(",", "','", $rule->data)."')"; break; } //   ,      if(count($filters->rules) != ($index + 1)) $where .= " ".addslashes($filters->groupOp)." "; } //     $isSubGroup = false; if(isset($filters->groups)) foreach($filters->groups as $groupFilters){ $groupWhere = self::generateSearchStringFromObj($groupFilters); //     ,    if($groupWhere){ //   ,           //       if(count($filters->rules) or $isSubGroup) $where .= " ".addslashes($filters->groupOp)." "; $where .= $groupWhere; $isSubGroup = true; // , ,        } } if($where) return '('.$where.')'; return ''; //   } 

PS

インライン検索フォーム：


注意：この式はインライン検索では機能しません。 インライン検索では、jqGridは列名とその値をクエリパラメーターに渡します。

 echo $_POST['id']; //  3,         id  3 

したがって、「id」によるインライン検索を実装するには、次のコードを記述するだけで十分です。

 $where = "`id` = " . (int)$_POST['id']; 

複数のフィールドを検索するには、「AND」で接続された追加の文字列がそれぞれ条件に追加されます。 当然、平等の代わりに、データベースに許容される任意の条件を使用できます。

jqGridからのAJAX要求ハンドラーのソースファイル。 （コメントを注意深く読んでください。スクリプトは、データベースへの接続を設定し、モジュールへのアピールではなくデータベースへのクエリを入力した場合にのみ機能します）。