如何使用动态列标题在 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
}

更多示例和文档这里

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