Как выбрать несколько строк в пользовательском интерфейсе с помощью клавиатуры? - PullRequest
0 голосов
/ 17 февраля 2019

Я использую UI-Grid.Я могу выбрать строку с помощью щелчка мыши и выбрать несколько строк с помощью Ctrl + щелчок левой кнопкой мыши.Однако я не могу выбрать несколько строк с помощью клавиатуры.Как заставить некоторые клавиши работать для выбора нескольких строк?

Заранее спасибо.

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 [

                    {
                        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":"/"
                },
                ]
}
} } )();

Сетка Снимок экрана: введите описание изображения здесь

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...