jqGrid DatePicker lọc mà không cần nhấn phím Enter

Question

Tôi đang xây dựng ứng dụng ASP.NET MVC 3 đầu tiên của mình và sử dụng jqGrid. Một trong các cột của tôi, "Flavor Created", là một cột ngày tháng và tôi muốn lọc lưới trên cột đó bằng cách sử dụng DatePicker. Dưới đây là những gì đang xảy ra: Người dùng nhấp vào hộp bộ lọc tiêu đề cột, bộ chọn ngày được hiển thị và sau đó người dùng chọn năm, tháng và nhấp chuột mỗi ngày. Bộ chọn sẽ biến mất và để lại ngày, nói, ngày 28 tháng 3 năm 2009, trong hộp văn bản. Để thực sự làm cho bộ lọc hoạt động, tôi phải nhấp vào hộp đó và nhấn phím Enter, điều này gây phiền toái cho người dùng.

Có cách nào để bộ lọc tự động kích hoạt khi người dùng nhấp vào ngày đó không?

(Là một sang một bên, tôi không chắc chắn những gì việc sử dụng các nút 'Xong' là dành cho từ bảng chọn sẽ biến mất bất cứ khi nào tôi bấm một ngày. Có lẽ đó là một khung cảnh tôi đang thiếu.)

Bất kỳ ai khác cần chức năng này và giải quyết nó?

tôi đã cố gắng để làm một cái gì đó như thế này:

dataInit: function (elem) { 
    $(elem).datepicker({ changeYear: true, changeMonth: true, showButtonPanel: true, 
    onSelect: function (dateText, inst) { 
     $("#icecreamgrid")[0].trigger("reloadGrid"); 
    } 
    }) 
} 

khi tôi nhìn thấy một người nào đó trên một số trang web gợi ý, nhưng điều đó dường như không làm việc.

Answer 1

Bạn có thể thử với

dataInit: function (elem) { 
    $(elem).datepicker({ 
     changeYear: true, 
     changeMonth: true, 
     showButtonPanel: true, 
     onSelect: function() { 
      if (this.id.substr(0, 3) === "gs_") { 
       // in case of searching toolbar 
       setTimeout(function(){ 
        myGrid[0].triggerToolbar(); 
       }, 50); 
      } else { 
       // refresh the filter in case of 
       // searching dialog 
       $(this).trigger("change"); 
      } 
     }  
    }); 
} 

CẬP NHẬT: Bắt đầu với phiên bản 4.3.3 jqGrid khởi DOM của lưới như this của dataInit. Do đó, bạn không cần sử dụng biến số myGrid trong mã ở trên. Thay vì một mà có thể sử dụng:

dataInit: function (elem) { 
    var self = this; // save the reference to the grid 
    $(elem).datepicker({ 
     changeYear: true, 
     changeMonth: true, 
     showButtonPanel: true, 
     onSelect: function() { 
      if (this.id.substr(0, 3) === "gs_") { 
       // in case of searching toolbar 
       setTimeout(function() { 
        self.triggerToolbar(); 
       }, 50); 
      } else { 
       // refresh the filter in case of 
       // searching dialog 
       $(this).trigger("change"); 
      } 
     }  
    }); 
} 

miễn phí jqGrid gọi với options tham số thứ hai của dataInit, trong đó có thêm thông tin, giống như mode tài sản. Giá trị của tài sản mode là "filter" trong trường hợp gọi bên trong thanh công cụ bộ lọc (và "search" trong trường hợp hộp thoại tìm kiếm). Vì vậy, người ta có thể sử dụng mã sau đây

dataInit: function (elem, options) { 
    var self = this; // save the reference to the grid 
    $(elem).datepicker({ 
     changeYear: true, 
     changeMonth: true, 
     showButtonPanel: true, 
     onSelect: function() { 
      if (options.mode === "filter") { 
       // in case of searching toolbar 
       setTimeout(function() { 
        self.triggerToolbar(); 
       }, 0); 
      } else { 
       // refresh the filter in case of 
       // searching dialog 
       $(this).trigger("change"); 
      } 
     }  
    }); 
}