Wie implementiert man die Suche in jQgrid, so dass Benutzer nach <,> oder <=, > = filtern können?

Question

Das jQuery-Gitter hat oben Filteroptionen, wo ich entweder "Text" eingeben oder eine Dropdown-Liste implementieren kann.

Was ich jedoch tun möchte, ist die Suche nach einer int-Spalte wie "tax" mit konfigurierbaren Optionen wie '< 10', wobei sowohl '<' als auch '10' Benutzerparameter sein sollten. Dies wäre eine Art Kundensuche.

Ich bevorzuge diese Suche nicht in einem zusätzlichen Modal, aber als letzter Ausweg ist das auch in Ordnung.

Hier ist was ich bisher habe.

var mydata = [ 
 
     {id:"1",invdate:"2010-05-24",name:"test",note:"note",tax:"10.00",total:"2111.00"} , 
 
     {id:"2",invdate:"2010-05-25",name:"test2",note:"note2",tax:"20.00",total:"320.00"}, 
 
     {id:"3",invdate:"2007-09-01",name:"test3",note:"note3",tax:"30.00",total:"430.00"}, 
 
     {id:"4",invdate:"2007-10-04",name:"blah",note:"stuff",tax:"10.00",total:"210.00"}, 
 
     
 
    ]; 
 
grid = jQuery("#list"); 
 

 
grid.jqGrid({ 
 
    data: mydata, 
 
    datatype: "local", 
 
    height: 150, 
 
    rowNum: 10, 
 
    rowList: [10,20,30], 
 
    colNames:['Inv No','Date', 'Client', 'Amount','Tax','Total','Notes'], 
 
    colModel:[ 
 
      {name:'id',index:'id', width:60, sorttype:"int", search: true}, 
 
      {name:'invdate',index:'invdate', width:90, sorttype:"date", formatter:"date"}, 
 
      {name:'name',index:'name', width:100}, 
 
      {name:'amount',index:'amount', width:80, align:"right",sorttype:"float", formatter:"number"}, 
 
      {name:'tax',index:'tax', width:80, align:"right",sorttype:"float", 
 
     \t \t \t searchoptions: {sopt:['gt']} 
 
      },   
 
      {name:'total',index:'total', width:80,align:"right",sorttype:"float"},   
 
      {name:'note',index:'note', width:150, sortable:false}   
 
     ], 
 
     pager: "#pager", 
 
     viewrecords: true, 
 
     autowidth: true, 
 
     height: 'auto', 
 
     caption: "Test Grid" 
 
}); 
 

 
jQuery("#list").jqGrid('filterToolbar', {stringResult: true, searchOnEnter: false, defaultSearch: "cn" });

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/themes/redmond/jquery-ui.min.css"> 
 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.15.2/css/ui.jqgrid.min.css"> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.15.2/jquery.jqgrid.min.js"></script> 
 
<table id="list"></table> 
 
<div id="pager"></div>

Answer 1

Wenn ich richtig verstehe, was Sie brauchen, sollten Sie searchOperators: true zu den Optionen von filterToolbar hinzuzufügen und mehr zu geben als ein Betrieb in sopt Eigenschaft searchoptions vergleichen. Zum Beispiel

{name: "tax", width: 80, align: "right", sorttype: "float", 
    searchoptions: { 
    sopt: ["le", "lt", "gt", "ge", "eq", "ne"] 
    } 
} 

Siehe https://jsfiddle.net/z6rfw3cp/