2
1155
var count = 0;
var UserManagerTable = React.createClass({
getInitialState:function(){
return {checkall:false,data:[{checked:false},{checked:true}]};
},
render:function(){
count++;
console.log('render'+count);
return (
<p id="UserManagerTable">
<table className="tableSheet">
<thead>
<tr>
<th><Checkbox defaultChecked={false} onChange={this.checkallHandle} checked={this.state.checkall} /></th>
<th>ID</th>
<th>用户名</th>
<th>真实姓名</th>
<th>微信昵称</th>
<th>电话</th>
<th>邮箱</th>
<th>用户组</th>
<th>所属社区</th>
<th>状态</th>
<th>来源</th>
<th>上次登录时间</th>
<th>操作</th>
</tr>
</thead>
<tbody>
{
(function(obj){
return (
obj.state.data.map(function(child){
return (
<tr>
<td><Checkbox defaultChecked={child.checked} onChange={obj.checkchange} checked={child.checked} /></td>
<td>8464</td>
<td>大杨的朋友</td>
<td>大杨的</td>
<td></td>
<td>12585</td>
<td className="email"></td>
<td>普通用户</td>
<td>园东社区</td>
<td>启用</td>
<td>系统后台添加</td>
<td>2015-12-01 00:37:58(注册时间)</td>
<td>
<a href="javascript:void(0);" title="编辑"><i className="fa fa-pencil-square-o"></i></a>
<a href="javascript:void(0);" title="绑定社区"><i className="fa fa-home"></i></a>
</td>
</tr>
)
})
)
})(this)
}
</tbody>
</table>
</p>
);
},
checkchange:function(event){
console.log('checkchange');
},
checkallHandle:function(event){
/* 全选 */
var tdata = this.state.data;
var tlen = tdata.length;
var thumb = tdata;
if(event.target.checked){
//全选
for(var i = 0; i < tlen; i++){
thumb[i].checked = true;
}
}else{
//全反选
for(var i = 0; i < tlen; i++){
thumb[i].checked = false;
}
}
this.setState({
checkall:event.target.checked,
data:thumb
})
}
});使用了蚂蚁金服的ant design UI库，在这个地方，点击thead上面的checkbox全选或者反全选tbody里面的checkbox，应该如何实现捏？？？老是想不明白，想不通这个问题。。。
========================================================================
2015年12月3日 18:44:00
代码更新了。
现在已经可以实现全选和全反选的功能了，但是现在的问题是：下面tbody的checkbox点击的时候，应该怎样改变该checkbox的state？
=====================不华丽的分割线====================================
var count = 0;
var UserManagerTable = React.createClass({
getInitialState:function(){
return {checkall:false,data:[{checked:false},{checked:false}]};
},
render:function(){
count++;
console.log('render'+count);
return (
<p id="UserManagerTable">
<table className="tableSheet">
<thead>
<tr>
<th><Checkbox defaultChecked={false} onChange={this.checkallHandle} checked={this.state.checkall} /></th>
<th>ID</th>
<th>用户名</th>
<th>真实姓名</th>
<th>微信昵称</th>
<th>电话</th>
<th>邮箱</th>
<th>用户组</th>
<th>所属社区</th>
<th>状态</th>
<th>来源</th>
<th>上次登录时间</th>
<th>操作</th>
</tr>
</thead>
<tbody>
{
(function(obj){
return (
obj.state.data.map(function(child){
return (
<tr>
<td><Checkbox defaultChecked={child.checked} onChange={obj.checkchange} checked={child.checked} className="listcheck" /></td>
<td>8464</td>
<td>大杨的朋友</td>
<td>大杨的</td>
<td></td>
<td>13569874541</td>
<td className="email"></td>
<td>普通用户</td>
<td>福田区>园岭街道>园东社区</td>
<td>启用</td>
<td>系统后台添加</td>
<td>2015-12-01 00:37:58(注册时间)</td>
<td>
<a href="javascript:void(0);" title="编辑"><i className="fa fa-pencil-square-o"></i></a>
<a href="javascript:void(0);" title="绑定社区"><i className="fa fa-home"></i></a>
</td>
</tr>
)
})
)
})(this)
}
</tbody>
</table>
</p>
);
},
checkchange:function(event){
//console.log('checkchange');
var cw = $('#UserManagerTable').find('.listcheck');
var len = cw.length;
var tdata = this.state.data;
var thumb = tdata;
for(var i = 0; i < len; i++){
thumb[i].checked = cw.eq(i).find('input').prop('checked');
}
this.setState({
data:thumb
});
},
checkallHandle:function(event){
/* 全选 */
var tdata = this.state.data;
var tlen = tdata.length;
var thumb = tdata;
if(event.target.checked){
//全选
for(var i = 0; i < tlen; i++){
thumb[i].checked = true;
}
}else{
//全反选
for(var i = 0; i < tlen; i++){
thumb[i].checked = false;
}
}
this.setState({
checkall:event.target.checked,
data:thumb
})
}
});2015年12月3日 18:56:09
更新代码。
checkchange这个function里面我遍历去找到现在的checked的状态，
感觉这种做法不太好，有没有更好的方法呢？
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
收藏
有个
checked属性是确认是否勾选上的不是支持 onSelect 和 onSelectAll 方法了吗？现在的 api 完善多了吧。