Kết hợp SlickGrid Lọc Ví dụ

Question

Tôi thích các chức năng của bộ lọc trong ví dụ này:

http://mleibman.github.com/SlickGrid/examples/example-header-row.html

trong đó mỗi cột có bộ lọc riêng của mình, nhưng tôi cũng yêu cầu các chức năng của bộ lọc từ:

http://mleibman.github.com/SlickGrid/examples/example4-model.html

Ở chỗ nó có thể bị ẩn và hiển thị qua nhấp chuột vào nút.

Có thể có các Bộ lọc từ liên kết đầu tiên, với "khả năng ẩn" của Bộ lọc khỏi liên kết thứ hai không? Cảm ơn!

Answer 1

Vâng, đúng vậy. Bạn có thể sử dụng phương thức grid.hideHeaderRowColumns() trong ví dụ đầu tiên để ẩn thanh bộ lọc. Sau đó, sử dụng grid.showHeaderRowColumns() để hiển thị lại.

Ví dụ, điều hướng đến liên kết đầu tiên, và thay thế nội dung của thanh URL với:

javascript:grid.hideHeaderRowColumns() 

và nhấn Enter. Bạn sẽ thấy thanh bộ lọc trượt lên và đi. Nếu bạn đang xây dựng ứng dụng của mình từ mã ví dụ đầu tiên, bạn sẽ có thể gọi các chức năng này từ hầu như mọi nơi, ví dụ:

<input type="button" onclick="grid.hideHeaderRowColumns();" value="Hide Filter" /> 

Lưu ý rằng trong ví dụ thứ hai, tác giả sử dụng đoạn mã sau để thêm một được xác định trước, nhưng ẩn, yếu tố để thanh tiêu đề theo kiểu:

// move the filter panel defined in a hidden div into grid top panel 
$("#inlineFilterPanel") 
    .appendTo(grid.getTopPanel()) 
    .show(); 

Và các yếu tố ẩn:

<div id="inlineFilterPanel" 
     style="display:none;background:#dddddd;padding:3px;color:black;"> 
    Show tasks with title including 
     <input type="text" id="txtSearch2"> 
    and % at least &nbsp; 
     <div style="width:100px;display:inline-block;" id="pcSlider2"></div> 
</div>