SORU
28 Mayıs 2010, Cuma


Nasıl jqGrid verileri dahili arama/filtre kutusunu kullanarak filtre

Kullanıcılar iç arama kutusunu kullanmadan grid verileri süzmek için güçlü olmak istiyorum.

Tarih için iki giriş alanları (ve) oluşturdum ve şimdi şebeke filtresi olarak benimsemeye söylemek ve sonra da yeni veri talep etmek lazım.

Dövme bir sunucu isteği için grid veri (atlayarak kılavuz) ve ayar grid veri için yanıt veri alışkanlık iş - çünkü en kısa sürede kullanıcı çalışır Yeniden Sipariş sonuçları veya değişikliği sayfası vb. kılavuz sunucu boş bir filtre kullanarak yeni veri talep eder.

I cant bunu başarmak için kılavuz API bulmak için - Herkes herhangi bir fikir var mı? gibi Teşekkürler.

CEVAP
28 Mayıs 2010, Cuma


Eğer sorun fonksiyonlar ve trigger('reloadGrid') dahil 3 ** parametre saygı ile çözüldü çok kolay olabilir. Bu fikri daha detaylı açıklamaya çalışırım.

Bize mtype: "GET" kullanalım. Arayüz geldikten sonra yapacak tek şey url için bazı ek parametreler ekleyerek, sunucuya göndermek ve ızgara verileri yeniden. Eğer/filtreleme (bazı kontroller veya onay kutuları, örneğin) aramak için kendi arabirimi varsa sadece url kendinizi ekleyin ve trigger('reloadGrid') saygı ile ızgara yeniden. Kılavuzdaki bilgilerin sıfırlanması için tercih ettiğiniz herhangi bir yolu seçebilirsiniz. Örneğin, gibi bir seçenek var ki seçmek denetimleri içerebilir "filtreleme".

Kodunuzu gerektiğini daha tam olarak cevap kodu how to reload jqgrid in asp.net mvc when i change dropdownlist gibi görünüyor:

var myGrid = jQuery("#list").jqGrid({
    url: gridDataUrl,
    postData: {
        StateId: function() { return jQuery("#StateId option:selected").val(); },
        CityId: function() { return jQuery("#CityId option:selected").val(); },
        hospname: function() { return jQuery("#HospitalName").val(); }
    }
    // ...
});
//
var myReload = function() {
    myGrid.trigger('reloadGrid');
};
var keyupHandler = function (e,refreshFunction,obj) {
    var keyCode = e.keyCode || e.which;
    if (keyCode === 33 /*page up*/|| keyCode === 34 /*page down*/||
        keyCode === 35 /*end*/|| keyCode === 36 /*home*/||
        keyCode === 38 /*up arrow*/|| keyCode === 40 /*down arrow*/) {

        if (typeof refreshFunction === "function") {
            refreshFunction(obj);
       }
    }
};

// ...
$("#StateId").change(myReload).keyup(function (e) {
    keyupHandler(e,myReload,this);
});
$("#CityId").change(myReload).keyup(function (e) {
    keyupHandler(e,myReload,this);
});

Eğer kullanıcı değiştirme seçeneği seçin kutusu id=StateId veya başka bir seçme kutusu ile id=CityId (fare veya klavye), işlevi myReload denir, hangi güç yeniden veri jqGrid. Bizim için ne jqGrid $.ajax istek, ilgili sırasında, postData parametre değeri data parametre olarak $.ajax iletilir. Eğer data özellikleri bazı fonksiyonlar ise, bu fonksiyonu $.ajax tarafından çağrılır. Seçim kutuları gerçek veriler yüklenecek ve tüm veriler sunucuya gönderilen eklenir. Server bölümünde bu parametreler okuma uygulamak gerekir.

Yani verilerden postData parametre adına eklenir url (semboller '?' ve '&' eklenecektir otomatik olarak ve tüm özel semboller gibi boşluklar olur da kodlanmış her zamanki gibi). postData kullanım avantajları:

  1. fonksiyonların kullanımıpostData içinde parametre yüklemek için izin verirgerçektüm değerleri yeniden anı için kullanılan kontroller;
  2. Kod kalmak çok açık bir yapısı var.
  3. Hepsi değil sadece, aynı zamanda POST HTTP ile HTTP GET istekleri ile, ama gayet iyi bir performans sergiliyor

Eğer kullandığınız bazı "filtreleme" veya "tüm" girdileri seçin kutusu StateId, değiştir işlevi hesaplamak değeri StateId parametresi de eklenir sunucu url

StateId: function() { return jQuery("#StateId option:selected").val(); }

bir şey gibi yapın:

StateId: function() {
    var val = jQuery("#StateId option:selected").val();
    return val === "all"? "": val;
}

Sunucu tarafında eğer bir parametre olarak boş bir değer alırsanız StateId için filtreleme yapar.

İsteğe bağlı olarak myGrid.setCaption('A text'); kılavuz Başlığı değiştirmek için kullanabilirsiniz. Bu kılavuz verileri bazı kriterler ile süzülmüş kullanıcı daha net görmek için izin verir.

Bunu Paylaş:
  • Google+
  • E-Posta
Etiketler:

YORUMLAR

SPONSOR VİDEO

Rastgele Yazarlar

  • Amazon Web Services

    Amazon Web S

    8 NİSAN 2009
  • Joshua Bane

    Joshua Bane

    24 Temmuz 2007
  • Rachel Talbott

    Rachel Talbo

    26 Ocak 2011