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的数据开始，然后随着您设置的元素更改用户首选项的更改。