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 (
|
ID |
用户名 |
真实姓名 |
微信昵称 |
电话 |
邮箱 |
用户组 |
所属社区 |
状态 |
来源 |
上次登录时间 |
操作 |
{
(function(obj){
return (
obj.state.data.map(function(child){
return (
|
8464 |
大杨的朋友 |
大杨的 |
|
12585 |
|
普通用户 |
园东社区 |
启用 |
系统后台添加 |
2015-12-01 00:37:58(注册时间) |
|
)
})
)
})(this)
}
);
},
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 (
|
ID |
用户名 |
真实姓名 |
微信昵称 |
电话 |
邮箱 |
用户组 |
所属社区 |
状态 |
来源 |
上次登录时间 |
操作 |
{
(function(obj){
return (
obj.state.data.map(function(child){
return (
|
8464 |
大杨的朋友 |
大杨的 |
|
13569874541 |
|
普通用户 |
福田区>园岭街道>园东社区 |
启用 |
系统后台添加 |
2015-12-01 00:37:58(注册时间) |
|
)
})
)
})(this)
}
);
},
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的状态,
感觉这种做法不太好,有没有更好的方法呢?
有个
checked属性是确认是否勾选上的不是支持 onSelect 和 onSelectAll 方法了吗?现在的 api 完善多了吧。