jqGrid filtre araç çubuğu arama işleç seçici sadece tek sütun için

Question

Birçok sütun içeren jqGrid tablo var. Izgarada arama, filtre araç çubuğu kullanılarak yapılır. Çoğu için arama sadece basit varsayılan operatördür. Bir tarih sütunu için farklı türde operatörler ve tarih seçici seçicilerini istiyorum. dataInit datepicker başlatmayı searchoptions'a ekledim, gerekli işleçler searchoptions.sopt. Bu operatörleri göstermek için searchOperators değerini true olarak ayarladım. Yani bu sütun için her şey yolunda. Operatör seçici açılırken tarihçem var. Ancak, diğer tüm sütunlar için varsayılan operatör simgesi sol tarafta gösterilir. Operatör varsayılan ve kullanıcı bunu değiştiremediğinden can sıkıcıdır. Yani onları jqGrid API kullanarak gizlemek için bir olasılık var mı? Bildiğim kadarıyla sadece benim özel kod kullanarak bu saklanabileceği alabildiğine: operatörü kaldırmak için sopt veya sopt.length == 0 boş olan tüm sütunlar için benim sütun modeli kontrol etmeliyiz ve ızgaranın render sonra (loadComplete olabilir)

seçici. Veya gizleyen CSS sınıfını ekleyin. Bu çözümden hangisinin daha iyi olduğundan emin olun (gizleme veya kaldırma) çünkü kaldırma bazı mantığı bozabilir ve gizleme genişlik hesaplamasını etkileyebilir. İşte biri çok daha iyi bir fikir var mı ben 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(); 
     } 
    }); 
} 

üzerinde ne anlama geldiğini örneğidir?

Answer 1

her sütununda arama işlemlerinin görünürlüğünü tanımlamayı çok iyi bir fikir buluyorum. +1 benden.

Yalnızca arama araç çubuklarının hangi arama sütunlarını alacağını seçme ölçütlerini değiştirmenizi öneririm. Bana searchoptions'un içinde bazı yeni mülkler eklemek için daha doğal görünüyor. Eğer

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

gibi bir şey yazabilirsiniz yüzden bazı sütunlar, stype: "select" ile sütunları gibi hala (en azından sopt: ["eq"]) sopt olması gerekir olabileceğini düşünüyorum, ama böyle bir arama operatörlerini görmek istemiyoruz sütunlar. Arama işlemlerinin görünürlüğünün sütun düzeyinde belirtilmesi, bu gibi durumlarda çok pratik olacaktır.

Değiştirilmiş keman demosu here. the fix'dan CSS tanıtımına dahil oldum (bkz. the answer ve the corresponding bug report).

: Bu gençler gibi aynı sonucu görüntüler

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(); 

altında tam koddur