Angularjs Функция выбора нескольких строк сетки пользовательского интерфейса - PullRequest
Новая
       19

Angularjs Функция выбора нескольких строк сетки пользовательского интерфейса

0 голосов
/ 09 апреля 2020

У меня простой angularjs Сетка пользовательского интерфейса, я пытаюсь разработать функцию флажка multiSelect. Я могу использовать функцию по умолчанию, которую сетка пользовательского интерфейса предоставляет, например, элемент управления «Tick». Работает нормально. Мне любопытно посмотреть, смогу ли я использовать флажок вместо галочки / меток. Я попытался что-то, как показано ниже, работает нормально, но просто хочу посмотреть, можем ли мы определить что-то в самом colDef. 

$rootScope.gridOptions = {
        enableColumnResizing: true,
        enableRowSelection: true,
        showGridFooter:true,
        enableFiltering: true,
        enablePagination: true,
        enableSorting: true,
        multiSelect: true,
        enablePaginationControls: true,
        paginationPageSizes: [50, 100, 250],
        paginationPageSize: 250,
        enableVerticalScrollbar: 1,
        enableHorizontalScrollbar: 1,
        columnDefs: [
            { name: "RecordID", displayName: "Record ID", cellClass: 'numberAlign', cellTooltip: true, headerTooltip: true, enableColumnMenu: false, width: '20%', enableSorting: true, enableFiltering: false },
        ],
        exporterPdfDefaultStyle: { fontSize: 9 },
        exporterPdfTableStyle: { margin: [0, 0, 0, 0] },
        exporterPdfTableHeaderStyle: { fontSize: 10, bold: true, italics: true, color: 'red' },
        exporterPdfOrientation: 'portrait',
        exporterPdfPageSize: 'LETTER',
        exporterPdfMaxGridWidth: 500,
        exporterFieldCallback: function (grid, row, col, value) {
            col.colDef.width = 500
            // Below one is export for branch specific page. wut_details_branch
            return value;
        },
        onRegisterApi: function (gridApi) {
            $rootScope.gridApi = gridApi;
        }
    };




<div class="row">
                        <div class="col-md-12">
                            <div id="grid1" ui-grid="gridOptions" ui-grid-resize-columns ui-grid-pagination ui-grid-exporter ui-grid-selection="" class="myGrid" style="margin-top:10px;">
                                <div class="no-rows" ng-show="!gridOptions.data.length">
                                    <div class="watermark">
                                        <span>No Rows</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

Я попробовал это и оно работает, я хочу знать, могу ли я что-то сделать в colDef

       //$templateCache.put('ui-grid/selectionRowHeaderButtons',
        //    "<div  class=\"ui-grid-selection-row-header-buttons \" ng-class=\"{'ui-grid-row-selected': row.isSelected}\" ><input style=\"margin: 0; vertical-align: middle\" type=\"checkbox\" value=\"ABCSSSSSS\" ng-model=\"row.isSelected\" ng-click=\"row.isSelected=!row.isSelected;selectButtonClick(row, $event)\">&nbsp;</div>"
        //);




//$templateCache.put('ui-grid/selectionSelectAllButtons',
        //    "<div class=\"ui-grid-selection-row-header-buttons \" ng-class=\"{'ui-grid-all-selected': grid.selection.selectAll}\" ng-if=\"grid.options.enableSelectAll\"><input style=\"margin: 0; vertical-align: middle\" type=\"checkbox\" text=\"ABCSSSSSS\"  ng-model=\"grid.selection.selectAll\" ng-click=\"grid.selection.selectAll=!grid.selection.selectAll;headerButtonClick($event)\"></div>"
        //);
...