如何使用动态ColumnHeaders在UI网格中显示复选框和按钮 [英] How to show checkboxes and button in UI Grid with Dynamic ColumnHeaders

问题描述

我想创建具有动态生成的列和行的动态UI网格.我已经使用了Stack Overflow中其他文章的帮助，并且能够如下创建网格:-

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>

控制器

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

网格如下所示:-

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

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

1. 它应该显示复选框，而不是Yes/No.如果值为是"，则应选中此复选框，如果为否"，则将取消选中它.

1. Instead of Yes/No it should show checkbox. If value is Yes then checkbox should be checked and for No it will be unchecked.

我想在Grid的每一行上添加像Update这样的按钮，以便每当用户更改复选框选择时，它将在数据库中更新.

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.

如何实现?

推荐答案

，您可以对 $ scope中的每一列使用 "cellTemplate" . myData ，我认为您需要在用户单击每个按钮时调用一个函数，这是一个简单的示例:

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
}

更多示例和文档此处

这篇关于如何使用动态ColumnHeaders在UI网格中显示复选框和按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！