Question

我想创建一个动态UI-Grid，其中包含动态生成的列和行。我使用了Stack Overflow中其他帖子的帮助，并能够按如下方式创建网格： -

HTML

<div ui-grid="{ data: myData.Data }" class="gridStyle" ui-grid-edit></div>

控制器

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': '2',
                    'Val': 'No'
                }
            },
            {
                'Keys': 'TTT',
                'AValues':
                {
                    'ID': '2',
                    'Val': 'No'
                },
                'BValues':
                {
                    'ID': '4',
                    'Val': 'Yes'
                },
                'CValues':
                {
                    'ID': '2',
                    'Val': 'Yes'
                }
            },

        ]
    };

    angular.forEach($scope.myData.Data, function (value, index) {
        for (cntType = 0; cntType < $scope.myData.Type.length; cntType++) {
            var typeLength = $scope.myData.Type[cntType];
            value[typeLength] = value[typeLength].Val;            
            $scope.myData.Data[index] = value;
        }
    });
}]);

网格如下所示： -

现在我希望在网格中添加以下内容： -

而不是是/否应显示复选框。如果值为是，则应选中复选框，否则将取消选中。
我想在网格的每一行上添加像Update这样的按钮，这样每当用户更改复选框选项时，它都会在数据库中更新。

如何实现这一目标？

Answer 1

您可以对 $ scope.myData 中的每个列使用 ＆＃34; cellTemplate＆＃34; ，我认为你需要在用户点击每个按钮时调用一个函数，这是一个简单的例子：

cellTemplate: '<div class="ui-grid-cell-contents" ng-click="grid.appScope.editProperties(row.entity)"><a class="btn btn-xs btn-grid btn-info"><i class="fa fa-pencil-square-o"></i></a></div>'

function editProperties(rowEntity) {
                //write everything u want
}

更多示例和文档Here

如何使用动态ColumnHeaders在UI网格中显示复选框和按钮

1 个答案: