jqLa barra degli strumenti del filtro Grid mostra il selettore dell'operatore di ricerca solo per singola colonna

Question

Ho una tabella jqGrid con molte colonne. La ricerca nella griglia viene effettuata utilizzando la barra degli strumenti dei filtri. Per la maggior parte di loro la ricerca è solo un semplice operatore predefinito. Per una colonna datetime voglio diversi tipi di operatori e selettore datepicker. Ho aggiunto l'inizializzazione dataInit datepicker a searchoptions, gli operatori necessari a searchoptions.sopt. Per mostrare questo operatore ho impostato searchOperators su true. Quindi per questa colonna tutto va bene. Ho datepicker con il popup di selezione dell'operatore. Ma per tutte le altre colonne l'icona dell'operatore di default è mostrata a sinistra. È fastidioso in quanto l'operatore è predefinito e l'utente non può cambiarlo. Quindi c'è qualche possibilità di nasconderli usando l'API jqGrid? Per quanto ho potuto vedere ho potuto nascondere questo solo usando il mio codice personalizzato:

Devo controllare il mio modello di colonna e dopo il rendering di rete (può essere in loadComplete) per tutte le colonne che hanno vuoto sopt o sopt.length == 0 per rimuovere operatore selettore. Oppure aggiungi una classe CSS che la nasconda. Non sei sicuro di quale di queste soluzioni sia migliore (nascondi o rimuovi) perché la rimozione potrebbe rompere alcune logiche e nascondere potrebbe influire sul calcolo della larghezza. Ecco esempio di quello che voglio dire su fiddle

function fixSearchOperators() 
{ 
    var columns = jQuery("#grid").jqGrid ('getGridParam', 'colModel'); 
    var gridContainer = $("#grid").parents(".ui-jqgrid"); 
    var filterToolbar = $("tr.ui-search-toolbar", gridContainer); 

    filterToolbar.find("th").each(function() 
    { 
     var index = $(this).index(); 
     if(!(columns[index].searchoptions && 
      columns[index].searchoptions.sopt && 
      columns[index].searchoptions.sopt.length>1)) 
     { 
      $(this).find(".ui-search-oper").hide(); 
     } 
    }); 
} 

Qualcuno ha qualche idea migliore?

Answer 1

Ho trovato l'idea di definire la visibilità delle operazioni di ricerca in ogni colonna ottima idea. +1 da me.

Vorrei solo suggerire di modificare leggermente i criteri per scegliere quali colonne della barra degli strumenti di ricerca otterranno le operazioni di ricerca. Mi sembra più originale includere alcune nuove proprietà all'interno di searchoptions. Così che si può scrivere qualcosa di simile

searchoptions: { 
    searchOperators: true, 
    sopt: ["gt", "eq"], 
    dataInit: function(elem) { 
     $(elem).datepicker(); 
    } 
} 

Penso che alcune colonne, come le colonne con stype: "select", potrebbero ancora bisogno di avere sopt (almeno sopt: ["eq"]), ma non voglio vedere operatori di ricerca per tale colonne. Specificare la visibilità delle operazioni di ricerca a livello di colonna sarebbe molto pratico in questi casi.

La demo di violino modificato è disponibile per here. Ho incluso nella demo CSS da the fix (vedi the answer e the corresponding bug report). Il codice completo è sotto

var dataArr = [ 
    {id:1, name: 'steven', surname: "sanderson", startdate:'06/30/2013'}, 
    {id:2, name: "valery", surname: "vitko", startdate: '07/27/2013'}, 
    {id:3, name: "John", surname: "Smith", startdate: '12/30/2012'}]; 

function fixSearchOperators() { 
    var $grid = $("#grid"), 
     columns = $grid.jqGrid ('getGridParam', 'colModel'), 
     filterToolbar = $($grid[0].grid.hDiv).find("tr.ui-search-toolbar"); 

    filterToolbar.find("th").each(function(index) { 
     var $searchOper = $(this).find(".ui-search-oper"); 
     if (!(columns[index].searchoptions && columns[index].searchoptions.searchOperators)) { 
      $searchOper.hide(); 
     } 
    }); 
} 

$("#grid").jqGrid({ 
    data: dataArr, 
    datatype: "local", 
    gridview: true, 
    height: 'auto', 
    hoverrows: false, 
    colModel: [ 
     { name: 'id', width: 60, sorttype: "int"}, 
     { name: 'name', width: 70}, 
     { name: 'surname', width: 100}, 
     { name: 'startdate', sorttype: "date", width: 90, 
      searchoptions: { 
       searchOperators: true, 
       sopt: ['gt', 'eq'], 
       dataInit: function(elem) { 
        $(elem).datepicker(); 
       } 
      }, 
      formatoptions: { 
       srcformat:'m/d/Y', 
       newformat:'m/d/Y' 
      } 
     } 
    ] 
}); 

$("#grid").jqGrid('filterToolbar', { 
    searchOnEnter: false, 
    ignoreCase: true, 
    searchOperators: true 
}); 
fixSearchOperators(); 

Esso mostra lo stesso risultato come la giovinezza: