如何通过选择标题复选框来检查/选择ui-grid(3.2.5)中的所有行复选框?

时间:2019-02-17 04:12:30

标签: angular ui-grid

我正在尝试通过选择标题复选框来选择行中的所有复选框。我正尝试在旧版应用程序中添加此功能,由于种种原因而无法更新到其他版本。

我认为将enableHeaderRowSelection设置为true应该可以,但这没有用。现在,我什至不能用鼠标单击来选中标题复选框。

我是ui-grid的新手,感谢您的帮助。

html代码:

<div
    class="bootstrap-grid testGrid"
    ui-grid="$ctrl.testGrid.gridOptions" 
    ui-grid-resize-columns ui-grid-auto-resize ui-grid-selection ui-grid-pagination grid-resizer-fill grid-header="#browseHeader">   

</div>

组件js:

(function(){
    angular.module('testApp.process')
    .component('testCheck', {
        templateUrl: 'html/check/test.html',
        controller: TestController
    });

    TestController.$inject = ['$scope', 'testService', 'uiGridService', 'browseGridService', 'modal'];

    function TestController($scope, testService, uiGridService, browseGridService, modal){
        /** Bindings **/
        var $ctrl = this;

        /** Functions **/
        $ctrl.$onInit = onInit;

        /** Implementation **/
        function onInit(){
            // init ui-grid
            $ctrl.testGrid = uiGridService.create({
                elementName : 'Test',
                storageName : 'testGrid',
                loadData : loadData
            });

            $ctrl.testGrid.gridOptions.appScopeProvider.onDblClick = function(row) {};

            $ctrl.testGrid.gridOptions.enableSorting = true;
            $ctrl.testGrid.gridOptions.enableSingleSorting = true;
            $ctrl.testGrid.gridOptions.multiSelect = true;
            $ctrl.testGrid.gridOptions.enableHeaderRowSelection = true;

            // Add browse ui-grid components to scope
            angular.extend($ctrl, browseGridService.getScope($ctrl.testGrid));

            // grid sorting callback
            $ctrl.testGrid.onSort = loadData;

            // grid columns
            $ctrl.testGrid.getDefaultColumns = function() {
                return [
                    {
                        field : 'select',
                        headerCellTemplate:'<input type="checkbox" ng-model="row.entity.select"/>',
                        cellTemplate : '<input type="checkbox" ng-model="row.entity.select"/>',
                        width: 150,
                        selected : true
                    },
                    {
                        displayName : 'File Name',
                        field : 'fileName',
                        cellTemplate : 'html/common/cell-file-folder.html',
                        selected : true
                    },
                    {
                        displayName : 'Date Deleted',
                        field : 'dateDeleted',
                        cellFilter : 'browseDateFilter',
                        width : 180,
                        cellTemplate : 'html/common/cell-date.html',
                        selected : true
                    },
                    {
                        displayName : 'Deleted By',
                        field : 'deletedBy',
                        width : 180,
                        cellTemplate : 'html/common/cell.html',
                        selected : true
                    },
                    {
                        displayName : 'Former Location',
                        field : 'formerLocation',
                        cellTemplate : 'html/common/cell.html',
                        selected : true
                    }]
                };

            $ctrl.testGrid.setColumns();

            // init data
            loadData();
        }

        // grid refresh
        function loadData() {
            $ctrl.testGrid.gridOptions.data = [
                {
                    "fileName":"Test 1",
                    "dateDeleted": "02/12/2019",
                    "deletedBy":"Test-AO5",
                    "formerLocation":"/"
                },
                {
                    "fileName":"Test 2",
                    "dateDeleted": "02/13/2019",
                    "deletedBy":"Test-AO6",
                    "formerLocation":"/"
                },
                {
                    "fileName":"Test 3",
                    "dateDeleted": "02/14/2019",
                    "deletedBy":"Test-AO7",
                    "formerLocation":"/"
                },
                ]
}
} } )();

ui屏幕截图 1

0 个答案:

没有答案