jqGrid自定義網格過濾器重新加載

Question

我正在使用jqGrid通過JSON數據在MySQL中維護數據庫。我想有一個過濾器重新加載網格 - 無效行與活動行。在我的數據網址php文件中，我連接到我的數據庫併爲其提供初始查詢，因此我只拖動列的位置，因此網格中已有的所有數據都是活動記錄。所以做一個搜索過濾器不會是解決方案，因爲它不會找到任何記錄，其中avail_ind = 'N'。

我發現奧列格的demo類似於我在找的東西。我不需要他演示的垂直標題，但主要是包含複選框以過濾網格數據的「訂單狀態」框。

我主要關注的是，因爲我最初在網格中提取活動記錄，我如何向網格提供參數，其中avail_ind ='N'或'Y'顯示網格中所有可能的記錄，並以某種方式鏈接複選框或單選按鈕來選擇用戶想要查看哪種記錄。

謝謝你的幫助。

---

UPDATE

的jqGrid HTML/JavaScript代碼： 所有代碼不包括爲了簡潔

jQuery(document).ready(function(){ 
     jQuery("#grid").jqGrid("initFontAwesome").jqGrid({ 
      pager:'#gridpager', 
      url:'getDivisions.php', 
      datatype: "json", 
      mtype: 'GET', 
      height: 300, 
      width: 1000, 
      showerrors:true, 
      debug:true, 

      colNames:['Div', 'L1L2', 'L2', 'L1L3', 'L2L3', 'Exec Begin', 'Exec End', 'CSA', 'Area Id','Short Desc','Enabled'], 
      colModel:[ 
        {name:'div_id', 
         index:'div_id', 
         width:30, 
         editable:true, 
         sortable:false, 
         resizable:false, 
         align:"center", 
         editoptions:{size:2,maxlength:2}, 
         editrules:{required:true,number:true}, 
         formoptions:{elmprefix:"(*)"} 
        }, 

        {name:'l1l2_id', 
         index:'l1l2_id', 
         width:30, 
         editable:true, 
         resizable:false, 
         sortable:false, 
         //formatter: nullFormatter, 
         editoptions:{size:4,maxlength:4}, 
         editrules:{required:true,number:true}, 
         formoptions:{elmprefix:"(*)"} 

        }, 

        {name:'l2_id', 
         index:'l2_id', 
         width:30, 
         editable:true, 
         resizable:false, 
         sortable:false, 
         align:"center", 
         editoptions:{size:2,maxlength:2}, 
         editrules:{required:true,number:true}, 
         formoptions:{elmprefix:"(*)"} 
        }, 
        {name:'l1l3_id', 
         index:'l1l3_id', 
         width:30, 
         editable:true, 
         resizable:false, 
         sortable:false, 
         editoptions:{size:5,maxlength:6,readonly:'readonly'}, 
         editrules:{number:true} 

        }, 
        {name:'l2l3_id', 
         index:'l2l3_id', 
         width:30, 
         editable:true, 
         resizable:false, 
         sortable:false, 
         editoptions:{size:5,maxlength:4,readonly:'readonly'}, 
         editrules:{number:true} 
        }, 
        {name:'exec_beg', 
         index:'exec_beg', 
         width:60, 
         editable:true, 
         resizable:false, 
         sortable:false, 
         editoptions:{size:10,maxlength:8,readonly:'readonly'}, 
         editrules:{number:true} 
        }, 
        {name:'exec_end', 
         index:'exec_end', 
         width:50, 
         editable:true, 
         resizable:false, 
         sortable:false, 
         editoptions:{size:10,maxlength:8,readonly:'readonly'}, 
         editrules:{number:true} 
        }, 
        {name:'csa_id', 
         index:'csa_id', 
         width:35, 
         editable:true, 
         resizable:false, 
         sortable:false, 
         editoptions:{size:5,maxlength:5}, 
         editrules:{required:true}, 
         formoptions:{elmprefix:"(*)"} 
        }, 
        {name:'area_id', 
         index:'area_id', 
         width:40, 
         editable:true, 
         resizable:false, 
         sortable:false, 
         align:"center", 
         editoptions:{size:2,maxlength:2}, 
         editrules:{number:true}, 
         formoptions:{elmprefix:"(*)"} 
        }, 
        {name:'short_desc', 
         index:'short_desc', 
         width:60, 
         editable:true, 
         resizable:false, 
         sortable:false, 
         editoptions:{size:7,maxlength:10}, 
         editrules:{required:true}, 
         formoptions:{elmprefix:"(*)"} 
        }, 
        {name:'avail_ind', 
         index:'avail_ind', 
         width:40, 
         editable:true, 
         resizable:false, 
         sortable:false, 
         align:"center", 
         edittype:"select", 
         editoptions:{value:"Y:Y;N:N"}} 
        ], 

      viewrecords: true, 
      sortorder: "asc", 
      sortname: "div_id", 
      caption:"Division Codes", 
      editurl:'editdivisions.php', 
      toppager:true, 
      recordtext:'', 
      hidegrid:false, 
      scroll:true, 
      rowNum:"10000" 

    }); //jQuery("#grid").jqGrid 

GetDivisions.php代碼：檢索數據加載網格

<?php 
    $dbhost = "localhost"; 
    $dbuser = "root"; 
    $dbpass = "*********"; 
    $dbname = "CodeTable"; 


    $page = $_GET['page']; // get the requested page 
    $limit = $_GET['rows']; // get how many rows we want to have into the grid 
    $sidx = $_GET['sidx']; // get index row - i.e. user click to sort 
    $sord = $_GET['sord']; // get the direction 

    if(!$sidx) $sidx =1; 

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

    mysql_select_db($dbname) or die("Error conecting to db."); 
    $result = mysql_query('SELECT div_id, l1l2_id, l2_id, l1l3_id, l2l3_id, exec_beg, exec_end, csa_id, area_id, short_desc, avail_ind FROM divcodes where div_id <> " " and avail_ind = "Y" and active_ind="Y"'); 
    $row = mysql_fetch_array($result,MYSQL_ASSOC); 
    $count = $row['count']; 

    if($count >0) 
    { 
     $total_pages = cell($count/$limit); 
    } 
    else 
    { 
      $total_pages = 0; 
    } 

    if ($page > $total_pages) $page=$total_pages; 
    $start = $limit*$page - $limit; // do not put $limit*($page - 1) 
    $SQL = 'SELECT div_id, l1l2_id, l2_id, l1l3_id, l2l3_id, exec_beg, exec_end, csa_id, area_id, short_desc, avail_ind FROM divcodes where div_id <> " " and avail_ind = "Y" and active_ind="Y"'; 
    $result = mysql_query($SQL) or die("Couldn t execute query.".mysql_error()); 

    $response->page = $page; 
    $response->total = $total_pages; 
    $response->records = $count; 

    $i=0; 
    while($row = mysql_fetch_array($result,MYSQL_ASSOC)) { 
     $response->rows[$i]['id']=$row[div_id]; 
     $response->rows[$i]['cell']=array($row[div_id],$row[l1l2_id],$row[l2_id],$row[l1l2_id],$row[l2l3_id],$row[exec_beg],$row[exec_end],$row[csa_id],$row[area_id],$row[short_desc],$row[avail_ind]); 
     $i++; 
    }   
    echo json_encode($response); 

    ?> 

Answer 1

我會建議你不要在你的數據上硬編碼你的服務器端查詢，而是讓jqGrid告訴你的服務器它在找什麼。

這可以通過設置一個單選按鈕元素或複選框等作爲網頁的一部分來實現。然後在頁面加載時，可以幫助形成jqGrid發出的請求，然後在您設置的元素更改狀態時重新發送。

例：

element.ChangeEvent()(function() { 
    var grid = $('#gridName'); 

grid.jqGrid('setGridParam', { search: false }); 
var postData = grid.jqGrid('getGridParam', 'postData'); 
    $.extend(postData, { filters: "" }); 

var f = { groupOp: "AND", rules: [] }; 

    f.rules.push({ field: "avail_ind", op: "eq", data: $(selectedElementName).val() }); 
    grid.jqGrid('setGridParam', { search: true }); 
} 
JSON.stringify(f) : "")} 

             }); 
    grid.jqGrid().trigger('reloadGrid', [{ page: 1}]); 

}); 

作爲其中的一部分，當你最初建立的jqGrid您正在設置search: true和過濾器爲網格設置的一部分，所以它顯示了acurate的數據開始，然後隨着您設置的元素更改用戶首選項的更改。