Угловой пользовательский интерфейс.сетка. Перемещение строк между двумя сетками

Недавно я начал использовать angular-ui-grid (http://ui-grid.info/) и попытался создать решение для перемещения строк между двумя разными сетками (именно это решение, но это делается на сетке кендо - http://jsfiddle.net/OnaBai/2qXKy/).

Поскольку я новичок в java-скрипте, мне не удалось воссоздать это в angular-ui-grid. Возникли проблемы с назначением выбранных строк grid1 в grid2 и удалением выбранных строк из grid1.

У кого-нибудь есть готовое решение?

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

РЕДАКТИРОВАТЬ: я добавил быстрый НЕ работающий jsfiddle (http://jsfiddle.net/LimoJoe/n9h7xmw3/4/)


person LimoJoe    schedule 26.06.2015    source источник


Ответы (2)


Вот JSBin, как можно управлять им с помощью двух контроллеров и службы. Он использует ngGrid, но в этом случае все равно должен быть достаточно похож на ui.grid.

Не то чтобы я думал, что ваши проблемы связаны с тем, как вы настраиваете gridOptions, в вашем примере я не видел, где вы установили свойство gridOptions '`selectedItems':

Смотрите правки:

 this.gridOptions = {
     data: 't2.items',
     /** NG Grid way
      selectedItems: [] 
     */
     /** UI Grid way */
     enableRowSelection: true,
     enableSelectAll: true,
     multiSelect: true,
     onRegisterApi: function(gridApi) {
         $scope.gridApi = gridApi;
         gridApi.selection.on.rowSelectionChanged($scope, function(rows) {
             angular.copy(gridApi.selection.getSelectedRows(), ctl.selectedItems);
         });
      }
 };

Редактировать:

Основываясь на ваших комментариях, вот ответвление статья, на которую вы ссылались, plunkr, которая является обновленной версией. Надеюсь, вы сможете использовать это как отправную точку.

В основном, чтобы использовать ui-grid, начиная с этой статьи, вам необходимо обновить версию angular и UI-сетка.


Редактировать:

Хорошо, ваш JsBin был очень близок, я его отредактировал, вот новая версия, теперь это обновленная версия моего оригинального JsBin, я думаю, что мы уже там!

person Matt    schedule 26.06.2015
comment
Я смог сделать то же самое с ngGrid, где использовал этот источник (javahonk.com/). У меня есть проблемы, особенно с ui-grid, может быть, я что-то упустил. Для selectedItems я настраиваю $scope.mySelections. onRegisterApi: function (gridApi) { $scope.gridApi = gridApi; gridApi.selection.on.rowSelectionChanged($scope,function(rows){ $scope.mySelections = gridApi.selection.getSelectedRows(); }); - person LimoJoe; 26.06.2015
comment
Итак, для Grid1 у меня есть $scope.mySelections1 со всеми выбранными элементами, а для Grid2 у меня есть $scope.mySelections2. Так что с его помощью я мог бы правильно добавлять и удалять выбранные элементы из/в обе сетки. Бот так не умеет. - person LimoJoe; 26.06.2015
comment
Спасибо, Мэтт, теперь я могу выпить пива :) (U2) ... я добавлю в окончательную версию также возможность пакетной обработки (как только пользователь выберет все значения, он также обновит выбранный список) ... но вы ответите на мой вопрос отлично ;) - person LimoJoe; 26.06.2015
comment
Наслаждайтесь этим пивом, я буду делать то же самое! Заботиться! - person Matt; 26.06.2015

Окончательное решение здесь JSBin с добавленной функцией обратного вызова gridApi.selection.on.rowSelectionChangedBatch, которую пользователь может использовать с помощью кнопки "Выбрать все" и выбранный список будет обновлен.

person LimoJoe    schedule 26.06.2015