jqGrid - jQuery में डायनामिक टेबल। परिष्कृत खोज

परिचय

मेरी राय में, jqGrid इस समय सबसे सफल और सुविधाजनक jQuery प्लगइन है, AJAX अनुरोधों और PHP के माध्यम से डेटाबेस तालिकाओं के साथ काम कर रहा है (ASP.NET के लिए एक संस्करण भी है)।

मैं इस लेख में सभी विवरणों को छोड़ दूंगा, केवल आपका ध्यान इस सवाल पर केंद्रित होगा कि इस प्लगइन का उपयोग करके जटिल तालिका खोज कैसे करें।

शुरू करने के लिए, मैं आपको परिचित होने की सलाह देता हूं:

• यहाँ प्लगइन के साथ ही;
• यहाँ उनके काम के उदाहरणों के साथ;
• "परिचय के लिए jqGrid" लेख के साथ, जो बताता है कि कैसे jqGrid + php + Mysql (या अन्य डेटाबेस) को बांधना है।

इस लेख में क्लॉज का वर्णन नहीं किया जाएगा। यह माना जाता है कि आपने "जिक्रग्रिड का परिचय" लेख पढ़ा और अब आप न केवल परिणामों को क्रमबद्ध करना चाहते हैं और उन्हें पृष्ठों में तोड़ना चाहते हैं, बल्कि तालिका के कई क्षेत्रों में एक साथ जटिल खोज करना चाहते हैं।

कृपया "खोज (4.0) नया" -> "खोज में क्वेरी दिखाएं" नाम के तहत, ऊपर दिए गए लिंक पर स्थित उदाहरण पर विशेष ध्यान दें।

और इसलिए, हमने एक HTML दस्तावेज़ बनाया:

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

जावास्क्रिप्ट कोड जुड़ा:

 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> 

कृपया ध्यान दें कि मैं लाइब्रेरी को एक फ़ाइल या अलग-अलग हिस्सों में कनेक्ट नहीं करता, जैसा कि यह किया जा सकता है, लेकिन फ़ाइल "ग्रिड.लोडर.जेएस" का उपयोग करें, जो प्लगइन की आधिकारिक साइट पर स्रोतों के साथ भी आता है। मैंने इसे थोड़ा बदल दिया और एक संशोधित कोड स्निपेट दिया:

 ... 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 हमें क्या बताता है?
पोस्ट या GET पैरामीटर (jqGrid सेटिंग्स के आधार पर):

1. $ _REQUEST ['_ खोज '] - एक बूलियन मान, यदि खोज शब्द के साथ क्वेरी सही मान स्वीकार करती है;
2. $ _REQUEST [' फ़िल्टर्स '] - एक दृश्य में स्थितियों के साथ एक वस्तु;
3. $ _REQUEST [' searchField '] - खोज करने के लिए फ़ील्ड का नाम (यदि स्थिति सरल है);
4. $ _REQUEST [' खोजकर्ता '] - खोज के लिए फ़ील्ड की तुलना करने का संचालन (यदि स्थिति सरल है);
5. $ _REQUEST [' searchString '] - खोज करने के लिए फ़ील्ड का मान (यदि स्थिति सरल है);

अब, इस डेटा को जानकर, "जहाँ" स्थिति रेखा को उत्पन्न करना और इसे आवश्यक प्रक्रिया से गुजारना आवश्यक है, जो पहले केवल छाँटे गए कॉलम का नाम, क्रम-निर्देश, पृष्ठ संख्या और प्रति पृष्ठ ( पेजिनेशन के लिए ) रिकॉर्ड की संख्या को स्वीकार करता है।

यहां वह कोड है जिसे डेटाबेस में क्वेरी से पहले डाला जाना चाहिए (उदाहरण 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); } 

यहां इस लेख का "दिल" है, डेटाबेस में खोज के लिए शर्तों को उत्पन्न करने का कार्य।

GenerSearchString () फ़ंक्शन:

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

डेटाबेस से पुनर्प्राप्त करने के लिए स्थिति उत्पन्न करने के लिए पुनरावर्ती कार्य उत्पन्न करता है SearchSringStringFromObj () :

  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 ''; //   } 

पुनश्च

इनलाइन खोज फ़ॉर्म:


ध्यान: यह सूत्र इनलाइन खोज के साथ काम नहीं करेगा। इनलाइन खोज में, jqGrid कॉलम नाम और उनके मान क्वेरी पैरामीटर में पास करेगा।

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

इस प्रकार, `आईडी` द्वारा इनलाइन खोज को लागू करने के लिए, यह निम्नलिखित कोड लिखने के लिए पर्याप्त है:

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

कई क्षेत्रों में खोज करने के लिए, "और" द्वारा जुड़े अतिरिक्त तार क्रमशः स्थिति में जोड़े जाएंगे। स्वाभाविक रूप से, समानता के बजाय, आप अपने डेटाबेस के लिए स्वीकार्य किसी भी स्थिति का उपयोग कर सकते हैं।

AJAX अनुरोध हैंडलर के लिए स्रोत फ़ाइल jqGrid से। (टिप्पणियों को ध्यान से पढ़ें, स्क्रिप्ट तभी काम करेगी जब आप डेटाबेस से कनेक्शन को कॉन्फ़िगर करेंगे और मॉड्यूल के लिए मेरी अपील के बजाय डेटाबेस में अपनी क्वेरी दर्ज करेंगे)।