Griddle

Question

ile özel filtre giriş bileşeni kullanın Bir tablo oluşturmak için griddle bir tepki bileşenini kullanıyorum.

Griddle, tabloyu yönlendiren bir filtre giriş elemanını göstermek için ek bir özniteliği destekler.

Kendi bağımsız formunuzu/girişinizi ızgarayla birlikte kullanmanın bir yolu var mı? Üçüncü taraf girdisi gönderildiğinde, tabloyu güncellemek için griddle içindeki bazı işlevleri tetikleyebilirim.

docs'a baktım ve projeye here numaralı sorunu bildirdim. Bunu nasıl başaracağımı bilmiyorum. http://griddlegriddle.github.io/Griddle/customization.html

"Özel Filtreleme ve Bileşen Filtre" bölümüne bakın: Bir sonraki sayfada özel filtreleme örneği vardır

Answer 1

.

var _ = require('underscore'), 
    squish = require('object-squish'); 

var customFilterFunction = function(items, query) { 
    return _.filter(items, (item) => { 
    var flat = squish(item); 

    for (var key in flat) { 
     if (String(flat[key]).toLowerCase().indexOf(query.toLowerCase()) >= 0) 
     return true; 
    } 

    return false; 
    }); 
}; 

var customFilterComponent = React.createClass({ 
    getInitialState() { 
    return { 
     "query": "" 
    }; 
    }, 
    searchChange(event) { 
    this.setState({ 
     query: event.target.value 
    }); 
    // this line is important 
    this.props.changeFilter(this.state.query); 
    }, 
    render() { 
    return (
     <div className="filter-container"> 
     <input type="text" 
       name="search" 
       placeholder="Search..." 
       onChange={this.searchChange} /> 
     </div> 
    ); 
    } 
}); 

Sonra bu gibi kalbur tablosunu başlatabilir: prop changeFilter sizin customFilterComponent geçirilen alır

React.render(
    <Griddle results={fakeData} showFilter={true} 
    useCustomFilterer={true} customFilterer={customFilterFunction} 
    useCustomFilterComponent={true} customFilterComponent={customFilterComponent}/>, 
    document.getElementById('griddle') 
); 

Answer 2

this demo örneklendiği gibi özel bir filtre ve özel bileşen belirtebilirsiniz çünkü Griddle'un customFilterComponent desteğidir.