javascript - react+antdesign 全选功能的问题
伊谢尔伦
伊谢尔伦 2017-04-10 16:33:51
[JavaScript讨论组]

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 (
            

{ (function(obj){ return ( obj.state.data.map(function(child){ return ( ) }) ) })(this) }
ID 用户名 真实姓名 微信昵称 电话 邮箱 用户组 所属社区 状态 来源 上次登录时间 操作
8464 大杨的朋友 大杨的 12585 普通用户 园东社区 启用 系统后台添加 2015-12-01 00:37:58(注册时间)  

); }, 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 (
            

{ (function(obj){ return ( obj.state.data.map(function(child){ return ( ) }) ) })(this) }
ID 用户名 真实姓名 微信昵称 电话 邮箱 用户组 所属社区 状态 来源 上次登录时间 操作
8464 大杨的朋友 大杨的 13569874541 普通用户 福田区>园岭街道>园东社区 启用 系统后台添加 2015-12-01 00:37:58(注册时间)  

); }, 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的状态,
感觉这种做法不太好,有没有更好的方法呢?

伊谢尔伦
伊谢尔伦

小伙看你根骨奇佳,潜力无限,来学PHP伐。

全部回复(2)
高洛峰
React.createClass({
    getInitialState: function() {
        return {checked: false}
    },
    checkchange: function() {
        this.setState({checked: !this.state.checked});
    }
    render: function() {
        return (
            <Checkbox checked={this.state.checked} onChange={this.checkchange} />
        );
    }
});

有个 checked 属性是确认是否勾选上的

黄舟

不是支持 onSelect 和 onSelectAll 方法了吗?现在的 api 完善多了吧。


// 通过 rowSelection 对象表明需要行选择
const rowSelection = {
  onSelect: function(record, selected, selectedRows) {
    console.log(record, selected, selectedRows);
  },
  onSelectAll: function(selected, selectedRows) {
    console.log(selected, selectedRows);
  }
};
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号