agGrid的checkbox选择列样式调整

最新推荐文章于 2025-03-12 13:16:20 发布

漂亮得皮皮

最新推荐文章于 2025-03-12 13:16:20 发布

阅读量3.3k

点赞数 1

文章标签： checkbox

本文链接：https://blog.csdn.net/weixin_36706903/article/details/86748292

版权

本文介绍了如何在agGrid中实现特定行的checkbox不可选，并通过设置灰色背景和鼠标提示来增强用户体验。详细展示了相关代码实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

需求：对agGrid里的选择列指定某些行不可选，并且checkbox框所在单元格设置成灰色背景，鼠标指向checkbox给提示‘不可选’和cursor为禁选标识

展示：

代码：

//选择列
selectCol: {
    headerName: "",
    width: 30,
    maxWidth: 30,
    checkboxSelection: true,
    colId: "mySelectAll",
    hide: false,
    field: "mySelectAll",
    suppressSorting: true,
    suppressResize: true,
    suppressMovable: true,
    suppressMenu: true,
    headerCheckboxSelection: true,
    supressToolPanel: true,
    suppressFilter: true,
    headerClass：'ag-header-selectAll',//给选择列控制全选的checkbox加上单独的class
    //在这个函数里添加自己想要的样式
    cellRenderer'：(params)=>{// TODO:演出排期表设置checkbox为不可选背景为灰色
    let options=['三个和尚','是','是（请假）'];
    let field=params.data;
    let str;
    if (params.data&&params.colDef&&params.colDef.colId=='mySelectAll'&&
        (options.includes(field.f7)||options.includes(field.f11)||options.includes(field.f8))) {
        //这个cellstyle针对的是checkbox外面那层，对选择框无效
        params.colDef.cellStyle={
            'background-color': '#e4e4e4',//设置灰色背景：checkbox选框外面那层
            'cursor': 'not-allowed',
            'padding-left': '0px',
            'padding-right': '0px',
            'text-align': 'center',
            'font-style': 'normal'
        }
        params["node"].setSelected(false);
        //对选择框checkbox设置自己想要的样式，在鼠标指向checkbox的时候会有提示‘不可选’，以及禁选的标识
        params.eGridCell.children[0].children[0].children[1].style.cursor='not-allowed';
        params.eGridCell.children[0].children[0].children[1].setAttribute('title','不可选');
        str=`<span class="ag-cell-value" title="不可选" ></span>`
    }
    else {
        params.colDef.cellStyle={
            'padding-left': '0px',
            'padding-right': '0px',
            'text-align': 'center',
            'font-style': 'normal'
        }
        str=`<span class="ag-cell-value" ></span>`
    }
    return str;
   },
},