結合SlickGrid過濾器示例

Question

我喜歡過濾器在本實施例中的功能：

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

其中每列有它自己的濾波器，但我還需要過濾器的從功能：

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

因爲它可以通過點擊按鈕隱藏和顯示。

是否有可能從第一個鏈接獲得過濾器，從第二個鏈接獲得過濾器的「隱藏能力」？謝謝！

Answer 1

是的。您可以在第一個示例中使用方法grid.hideHeaderRowColumns()來隱藏過濾條。然後使用grid.showHeaderRowColumns()再次顯示。

例如，瀏覽到第一個鏈接，並將其替換地址欄的內容：

javascript:grid.hideHeaderRowColumns() 

並按下回車鍵。你應該看到過濾條向上滑動。如果您是從第一個示例代碼構建應用程序，則應該可以從幾乎任何位置調用這些函數，即。

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

注意，在第二示例中，作者使用以下代碼來預定義，但隱藏，元素添加到風格標題欄：

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

和隱藏元件：

<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>