在UI Grid数据刷新后继续选择



我在Web应用程序中使用UI-Grid。

一切正常,问题是当我刷新网格数据时,选择了选择。

在我选择一行时,在小提琴中,然后按刷新按钮删除UI-Grid选择。

jsfiddle:http://jsfiddle.net/mdawood1991/xyuotpe8/6/

html:

<div ng-controller="MyCtrl as controller">
    <button ng-click="controller.refreshData()" type="button">
    Refresh
  </button>
  <div ui-grid="controller.assetListGrid" ui-grid-selection></div>

</div>

控制器:

var myApp = angular.module('myApp', ["ui.grid", "ui.grid.selection"]);
//myApp.directive('myDirective', function() {});
//myApp.factory('myService', function() {});
myApp.controller("MyCtrl", function($scope) {
  var self = this;
  $scope.name = 'Superhero';
  self.assetListGrid = {};
  self.gridOptions = {
    enableFiltering: true,
    enableGridMenu: true,ang
    enableColumnMenus: false,
    enableRowSelection: true,
    enableSelectAll: false,
    multiSelect: false,
    enableHorizontalScrollbar: 1,
    columnDefs: [{
      name: 'assetId'
    }, {
      name: 'reference',
      enableHiding: false,
      width: 250,
      resizeable: true
    }],
    onRegisterApi: function(gridApi) {
      self.assetGridObject = gridApi;
      // register the onRowSelect Function here
      //this.assetGridObject.selection.on.rowSelectionChanged(null, function(row) {
      //   if (row.isSelected)
      // });
    },
    appScopeProvider: self
  }
  self.initGrid = function() {
    self.assetListGrid = self.gridOptions;
    self.assetListGrid.data = "controller.gridAssets"
  }
  self.loadInitData = function() {
    self.gridAssets = [{
      assetId: 1,
      reference: "Dawood"
    }, {
      assetId: 2,
      reference: "Dawood 2"
    }, {
      assetId: 3,
      reference: "Dawood 3"
    }, {
      assetId: 4,
      reference: "Dawood 4"
    }, ]
  }
  self.refreshData = function() {
    console.log("Data refresh")
    self.gridAssets = [{
      assetId: 1,
      reference: "Refresh"
    }, {
      assetId: 2,
      reference: "Refresh 2"
    }, {
      assetId: 3,
      reference: "Refresh 3"
    }, {
      assetId: 4,
      reference: "Refresh 4"
    }, ]
  }
  self.initGrid();
  self.loadInitData();
});

如何保持选择?

似乎我找到了一个解决方案:

我首先将选定的行放入临时对象中,当选择该行

  onRegisterApi: function(gridApi) {
    self.assetGridObject = gridApi;
    // register the onRowSelect Function here
    self.assetGridObject.selection.on.rowSelectionChanged(null, function(row) {
      if (row.isSelected) {
        self.assetGridObject.grid.appScope.selectedRow = row.entity;
      }
    });
  },

小提琴:http://jsfiddle.net/mdawood1991/02dpggyo/2/

然后,当数据刷新时,我正在检查是否选择了一行,如果选择了一行,我将从新数据数组中获取该行的最新值现在:

self.refreshData = function() {
  console.log("Data refresh")

  self.gridAssets = 
  [
    {assetId: 1,reference: "Refresh 1"},
    {assetId: 2,reference: "Refresh 2"},
    {assetId: 3,reference: "Refresh 3"}, 
    {assetId: 4,reference: "Refresh 4"}];
  if (self.selectedRow) 
  {
    console.log("Row is selected");

    //THIS LINE HERE I THINK IS THE KEY -
    self.assetGridObject.grid.modifyRows(self.gridAssets);

    // GET THE ROW FROM NEWLY LOADED DATA 
    var selectedRoww = null;
    for (var i = 0; i < self.gridAssets.length; i++) 
    {
      //COMPARING BASED ON MY asseId AS THIS IS THE VALUE THAT WILL NOT CHANGE IN MY GRID  - OTHER COLUMS CAN CHANGE
      if (self.gridAssets[i].assetId == self.selectedRow.assetId) 
      {
        selectedRoww = self.gridAssets[i];
      }
    }
    // THIS LINE HERE IS SELECTING THE ROW FROM THE GRID
    self.assetGridObject.selection.selectRow(selectedRoww);
  }
}

最新更新