如何将选区复制到新的 ui- 网格中

How to copy selction into a new ui-grid

我正在使用 Angular ui-网格(来自 ui-grid.info)。 我有一个 ui-grid 显示 JSON 由 webapi-controller 提供的数据,效果很好。 我添加了第二个 ui-grid,具有相同的 columsDef 但没有数据。

我想使用按钮将(多)选定行从网格 1 复制到网格 2。

如何访问选择以将其添加到第二个网格的数据中?

app.js

    var app = angular.module('app', ['ui.grid', 'ui.grid.grouping','ui.grid.selection']);

app.controller('MainCtrl', ['$scope', '$http', '$log', 'i18nService', '$interval', 'uiGridGroupingConstants', function ($scope, $http, $log,i18NService, $interval, uiGridGroupingConstants) {
    $scope.langs = i18NService.getAllLangs();
    $scope.lang = 'de';
    i18NService.setCurrentLang('de');
    $scope.gridOptions = {
        rowSelection:true,
        enableFiltering: true,

        enableRowSelection: true, 
       enableFullRowSelection :true,
        enableSelectAll: true,
        selectionRowHeaderWidth: 35,
        rowHeight: 75,
        showGridFooter:true,
        treeRowHeaderAlwaysVisible: true,
        columnDefs: [

        { name: 'Trigraph',field:'ZeigeTrigraphen',width:'10%'},

        { name: 'Titel', field: 'Titel', cellTemplate: '<td style="word-wrap:break-word;padding:5px;">{{ COL_FIELD }}</td>' },

 { name: 'Ziel', field: 'Ziel', cellTemplate: '<td style="word-wrap:break-word;padding:5px;">{{ COL_FIELD }}</td>' },


        ],
        onRegisterApi: function (gridApi) {
            $scope.gridApi = gridApi;
        }
    };
    i18NService.setCurrentLang('de');

    $http.get('/api/Alarmkalender/HoleAlle').then(function (resp) {

        $scope.gridOptions.data = resp.data;
        $log.info(resp);
    });

html

<div class="container" ng-app="app">
@*<link rel="styleSheet" href="../../Scripts/ui-grid/ui-grid.min.css" />*@
<style>
    .grid {
        width: auto;
        height: 350px;
    }
</style>

<h2>Alarmmassnahmen</h2>
<div ng-controller="MainCtrl">

    <div id="grid1" ui-grid="gridOptions" ui-grid-grouping class="grid"></div>

        <button name="SpeichernButton" class="btn btn-success" id="btnSpeichern" type="submit" value="SpeichernButton"><i class="glyphicon glyphicon-save"></i> In Alarmkalender kopieren</button>

    <div id="grid2" ui-grid="gridOptions2" class="grid"></div>
</div>

有多种方法可以实现您的目标。我做了一个 Plunker 来演示一个可能的解决方案。

您可以在行模板上创建 ng-click 并收集所有行选择。您要么立即将它们加载到新网格中(如 Plunker 中所示),要么在单击外部按钮时将它们全部加载。

基本上分为三个步骤

首先修改row-Template

$templateCache.put('ui-grid/uiGridViewport',
  ...
  "<div ng-repeat=\"(rowRenderIndex, row) in rowContainer.renderedRows track by $index\"" +
  "ng-click=\"grid.appScope.addRowtoSelection(row)\"" +
  ...
);

然后您将 addRowtoSelection() 绑定到您的第一个网格并将选定的行推送到一个数组中。

all.relectedRows = [];
all.gridOptions = {
  ...
  appScopeProvider : {
    addRowtoSelection : function(row) {
        all.relectedRows.push(row.entity);
    },
  },
};

最后将该数组作为新数据绑定到第二个网格。

all.gridOptionsTwo = {
  data: 'all.relectedRows',
  ...
};

e:如果您想使用按钮而不是即时添加行,您可以使用 selectedRows 作为临时数组并在第二个网格中引用 selectedRowsData。查看更新后的 Plunker.

HTML

<button ng-click="all.addRowsToSecondGrid();">Add Rows</button>

JavaScript

    all.relectedRowsData = [];

    all.addRowsToSecondGrid = addRowsToSecondGrid;
    function addRowsToSecondGrid() {
      all.relectedRowsData = [];
      all.relectedRowsData = all.relectedRowsData.concat(all.relectedRows);
    }

    all.gridOptionsTwo = {
        data: 'all.relectedRowsData',
        ...

希望对您有所帮助。