How to show checkboxes and button in UI Grid with Dynamic ColumnHeaders

问题

I want to create a dynamic UI-Grid with columns and rows dynamically generated.I have used the help from other post in Stack Overflow and able to create the grid as follows:-

HTML

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

Controller

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;
        }
    });
}]);

The grid looks as below:-

Now I want the following in the grid to be added:-

Instead of Yes/No it should show checkbox. If value is Yes then checkbox should be checked and for No it will be unchecked.
I want to add the button like Update on each row of Grid so that whenever user change the checkbox selection then it will be updated in the database.

How to achieve this?

回答1:

you can use "cellTemplate" for each column inside $scope.myData, and i think you need to call a function when user click on each button, here is a simple example:

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
}