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‘)
);
时间： 2024-10-10 17:39:44