如何对位于ag-grid不同行中的单选按钮进行分组

3

我正在创建一个带有多行的网格,并在每一行中插入单选按钮,如下图所示。

enter image description here

单选按钮的列定义代码段如下:
columnDefs: [{
                headerName: '',
                field: '',
                tooltipField: '',
                suppressMenu: false,
                suppressFilter: true,
                suppressMovable: true,
                suppressResize: true,
                width: 200,
                cellRendererFramework: this.ButtonCellRenderer
               }]



 ButtonCellRenderer = (params) => {
      return (
        <div style={{margin: 'auto', width: '100%', overflow: 'hidden'}}>
          <div style={{display: 'inline-block'}}>
            <RadioButtonGroup
              name={params.data.bit_rate}
              defaultSelected={this.state.selectedRadioButton}
              debugger //eslint-disable-line
              onChange={handleSelectionChange}
              labelPosition={this.state.labelPosition}
            >
              <RadioButton label='' value='true' enabled='true' />
            </RadioButtonGroup>
          </div>
        </div>
      )
    } 

我在这里遇到的问题是我无法将单选按钮分组为单个RadioGroup,因此我无法实现互斥。 请问您能否建议如何使其互斥。

如果可能的话,你能在 Plunkr 上分享一下单选按钮的例子吗?我也在尝试在 ag-grid 中使用单选按钮。 - GrailsLearner
2个回答

2
您可以通过编程方式实现,只需给所有的输入/单选框元素添加一个name属性,并循环遍历具有相同名称的所有元素:
handleClick = () => {
        const elems = document.getElementsByName("rad");
        let selected;
        for(let i = 0; i < elems.length; i++) {
            if(elems[i].checked) {
                selected = elems[i].value;
            }
        }
        console.log(selected);
    };

    render() {

        return (
            <div>
                <input type={"radio"} name={"rad"} defaultChecked={true} value={'radio1'} onClick={this.handleClick}/> radio1 <br/>
                <input type={"radio"} name={"rad"} value={'radio2'} onClick={this.handleClick}/> radio2
            </div>
        );
    }

0

您需要使输入标签的名称id属性独特且动态,以便每个ag-grid单元格都将创建一个唯一的配对。

Plunker示例链接:ag-grid单选组件

RadioRenderer.prototype.init = function (params) {
this.params = params;
let uniqueId = this.params.node.data.UserId;
let colId = this.params.column.colId;
let colValue = this.params.node.data[colId];

this.eGui = document.createElement('div');

this.eGui.innerHTML = `<div class="row align-items-center">
                               <div class="col-auto">
                                   <div class="form-check form-check-info">
                                       <input style="margin-top:7px !important;" class="form-check-input" value="true" ${
                                         colValue ? 'checked="checked"' : ''
                                       } type="radio" name="${colId}_${uniqueId}" id="${colId}_${uniqueId}_Yes">
                                       <label class="form-check-label" for="${colId}_${uniqueId}_Yes">Yes</label>
                                   </div>
                               </div>
                               <div class="col-auto" style="margin-left: -10px;">
                                   <div class="form-check form-check-pink">
                                       <input style="margin-top:7px !important;" class="form-check-input" value="false" ${
                                         !colValue ? 'checked="checked"' : ''
                                       } type="radio" name="${colId}_${uniqueId}" id="${colId}_${uniqueId}_No">
                                       <label class="form-check-label" for="${colId}_${uniqueId}_No">No</label>
                                   </div>
                               </div>
                            </div>`;

this.clickHandler = this.clickHandler.bind(this);
this.eGui.addEventListener('click', this.clickHandler);
};

plunker ag-grid radio component example


网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接