2010-04-08 36 views
6

Tôi có một jqGrid với navBar có search: truemultipleSearch: true. Tôi muốn thêm một nút vào giao diện người dùng của mình để tự động thêm quy tắc bổ sung vào tìm kiếm.Làm cách nào để thao tác tìm kiếm/bộ lọc của jqGrid?

Tôi đã thử thao tác trực tiếp PostData cho bộ lọc, nhưng các giá trị được thêm theo cách này sẽ không hiển thị trong giao diện người dùng tìm kiếm.

Tôi cũng đã cố gắng truy cập vào hộp tìm kiếm trực tiếp sử dụng jQuery, như thế này:

$('#fbox_list').searchFilter().add(); 
$('#fbox_list .sf .data input').each(function(index) { 
    alert($(this).val()); 
}); 

Nhưng, ngoài việc cảm thấy hackish, nó chỉ hoạt động nếu người dùng đã nhấp vào nút tìm kiếm (các fbox_list div không được xây dựng khi tải).

Có ai khác đã giải quyết vấn đề như thế này không?

Trả lời

7

Vì lợi ích của hậu thế, đây là bản hack tôi hiện đang sử dụng. Lưới có một ID của list và máy nhắn tin có một ID của pager:

jQuery(document).ready(function() { 
    //Initialize grid. 

    //Initialize the navigation bar (#pager) 

    //Hack to force creation of the search grid. 
    //The filter's ID is of the form #fbox_<gridId> 
    jQuery('#pager .ui-icon-search').click(); 
    jQuery('#fbox_list').searchFilter().close(); 

    //Example button events for adding/clearing the filter. 
    jQuery("#btnAddFilter").click(function() { 
     //Adds a filter for the first column being equal to 'filterValue'. 
     var postFilters = jQuery("#list").jqGrid('getGridParam', 'postData').filters; 
     if (postFilters) { 
      $('#fbox_list').searchFilter().add(); 
     } 

     var colModel = jQuery("#list").jqGrid('getGridParam', 'colModel'); 
     //The index into the colModel array for the column we wish to filter. 
     var colNum = 0; 
     var col = colModel[colNum]; 

     $('#fbox_list .sf .fields select').last().val(col.index).change(); 
     $('#fbox_list .sf .data input').last().val('filterValue'); 

     $('#fbox_list .sf .ops select.field' + colNum).last().val('eq').change(); 

     $('#fbox_list').searchFilter().search(); 
    }); 

    jQuery("#btnClearFilter").click(function() { 
     $('#fbox_list').searchFilter().reset(); 
    }); 
}); 
+0

Cảm ơn bạn rất nhiều vì bài đăng này. Tôi đã cố gắng tìm một cách để truy cập vào XHR URI cho khi cập nhật lưới. Tuy nhiên, tôi đã không bao giờ có thể thực hiện điều đó trên hộp phát triển localhost của tôi do các vấn đề về quyền XHR. Việc bạn đề cập đến "jqGrid ('getGridParam', 'postData')" đã cho tôi một cách để tự tạo ra URI. Cảm ơn một lần nữa. – Justin

+0

Không có phương pháp đơn giản hơn? – Don

+0

@ Tôi đã đăng câu hỏi này với hy vọng rằng ai đó sẽ cung cấp một câu hỏi. Cho đến nay, tôi đã không nhìn thấy một trong đó đã làm việc. Tất nhiên, tôi đã rời khỏi cảnh jqGrid trong một thời gian, vì vậy một người có thể đã được vá. – AaronSieb

0

Nếu bạn có nghĩa là thanh công cụ lọc, bạn có thể làm điều này: (tình trạng là tên col - vì vậy, thay thế "#gs_status" w/"#gs_" + your_col_name

 jQuery("#distributor_grid").jqGrid('showCol',['status']);   
     jQuery(".ui-search-toolbar #gs_status") 
      .val('ALL') 
      ; 

     $('#distributor_grid').RefreshData(); // triggers toolbar 

+0

Hmm ... Có lẽ chúng tôi có một phiên bản không phù hợp. Khi tôi thử '$ ('#

') .RefreshData();', tôi nhận được một lỗi JS (phương thức không tồn tại). Dù bằng cách nào, làm thế nào tôi sẽ thiết lập các toán tử tìm kiếm (bằng, không bằng nhau, và vv) với phương pháp này? – AaronSieb

0

để xóa đầu vào, lựa chọn và thiết lập lại lưới

$("td#refresh_navGrid").click(); 
Các vấn đề liên quan