2011-06-28 6 views
6

मैं इस उदाहरण में फ़िल्टर की कार्यक्षमता की तरह:का मेल SlickGrid फ़िल्टर उदाहरण

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

जहां प्रत्येक स्तंभ का अपना फिल्टर है, लेकिन मैं यह भी से फ़िल्टर की कार्यक्षमता की आवश्यकता होती है:

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

इसमें यह छुपाया जा सकता है और बटन क्लिक के माध्यम से दिखाया जा सकता है।

क्या दूसरे लिंक से फ़िल्टर की "छुपा क्षमता" के साथ पहले लिंक से फ़िल्टर होना संभव है? धन्यवाद!

उत्तर

7

हां, यह है। फ़िल्टर बार को छिपाने के लिए आप पहले उदाहरण में grid.hideHeaderRowColumns() विधि का उपयोग कर सकते हैं। फिर इसे दिखाने के लिए grid.showHeaderRowColumns() का उपयोग करें।

उदाहरण के लिए, पहली लिंक पर जाएं और साथ URL बार की सामग्री को बदलने:

javascript:grid.hideHeaderRowColumns() 

और Enter दबाएं। आपको फ़िल्टर बार को ऊपर और दूर देखना चाहिए। यदि आप अपने ऐप को पहले उदाहरण कोड से बना रहे हैं, तो आप इन कार्यों को लगभग कहीं से भी कॉल करने में सक्षम होना चाहिए, यानी।

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