Bạn có thể giải quyết vấn đề rất dễ dàng đối với tham số postData bao gồm các chức năng và trigger('reloadGrid'). Tôi cố gắng giải thích ý tưởng chi tiết hơn.
Hãy để chúng tôi sử dụng mtype: "GET". Điều duy nhất mà hộp tìm kiếm/bộ lọc tiêu chuẩn làm sau khi hiển thị giao diện là thêm một số thông số bổ sung vào url, gửi đến máy chủ và tải lại dữ liệu lưới. Nếu bạn có giao diện riêng của mình để tìm kiếm/lọc (ví dụ: một số điều khiển chọn hoặc hộp kiểm chọn), bạn chỉ cần tự thêm url của mình và tải lại lưới đối với trigger('reloadGrid'). Để đặt lại thông tin trong lưới, bạn có thể chọn bất kỳ cách nào bạn muốn. Ví dụ, bạn có thể bao gồm trong các điều khiển chọn mà bạn có một tùy chọn như "không lọc".
Để chính xác hơn mã của bạn nên trông giống như mã từ câu trả lời how to reload jqgrid in asp.net mvc when i change dropdownlist:
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);
});
Nếu người dùng thay đổi tùy chọn trong hộp chọn chọn với id=StateId hoặc một hộp chọn với id=CityId (bằng chuột hoặc bàn phím), chức năng myReload sẽ được gọi, mà chỉ buộc tải lại dữ liệu trong jqGrid. Trong yêu cầu $.ajax tương ứng, mà jqGrid làm cho chúng tôi, giá trị từ thông số postData sẽ được chuyển tiếp đến $.ajax làm thông số data. Nếu một số thuộc tính của data là các hàm, hàm này sẽ được gọi bởi $.ajax. Vì vậy, dữ liệu thực tế từ các hộp được chọn sẽ được tải và tất cả dữ liệu sẽ được nối thêm vào dữ liệu được gửi đến máy chủ. Bạn chỉ cần thực hiện đọc các tham số này trong phần máy chủ của bạn.
Vì vậy, dữ liệu từ tham số postData sẽ được thêm vào url (ký hiệu '?' Và '&' sẽ được thêm tự động và tất cả các ký hiệu đặc biệt như khoảng trắng cũng sẽ được mã hóa như bình thường). Những lợi thế của việc sử dụng postData là:
- sử dụng các chức năng bên
postData tham số cho phép bạn tải giá trị thực tế từ tất cả các điều khiển sử dụng đến thời điểm nạp lại;
- Mã của bạn ở lại có cấu trúc rất rõ ràng.
- Tất cả các công trình đều không chỉ với yêu cầu HTTP GET, mà còn với HTTP POST;
Nếu bạn sử dụng một số "không lọc" hoặc "tất cả" các mục trong hộp chọn StateId, bạn có thể thay đổi chức năng mà tính giá trị của StateId tham số mà nên nối vào url máy chủ từ
StateId: function() { return jQuery("#StateId option:selected").val(); }
một cái gì đó như sau:
StateId: function() {
var val = jQuery("#StateId option:selected").val();
return val === "all"? "": val;
}
về phía server, bạn nên làm cho không có lọc cho StateId nếu bạn nhận được một giá trị rỗng như một tham số.
Tùy chọn bạn có thể sử dụng myGrid.setCaption('A text'); để thay đổi tiêu đề lưới. Điều này cho phép người dùng thấy rõ hơn, dữ liệu trong lưới được lọc với một số tiêu chí.
Revisa este quấn chặc (kiểm tra liên kết này) http://stackoverflow.com/questions/17179777/search-with-autocomplete-in-codeigniter-and-jqgrid/17195094#17195094 –