Hướng dẫn react-bootstrap-table insert row - Reac-bootstrap-bảng chèn hàng

Question

); } }

Ví dụ làm việc:

https://jsfiddle.net/mrAhmedkhan/nvgozjhy/

react-bootstrap-table2 Cho phép bạn tùy chỉnh kiểu hàng/lớp/thuộc tính và sự kiện trên hàng (________ 5)

Bản demo trực tiếp cho các hàng

Phong cách/Lớp học

Rowstyle
Các lớp học

Sự kiện hàng

Rowevents

Hiện tại, react-bootstrap-table2 chỉ kết thúc các sự kiện sau để cho phép gọi lại của nó để nhận row và rowIndex, ví dụ:

onClick

class ProductTable extends React.Component {

  render() {
    var onProductTableUpdate = this.props.onProductTableUpdate;
    var product = this.props.products.map(function(product) {
      return ()
    });
    return (

Dưới đây là những gì bạn có thể làm.Giả sử bạn có một thành phần chính sẽ nhận được tất cả các chi tiết.

Nội dung chính Show

Phong cách/Lớp học
Sự kiện hàng
Thuộc tính hàng

class Products extends React.Component {

  constructor(props) {
    super(props);

    //  this.state.products = [];
    this.state = {};
    this.state.filterText = "";
    this.state.products = [
      {
        id: 1,
        category: 'Sporting Goods',
        price: '49.99',
        qty: 12,
        name: 'football'
      }, {
        id: 2,
        category: 'Sporting Goods',
        price: '9.99',
        qty: 15,
        name: 'baseball'
      }, {
        id: 3,
        category: 'Sporting Goods',
        price: '29.99',
        qty: 14,
        name: 'basketball'
      }, {
        id: 4,
        category: 'Electronics',
        price: '99.99',
        qty: 34,
        name: 'iPod Touch'
      }, {
        id: 5,
        category: 'Electronics',
        price: '399.99',
        qty: 12,
        name: 'iPhone 5'
      }, {
        id: 6,
        category: 'Electronics',
        price: '199.99',
        qty: 23,
        name: 'nexus 7'
      }
    ];

  }

  handleAddEvent(evt) {
    var id = (+ new Date() + Math.floor(Math.random() * 999999)).toString(36);
    var product = {
      id: id,
      name: "empty row",
      price: "mpty row",
      category: "mpty row",
      qty: 0
    }
    this.state.products.push(product);
    this.setState(this.state.products);

  }

  handleProductTable(evt) {
    var item = {
      id: evt.target.id,
      name: evt.target.name,
      value: evt.target.value
    };
var products = this.state.products.slice();
  var newProducts = products.map(function(product) {

    for (var key in product) {
      if (key == item.name && product.id == item.id) {
        product[key] = item.value;

      }
    }
    return product;
  });
    this.setState({products:newProducts});
  };
  render() {

    return (
      
        
      
    );

  }

}

Điều này chứa mã để thêm hàng. Sau đó, bảng làm một cái gì đó như thế này.

class ProductTable extends React.Component {

  render() {
    var onProductTableUpdate = this.props.onProductTableUpdate;
    var product = this.props.products.map(function(product) {
      return ()
    });
    return (  
      
      
        
            {product}

          
          
            
              Name
              price
              quantity
              category
            
          

          

        
      
    );

  }

}

Bây giờ đối với các hàng comoponent:

class ProductRow extends React.Component {

  render() {

    return (

{this.props.product.id} {this.props.product.price} {this.props.product.qty} {this.props.product.category}


            {product}

Name	price	quantity	category


    );

  }

}

0

class ProductTable extends React.Component {

  render() {
    var onProductTableUpdate = this.props.onProductTableUpdate;
    var product = this.props.products.map(function(product) {
      return ()
    });
    return (  
      
      
        
            {product}

          
          
            
              Name
              price
              quantity
              category
            
          

          

        
      
    );

  }

}

1

class ProductTable extends React.Component {

  render() {
    var onProductTableUpdate = this.props.onProductTableUpdate;
    var product = this.props.products.map(function(product) {
      return ()
    });
    return (  
      
      
        
            {product}

          
          
            
              Name
              price
              quantity
              category
            
          

          

        
      
    );

  }

}

2

class ProductTable extends React.Component {

  render() {
    var onProductTableUpdate = this.props.onProductTableUpdate;
    var product = this.props.products.map(function(product) {
      return ()
    });
    return (  
      
      
        
            {product}

          
          
            
              Name
              price
              quantity
              category
            
          

          

        
      
    );

  }

}

3

class ProductTable extends React.Component {

  render() {
    var onProductTableUpdate = this.props.onProductTableUpdate;
    var product = this.props.products.map(function(product) {
      return ()
    });
    return (  
      
      
        
            {product}

          
          
            
              Name
              price
              quantity
              category
            
          

          

        
      
    );

  }

}

4

const rowEvents = {
  onClick: (e, row, rowIndex) => {
    ....
  }
};
<BootstrapTable data={ data } columns={ columns } rowEvents={ rowEvents } />

Dù sao, bạn có thể yêu cầu chúng tôi thêm nhiều sự kiện được gói hơn.

Thuộc tính hàng

Sắp có!

programming bootstrap react-bootstrap-table onclick cell react-bootstrap-table add row react-bootstrap-table2 react-bootstrap-table-next React-bootstrap-table npm React-bootstrap-table checkbox example

Hướng dẫn react-bootstrap-table insert row - Reac-bootstrap-bảng chèn hàng

Phong cách/Lớp học

Sự kiện hàng

Thuộc tính hàng

Bài Viết Liên Quan

Quảng Cáo

Có thể bạn quan tâm

Toplist được quan tâm

Quảng cáo

Xem Nhiều

Quảng cáo

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội