如何在带动态列头的UI Grid中显示复选框与按钮

我来帮你搞定在动态UI-Grid里添加复选框和按钮的需求！结合你已有的代码，我们需要通过动态构建列定义来实现自定义控件的渲染，下面是具体的实现方案：

1. 修改控制器代码，动态生成列定义 #

你当前的代码直接绑定了数据，但要实现动态列+自定义控件，需要手动构建columnDefs来控制每一列的渲染逻辑。这里我们会基于你myData.Type里的动态字段，同时添加复选框列和操作按钮列：

myApp.controller("ctrlSiteJob", ['$scope', function ($scope) {
    var updateDict = [];
    
    $scope.myData = {
        'Type': [ 'AValues', 'BValues', 'CValues' ],
        'Data': [
            {
                'Keys': 'Category',
                'AValues': { 'ID': '1', 'Val': 'Yes' },
                'BValues': { 'ID': '2', 'Val': 'No' },
                'CValues': { 'ID': '3', 'Val': 'Yes' }
            },
            // 新增一行测试数据，方便验证效果
            {
                'Keys': 'Status',
                'AValues': { 'ID': '4', 'Val': 'No' },
                'BValues': { 'ID': '5', 'Val': 'Yes' },
                'CValues': { 'ID': '6', 'Val': 'No' }
            }
        ]
    };

    // 初始化网格配置
    $scope.gridOptions = {
        data: $scope.myData.Data,
        enableEdit: true, // 保留你原有的编辑功能
        columnDefs: []
    };

    // 1. 添加批量选择的复选框列
    $scope.gridOptions.columnDefs.push({
        name: 'selection',
        displayName: '',
        width: 50,
        cellTemplate: '<div class="ui-grid-cell-contents"><input type="checkbox" ng-model="row.entity.selected" ng-click="grid.appScope.handleRowSelect(row)"></div>'
    });

    // 2. 基于Type数组动态生成业务列，同时嵌入复选框
    angular.forEach($scope.myData.Type, function(type) {
        $scope.gridOptions.columnDefs.push({
            name: type,
            displayName: type.replace('Values', ''), // 把AValues显示为更友好的"A"
            cellTemplate: '<div class="ui-grid-cell-contents">' +
                // 将Yes/No值转为复选框，绑定到Val字段
                '<input type="checkbox" ng-model="row.entity[' + type + '].Val" ng-true-value="\'Yes\'" ng-false-value="\'No\'">' +
                '<span ng-if="row.entity[' + type + '].Val === \'Yes\'">是</span>' +
                '<span ng-if="row.entity[' + type + '].Val === \'No\'">否</span>' +
                '</div>'
        });
    });

    // 3. 添加操作按钮列
    $scope.gridOptions.columnDefs.push({
        name: 'actions',
        displayName: '操作',
        width: 120,
        cellTemplate: '<div class="ui-grid-cell-contents">' +
            '<button class="btn btn-sm btn-primary" ng-click="grid.appScope.editRow(row.entity)">编辑</button>' +
            '<button class="btn btn-sm btn-danger" ng-click="grid.appScope.deleteRow(row.entity)" style="margin-left:5px;">删除</button>' +
            '</div>'
    });

    // 复选框选中/取消的处理逻辑
    $scope.handleRowSelect = function(row) {
        if (row.entity.selected) {
            updateDict.push(row.entity);
        } else {
            const index = updateDict.indexOf(row.entity);
            index > -1 && updateDict.splice(index, 1);
        }
    };

    // 编辑按钮的业务逻辑
    $scope.editRow = function(entity) {
        alert(`开始编辑：${entity.Keys}`);
        // 这里可以替换为打开编辑弹窗、修改数据等实际业务操作
    };

    // 删除按钮的业务逻辑
    $scope.deleteRow = function(entity) {
        const dataIndex = $scope.myData.Data.indexOf(entity);
        if (dataIndex > -1) {
            $scope.myData.Data.splice(dataIndex, 1);
            // 同步从updateDict中移除
            const dictIndex = updateDict.indexOf(entity);
            dictIndex > -1 && updateDict.splice(dictIndex, 1);
        }
    };
}]);

2. 更新HTML代码，绑定新的网格配置 #

把原来的HTML代码改成绑定我们自定义的gridOptions：

<div ui-grid="gridOptions" class="gridStyle" ui-grid-edit></div>

关键细节说明 #

• 两种复选框场景：
  • 独立的选择列：用于批量操作（比如批量删除、批量更新），绑定到行实体的selected属性。
  • 业务列内的复选框：把原有Val字段的"Yes/No"值转为可视化的复选框，通过ng-true-value和ng-false-value实现字符串值与复选框状态的绑定。
• 按钮列的事件绑定：通过grid.appScope访问控制器中的函数，确保按钮点击能触发对应的业务逻辑。
• 完全动态适配：不管myData.Type里新增多少字段，都会自动生成对应的列，无需手动修改列定义。

这样就能完美实现你需要的动态网格+复选框+按钮功能啦！

内容的提问来源于stack exchange，提问作者simple user