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
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ı:
- 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; - Kod kalmak çok açık bir yapısı var.
- 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.
Nasıl yürütme SAVAŞTA ek açıklamaları ...
Nasıl Gmail filtre metin arama oluştur...
Nasıl stil için onay kutusunu kullanar...
Nasıl bir denetleyicisi bir filtre kul...
Nasıl bir Django queryset filtre içind...