ag-grid 单元格编辑 agRichSelectCellEditor的使用

Created At : 2022-11-17 15:10

Views 👀 :

做批量修改窗内衬时，值的显示需要以下拉框形式显示；
遇到的问题：
解决方案：
学习

做批量修改窗内衬时，值的显示需要以下拉框形式显示；

之前遇到的下拉框形式的设置，是在.html文件中添加：

<div class=" col-lg-3 col-md-6 fieldsetdnn">
  <div class="row">
    <div class="col-md-4 col-xs-6 control-label form-control-static">备注:</div>
    <div class="col-md-8 col-xs-6 form-control-static" style="padding-top:0;padding-bottom:0;">
      **<input type="text" placeholder="请输入备注" [(ngModel)]="tihuo['beizhu']" (blur)="modify(tihuo)"
        class="form-control" />**
    </div>
  </div>
</div>

或者在.ts文件中在要修改的字段单元格中设置编辑：

{
  cellStyle: { 'text-align': 'right' }, headerName: '重量', field: 'weight', minWidth: 100, editable: true,
  onCellValueChanged: params => {
    let search = { saleweight: params.newValue };
    this.tihuoApi.modifyWeight(params.data.id, search).then(data => {
      this.toast.pop('success', '重量修改成功！');
      this.listDetail();
    });
  }, cellRenderer: params => {
    if (!params.data.isldmodify) {
      params.data.editable = false;
    }
    return params.data.weight;
  }, valueFormatter: this.settings.valueFormatter3
},

遇到的问题：

按照之前修改下拉的方法，没有找到设置单元格修改和设置下拉框的代码区域；

解决方案：

通过获取枚举值的方法，排查到了agRichSelectCellEditor，发现通过获取窗内衬的枚举值,将”headerName”和”values”set进data中，通过判断
获取的”headerName”是否有值，便可以实现下拉框选择；

this.data.set('窗内衬',this.menisyoubuxiugangData);
if(this.data.get(field["headerName"]) != undefined && this.data.get(field["headerName"]) != null ){
          field.editable = true;
          field.cellEditor = 'agRichSelectCellEditor';
          field.cellEditorParams = { values: this.data.get(field["headerName"]).map(x=>x.name)};

学习

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>ag-grid 编辑表格例子</title>
    <script src="//www.itxst.com/package/ag-grid/ag-grid-community.js"></script>
    <link href="//www.itxst.com/package/ag-grid/styles/ag-grid.css" rel="stylesheet" />
</head>
<body>
    <div style="font-size:14px;color:#ff0000;padding:6px 0px;">双击单元格试试看</div>
    <div id="myGrid" style="width: 100%;height: 500px;" class="ag-theme-balham"></div>
    <script>

//定义表格列
var columnDefs = [
    { headerName: '姓名', field: 'name' },
    {
        headerName: '性别', field: 'sex',
        cellEditor: "agSelectCellEditor",
        cellEditorParams: { values: ["男", "女"] }
    },
    {
        headerName: '年龄', field: 'age'
    },
    { headerName: '籍贯', field: 'jg' },
    {
        headerName: '省份', field: 'sf'
    },
    {
        headerName: '地址', field: 'dz',
        cellEditor: 'agLargeTextCellEditor',
        cellEditorParams: {
            maxLength: '300',
            cols: '50',
            rows: '6'
        }
    },
];

//与列对应的数据; 属性名对应上面的field
var data = [
    { name: '张三', sex: '男', age: '100', 'jg': '中国', 'sf': '浙江', 'dz': '杭州市古墩路1号' },
    { name: '李四', sex: '女', age: '5', 'jg': '中国', 'sf': '浙江', 'dz': '杭州市古墩路12号' },
    { name: '王五', sex: '女', age: '20', 'jg': '中国', 'sf': '浙江', 'dz': '杭州市古墩路31号' },
    { name: '王五', sex: '女', age: '26', 'jg': '中国', 'sf': '浙江', 'dz': '杭州市古墩路111号' },
    { name: '王五', sex: '男', age: '35', 'jg': '中国', 'sf': '浙江', 'dz': '杭州市古墩路12号' }
];

//将列和数据赋给gridOptions
var gridOptions = {
    columnDefs: columnDefs,
    rowData: data,
    //editType:"fullRow",
    onCellEditingStopped: function (event) {
        var itxst = JSON.stringify(event.data);
        alert(itxst);
    },
    onGridReady: function () {
        //表格创建完成后执行的事件
        gridOptions.api.sizeColumnsToFit();//调整表格大小自适应
    },
    defaultColDef: {
        editable: true,//单元表格是否可编辑
    }

};
//在dom加载完成后 初始化agGrid完成
document.addEventListener("DOMContentLoaded", function () {
    var eGridDiv = document.querySelector('#myGrid');
    new agGrid.Grid(eGridDiv, gridOptions);
});

    </script>
</body>
</html>