用react实现对表格增删操作
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="../build/react.js"></script>
<script src="../build/react-dom.js"></script>
<script src="../build/browser.min.js"></script>
<script src="../build/jquery.min.js"></script>
<script src="./bootstrap.js"></script>
<link rel="stylesheet" href="./bootstrap.css">
<style>
.table-row {
display: table-row;
}
.display-none {
display: none;
}
.modal-header {
border-bottom:none;
}
.modal-footer {
border-top: none;
}
.list-box {
margin-top: 20px;
}
.list-box .table tr td,
.list-box .table tr td {
width: 20%;
}
.list-box .table tr td p {
margin: 0;
vertical-align: middle;
}
</style>
</head>
<body>
<div id="todolist"></div>
</body>
<script type="text/babel">
var UserInfo = React.createClass({
getInitialState:function(){
return {
name:'',
job:'',
age:''
}
},
getName:function(event){
this.setState({name:event.target.value.trim()});
},
getJob:function(event){
this.setState({job:event.target.value.trim()});
},
getAge:function(event){
this.setState({age:event.target.value.trim()});
},
addUser:function(){
if(this.state.name === ""){
alert("名字不能为空");
return;
}
if(this.state.age === ""){
alert("年龄不能为空");
return;
}
if(this.state.job === ""){
alert("工作不能为空");
return;
}
var obj = {
name:this.state.name,
job:this.state.job,
age:this.state.age
};
this.props.changeUser(obj);
this.setState({
name:'',
job:'',
age:''
});
},
reSetForm:function(){
this.setState({
name:'',
job:'',
age:''
});
},
render:function(){
return (
<div className="info-box">
<div className="form-group">
<label>username:</label>
<input type="text" className="form-control" value={this.state.name} onChange={this.getName}/>
</div>
<div className="form-group">
<label>age:</label>
<input type="text" className="form-control" value={this.state.age} onChange={this.getAge} />
</div>
<div className="form-group">
<label>job:</label>
<input type="text" className="form-control" value={this.state.job} onChange={this.getJob} />
</div>
<button className="btn btn-primary" onClick={this.addUser}>添加</button>
<button className="btn btn-default" onClick={this.reSetForm} style={{marginLeft:'12px'}}>重置</button>
</div>
);
}
});
class Opertion extends React.Component{
render(){
return (
<div id="dialog" className="modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div>
<div className="modal-dialog">
<div className="modal-content">
<div className="modal-header">
<button type="button" className="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 className="modal-title">{this.props.deleteIndex==-100?"确认删除全部用户":"确认删除"+this.props.deleteIndex+"该用户"}</h4>
</div>
<div className="modal-body">
<div className="modal-footer">
<button type="button" className="btn btn-default" data-dismiss="modal">取消</button>
<button type="button" data-dismiss="modal" className="btn btn-primary" onClick={this.props.deleteUser.bind(null,this.props.deleteIndex)}>确认</button>
</div>
</div>
</div>
</div>
</div>
</div>
)
}
hiddeDialog(){
return "modal"
}
}
var UserList = React.createClass({
getInitialState:function(){
return {
getDeleteIndex:-100
};
},
delete:function(){
this.props.deleteUser();
},
render:function(){
var aa = this.props.deleteUser;
var self = this;
return(
<div className="list-box">
<table className="table table-bordered table-hover">
<thead>
<tr>
<th onClick={this.delete}>Number</th>
<th>Name</th>
<th>Age</th>
<th>Job</th>
<th>Opertion</th>
</tr>
</thead>
<tbody>
{
this.props.userListArr.map(function (user,index) {
return (
<tr key={index}>
<td>{index+1}</td>
<td>{user.name}</td>
<td>{user.age}</td>
<td>{user.job}</td>
<td>
<button className="btn btn-danger" onClick={self.props.setDeleteIndex.bind(null,index)} data-toggle="modal" data-target="#dialog">删除</button>
</td>
</tr>
);
})
}
<tr className={self.props.userListArr.length>0?"table-row":"display-none"}>
<td colSpan="5" className="text-right">
<button className="btn btn-danger" onClick={self.props.setDeleteIndex.bind(null,-100)} data-toggle="modal" data-target="#dialog">全部删除</button>
</td>
</tr>
<tr className={self.props.userListArr.length>0?"display-none":"table-row"}>
<td colSpan="5">
<p className="text-center text-muted">暂无数据...</p>
</td>
</tr>
</tbody>
</table>
<Opertion deleteIndex={self.props.deleteIndex} deleteUser={self.props.deleteUser} />
</div>
)
}
});
var UserBox = React.createClass({
getInitialState:function(){
return {
userListArr:[],
msg:'454878748',
deleteIndex:-1,
};
},
changeUser:function(user){
var old =this.state.userListArr;
old.push(user)
this.setState({
userListArr:old
});
},
deleteUser:function(index){
if(index>-1){
var old = this.state.userListArr;
old.splice(index,1)
this.setState({
userListArr:old
});
}else{
this.deleteAllUser();
}
this.defaultIndex();
},
defaultIndex:function(){
this.setState({
deleteIndex:-1
});
},
deleteAllUser:function(){
this.setState({
userListArr:[]
});
},
setDeleteIndex:function(index){
this.setState({
deleteIndex:index
});
},
render:function(){
return (
<div>
<UserInfo changeUser={this.changeUser}/>
<UserList userListArr={this.state.userListArr} setDeleteIndex={this.setDeleteIndex} deleteUser={this.deleteUser} deleteIndex={this.state.deleteIndex} />
</div>
)
}
});
ReactDOM.render(
<UserBox />,
document.getElementById("todolist")
)
</script>
</html>
