react-bootstrap-table在从服务器更新数据(状态更新)时重建表

时间:2017-04-04 16:57:58

标签: javascript reactjs react-bootstrap-table

  1. 我使用服务器的ajax数据(带有axios)创建react-bootstrap-table。然后我更改了一个查询参数( this.state.type )并需要从服务器重新加载数据。我需要将新数据设置为状态,如何使用新数据重建表? 这是我的代码:
  2. 
    
    var Calls = React.createClass({
        getInitialState: function() {
            return {
                visible: false,
                products: [],
                callType: '1',
                type_: 1
            };
        },componentDidMount: function () {
            var _this = this;
            axios
                .get( 'stat_calls', {
                        params: {
                            type: _this.state.type_,
                        }
                    }
                )
                .then(
                    function (response) {
                        _this.setState(
                            {
                                products: response.data
                            }
                        )
                    }
                )
                .catch(function (error) {
                    console.log(error);
                })
        },
        readmoreClick: function(e) {
            e.preventDefault();
            var flag = this.state.callType;
            if(flag == '2') flag = '1'; else flag = '2';
            this.setState({callType: flag, type_: flag});
        },
        
    
        render: function() {
        
            return (
                <div>
     
                    <a href="#" onClick={this.readmoreClick} >{this.state.callType }</a>
                    
                    <BootstrapTable search={ true } pagination data={this.state.products} striped={true} hover={true}>
                        <TableHeaderColumn dataField="uniqid" isKey={true} dataAlign="center" dataSort={true}>uniqID</TableHeaderColumn>
                        <TableHeaderColumn dataField="begin" dataSort={true}>Начало</TableHeaderColumn>
                        <TableHeaderColumn dataField="talkTime" dataSort={true}>Время разговора (c)</TableHeaderColumn>
                        <TableHeaderColumn dataField="support" dataSort={true}>Оператор</TableHeaderColumn>
                        <TableHeaderColumn dataField="number">Номер</TableHeaderColumn>
                        <TableHeaderColumn dataField='button' dataFormat={this.cellButton.bind(this)} />
                    </BootstrapTable>
    
                </div>
            );
        }
    });
    &#13;
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
    &#13;
    &#13;
    &#13;

    1. 如何为列生成过滤器,以便显示两个值之间的间隔(例如,2017年4月1日至2017年4月5日)

0 个答案:

没有答案