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

Posted 2023-03-28

【中文标题】ag-grid React Header Component 全选复选框选择无法在移动设备和平板电脑上正常工作

【英文标题】：ag-grid React Header Component Select all Checkbox selection not working on mobile and tablet properly

【发布时间】：2018-08-02 08:27:07

【问题描述】：

我在实现 Header 组件时遇到了一个奇怪的问题，使用 ag-grid 选择所有复选框。

它在桌面上按预期工作，但是当我在平板电脑或移动设备上测试相同的功能时，复选框选择是随机工作的。

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

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

也尝试将 onClick 更改为 onChange，但没有成功。

尝试放置按钮而不是复选框，但仍然是同样的问题。

尝试将输入复选框直接放在返回语句中，但相同 问题。

下面是相同的代码：

列定义：

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】：

我终于解决了这个问题。

问题：

当用户点击标题复选框时，列拖动开始事件也会被触发，因此会覆盖或抑制复选框的点击事件。

解决方案：

由于这是我客户需要的复选框列，因此用户无需重新定位它，因此抑制列移动 (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
      ]
    );

如果有人对同样的问题有其他解决方案，请告诉我。

谢谢。

【讨论】：

你能说明HeaderCheckBoxRenderer是如何定义的吗？我正在寻找一个关于如何创建 Angular Header 组件的非 TypeScript 示例。