1.index.html
<!DOCTYPE html> <html> <head> <style> input{ border:5px solid #b5dad7; height:50px; width:452px; text-align:center; } td{ border:1px solid grey; width:150px; height:40px; text-align:center; } th{ border:1px solid grey; width:150px; height:40px } .centerDiv{ width:100% } </style> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <link href="https://cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"> <link href="/index.css" rel="stylesheet"> <script src="https://cdn.bootcss.com/react/15.6.1/react.min.js"></script> <script src="https://cdn.bootcss.com/react/15.6.1/react-dom.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script> <script src="index.js" type="text/babel"></script> </head> <body> <div id="tableList" class="centerDiv"> </div> </body> </html>
2.index.js
var tableSrc = { columns: [ {title: "名称", data: "name", type: "text",}, {title: "价格", data: "price", type: "number", editor: {}, query: true}, {title: "销量", data: "sales", type: "number", editor: {}, query: true}, ], data:[ { "name": "电锅", "price":100, "sales":1000, }, { "name":"电锅", "price":100, "sales":1000, }, { "name":"电水壶", "price":100, "sales":9100, }, { "name":"电热毯", "price":100, "sales":1800, }, { "name":"搅拌机", "price":100, "sales":134500, }, { "name":"烤箱", "price":100, "sales":1300, }, { "name":"开水机", "price":100, "sales":13400, }, ] } var TableList = React.createClass({ getInitialState: function() { return { value: ‘‘, srcData:this.props.srcData, data:this.props.srcData.data, }; }, handleChange: function(event) { var srcData = this.props.srcData; var data =this.state.data; var display = []; var select = event.target.value; data.forEach(function(x){ if(x.name.indexOf(select)>-1){ display.push(x) } }) srcData.data = display this.setState({srcData: srcData,value:select}); }, render: function() { var value = this.state.value; var srcData = this.state.srcData; return ( <div id="searchTable"> <input type="text" value={value} className="inputborder" onChange={this.handleChange} placeholder = "搜索商品" /> <Table srcData={srcData} /> </div> ) } }); var Table = React.createClass({ render: function() { return( <table style={{border: 1 }}> <Thcell columns={this.props.srcData.columns} /> <Cell columns = {this.props.srcData.columns} data = {this.props.srcData.data} /> </table> ) } }); var Thcell = React.createClass({ render: function() { var self =this; if(self.props.columns.length){ var ths = self.props.columns.map(function(th){ return (<th>{th.title}</th>) }) } return( <thead> <tr> {ths} </tr> </thead> ) } }); var Cell = React.createClass({ render: function() { var self = this; if(this.props.data.length){ var rows = self.props.data.map(function(datarow){ var tds = []; for(var i in self.props.columns){ tds.push(<td>{datarow[self.props.columns[i].data]}</td>) } return (<tr>{tds}</tr>) }) }else{ } return( <tbody> {rows} </tbody> ) } }); ReactDOM.render( <TableList srcData={tableSrc} />, document.getElementById(‘tableList‘) );
