代码之家 › 专栏 › 技术社区 › rahul

ag grid React Header Component Select all复选框选择在移动设备和平板电脑上无法正常工作

ag-grid-react ag-grid events reactjs javascript

rahul · 技术社区 · 7 年前

我面临一个奇怪的问题,我正在使用ag网格实现标题组件全选复选框选择。

它在桌面上正常工作,但当我在平板电脑或手机上测试相同功能时,复选框选择是随机的。

我的意思是,当我在复选框内单击时,它不会被选中,但当我单击复选框左边框附近的某个位置时,它会被选中。

到目前为止我尝试过的事情:

尝试将onClick更改为onChange,但没有成功。
尝试放置按钮而不是复选框,但仍然存在相同的问题。
已尝试将输入复选框直接放在return语句中,但相同
问题

以下是相同的代码:

列定义:

this.setState({
      terminalAllocationsColumnDefs: [
        {headerName:"",field:"status", width:150, cellRendererFramework: CheckBoxRenderer, headerComponentFramework : HeaderCheckBoxRenderer,HeaderChangeCallback:this.headerChangeCallback},
        {headerName: this.state.multiLangMsgs.TERMINAL_ID, field: "DId", width: 250},
        {headerName: this.state.multiLangMsgs.TERMINAL_TYPE, field: "DType", width: 250},
        {headerName: this.state.multiLangMsgs.MSISDN, field:"MsId", width:260},
        {headerName: this.state.multiLangMsgs.SIM_ID, field:"SimId", width:260},
        {headerName: this.state.multiLangMsgs.SATALITE_ID, field:"DKey", width:250}
      ]
    });

HeaderCheckBoxRenderer组件:

onCheckBoxChange(){
        this.selectAll = false;
        if(this.state.checkStatus == "inactive"){
            this.setState({
                checkStatus :"active"
            });
            this.selectAll = true;
        }else {
            this.setState({
                checkStatus: "inactive"
            });
        }
        // }console.clear();
        // console.log(this);
            try{
                if(this.props.column.colDef.HeaderChangeCallback){
                    this.props.column.colDef.HeaderChangeCallback(this.selectAll);
                }
            }catch(e){}
    }
    render() {
        return (
            <div class="ag-header-cell" style={{"padding":"4px 4px 4px 5px"}}>
                <div class="ag-header-cell-resize"/>
                <div class="ag-header-select-all"/>
                <div class="ag-header-component"/>
                <input id="checkboxMember" type="checkbox" onClick={this.onCheckBoxChange.bind(this)} className="check" checked={this.state.checkStatus == "active" ? true : false}/>
            </div>
        );
    }

桌面

药片

正如您在桌面上看到的,它按预期工作,但在平板电脑上,当我单击左边框附近的某个位置时,它工作正常。

有谁能帮我解决这个奇怪的问题吗。

提前谢谢。

1 回复 | 直到 7 年前

rahul 5 年前

我终于解决了这个问题,并且能够解决这个问题。

问题:

当用户单击标题复选框时,也会触发列拖动开始事件,从而覆盖或抑制复选框的单击事件。

解决方案:

由于这是一个符合我的客户需要的复选框列,用户无需重新定位它,从而抑制列移动( suppressMovable: true )为我解决问题,如下所示:

this.setState({
      terminalAllocationsColumnDefs: [
        {headerName:"",field:"status", width:150, cellRendererFramework: CheckBoxRenderer, headerComponentFramework : HeaderCheckBoxRenderer,HeaderChangeCallback:this.headerChangeCallback, suppressMovable: true},
        {headerName: this.state.multiLangMsgs.TERMINAL_ID, field: "DId", width: 250},
        {headerName: this.state.multiLangMsgs.TERMINAL_TYPE, field: "DType", width: 250},
        {headerName: this.state.multiLangMsgs.MSISDN, field:"MsId", width:260},
        {headerName: this.state.multiLangMsgs.SIM_ID, field:"SimId", width:260},
        {headerName: this.state.multiLangMsgs.SATALITE_ID, field:"DKey", width:250}
      ]
    });

如果有人对同样的问题有其他的解决方案,请务必让我知道。

谢谢