Tôi thấy câu hỏi của bạn rất thú vị, vì vậy tôi đã chuẩn bị the demo minh họa cách người ta có thể kết hợp hộp thoại Advanced Searching và Toolbar Searching trong một lưới.
Một mẹo quan trọng nhưng đơn giản là việc sử dụng recreateFilter: true. Theo mặc định, hộp thoại tìm kiếm sẽ được tạo một lần và sau đó sẽ chỉ ẩn hoặc hiển thị. Do đó, thông số postData.filters sẽ không được làm mới. Sau khi thiết lập recreateFilter: true sự cố với việc lấp đầy hộp thoại tìm kiếm nâng cao với các giá trị từ thanh công cụ tìm kiếm sẽ được giải quyết. Cá nhân tôi thiết lập các tùy chọn tìm kiếm mặc định như sau
$.extend(
$.jgrid.search,
{
multipleSearch: true,
multipleGroup: true,
recreateFilter: true,
overlay: 0
}
);
Bây giờ đến phần phức tạp hơn trong những giải pháp là chức năng refreshSerchingToolbar mà tôi đã viết. Các chức năng không phải là quá đơn giản, nhưng nó chỉ đơn giản trong sử dụng:
loadComplete: function() {
refreshSerchingToolbar($(this), 'cn');
}
Tham số cuối cùng là tham số tương tự mà bạn sử dụng như defaultSearch sở hữu của phương pháp thanh công cụ tìm kiếm filterToolbar (giá trị mặc định là 'bw', nhưng tôi cá nhân thích sử dụng 'cn' và đặt tham số jqGrid ignoreCase: true).
Nếu bạn điền vào hộp thoại tìm kiếm tiên tiến của the demo với lĩnh vực sau
và nhấp vào "Find" nút, bạn sẽ có lưới điện sau:
(Tôi đã đánh dấu cột 'Tổng cộng' là không thể tìm kiếm được đối với search: false để chỉ hiển thị rằng tất cả đều hoạt động chính xác trong trường hợp này)
Người ta có thể thấy rằng tất cả các trường của thanh công cụ tìm kiếm ngoại trừ "Số tiền" được lấp đầy với các giá trị từ hộp thoại tìm kiếm. Trường không được điền vì chúng tôi đã sử dụng thao tác "vắt hoặc bằng" thay vì "bằng". Chức năng refreshSerchingToolbar lấp đầy chỉ các yếu tố của thanh công cụ tìm kiếm có thể được sản xuất bởi các
Cũng giống như một lời nhắc nhở tôi nên đề cập rằng trong trường hợp việc sử dụng Filter Toolbar nó là rất quan trọng để xác định searchoptions.sopt tùy chọn của colModel. Đối với tất cả các cột không phải chuỗi chứa (ngày, số, lựa chọn, int, tiền tệ), nó là cực kỳ quan trọng để có 'eq' làm thành phần đầu tiên của mảng sopt. Xem here và here để biết chi tiết.
Nếu bạn thay đổi bộ lọc của Dialog Advanced để sau
bạn sẽ có như mong đợi
Cuối cùng tôi bao gồm mã của refreshSerchingToolbar chức năng :
var getColumnIndex = function (grid, columnIndex) {
var cm = grid.jqGrid('getGridParam', 'colModel'), i = 0, l = cm.length;
for (; i < l; i += 1) {
if ((cm[i].index || cm[i].name) === columnIndex) {
return i; // return the colModel index
}
}
return -1;
},
refreshSerchingToolbar = function ($grid, myDefaultSearch) {
var postData = $grid.jqGrid('getGridParam', 'postData'), filters, i, l,
rules, rule, iCol, cm = $grid.jqGrid('getGridParam', 'colModel'),
cmi, control, tagName;
for (i = 0, l = cm.length; i < l; i += 1) {
control = $("#gs_" + $.jgrid.jqID(cm[i].name));
if (control.length > 0) {
tagName = control[0].tagName.toUpperCase();
if (tagName === "SELECT") { // && cmi.stype === "select"
control.find("option[value='']")
.attr('selected', 'selected');
} else if (tagName === "INPUT") {
control.val('');
}
}
}
if (typeof (postData.filters) === "string" &&
typeof ($grid[0].ftoolbar) === "boolean" && $grid[0].ftoolbar) {
filters = $.parseJSON(postData.filters);
if (filters && filters.groupOp === "AND" && typeof (filters.groups) === "undefined") {
// only in case of advance searching without grouping we import filters in the
// searching toolbar
rules = filters.rules;
for (i = 0, l = rules.length; i < l; i += 1) {
rule = rules[i];
iCol = getColumnIndex($grid, rule.field);
cmi = cm[iCol];
control = $("#gs_" + $.jgrid.jqID(cmi.name));
if (iCol >= 0 && control.length > 0) {
tagName = control[0].tagName.toUpperCase();
if (((typeof (cmi.searchoptions) === "undefined" ||
typeof (cmi.searchoptions.sopt) === "undefined")
&& rule.op === myDefaultSearch) ||
(typeof (cmi.searchoptions) === "object" &&
$.isArray(cmi.searchoptions.sopt) &&
cmi.searchoptions.sopt[0] === rule.op)) {
if (tagName === "SELECT") { // && cmi.stype === "select"
control.find("option[value='" + $.jgrid.jqID(rule.data) + "']")
.attr('selected', 'selected');
} else if (tagName === "INPUT") {
control.val(rule.data);
}
}
}
}
}
}
};
CẬP NHẬT: Mã trên không cần thiết trong trường hợp sử dụng free jqGrid 4.13.1 hoặc cao hơn. Nó chứa các tùy chọn mặc định mới loadFilterDefaults: true của filterToolbar, mà làm mới các giá trị của các thanh công cụ lọc và các hoạt động lọc (nếu searchOperators: true tùy chọn filterToolbar được ised) nếu postData.filters và search: true được set (bộ lọc được áp dụng). JqGrid miễn phí làm mới thanh công cụ bộ lọc trên jqGridAfterLoadComplete (nếu loadFilterDefaults: true được đặt) hoặc nếu sự kiện jqGridRefreshFilterValues được kích hoạt rõ ràng.
@itsmatt: Đó có phải là những gì bạn cần không? – Oleg
Đó là khá kỹ lưỡng, Oleg - Tôi đánh giá cao độ sâu của phản ứng của bạn! – itsmatt
Một trong những biến chứng mà tôi có với lọc ngày là tôi có thể lọc xuống mức tháng và cho đến nay đã giải quyết vấn đề này bằng cách sử dụng GT (lớn hơn) làm toán tử của tôi, vì vậy nếu tôi muốn xem dữ liệu của tháng 6, tôi có thể lọc GT ngày 01 tháng 6 năm 2011 và trong khi không lý tưởng nó mang lại cho tôi tất cả các dữ liệu của tháng Sáu (cùng với, như là một tác dụng phụ, dữ liệu của tháng Bảy quá). Đó có lẽ chỉ là một thiết lập trong bộ chọn ngày mặc dù - cần phải nhìn vào đó, sau đó EQ sẽ làm việc tốt, tôi giả định. – itsmatt