ui-grid 数据刷新后保持选择 [英] Keep selection after ui-grid data refresh

问题描述

我在我的 Web 应用程序中使用 ui-grid.

一切正常，问题是当我刷新网格数据时，选择被删除.

在小提琴中，当我选择一行然后点击刷新按钮时，ui-grid 选择被删除.

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

HTML:

<button ng-click="controller.refreshData()" type="button">刷新<div ui-grid="controller.assetListGrid" ui-grid-selection></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 = '超级英雄';self.assetListGrid = {};self.gridOptions = {启用过滤:真，enableGridMenu: true,ang启用列菜单:假，enableRowSelection: 真，启用全选:假，多选:假，启用水平滚动条:1，列定义:[{名称:'资产ID'}, {name: '参考',启用隐藏:假，宽度:250，可调整大小:true}],onRegisterApi:函数(gridApi){self.assetGridObject = gridApi;//在这里注册 onRowSelect 函数//this.assetGridObject.selection.on.rowSelectionChanged(null, function(row) {//如果 (row.isSelected)//});},appScopeProvider:自我}self.initGrid = function() {self.assetListGrid = self.gridOptions;self.assetListGrid.data = "controller.gridAssets"}self.loadInitData = function() {self.gridAssets = [{资产 ID:1，参考:达伍德"}, {资产 ID:2，参考:达伍德2"}, {资产 ID:3，参考:达伍德3"}, {资产 ID:4，参考:达伍德4"}, ]}self.refreshData = function() {console.log("数据刷新")self.gridAssets = [{资产 ID:1，参考:刷新"}, {资产 ID:2，参考:刷新2"}, {资产 ID:3，参考:刷新3"}, {资产 ID:4，参考:刷新4"}, ]}self.initGrid();self.loadInitData();});

如何保持选择?

解决方案

我好像找到了解决方案:

我首先将选定的行放入一个临时对象中，当该行被选中时

 onRegisterApi: function(gridApi) {self.assetGridObject = gridApi;//在这里注册 onRowSelect 函数self.assetGridObject.selection.on.rowSelectionChanged(null, function(row) {如果(row.isSelected){self.assetGridObject.grid.appScope.selectedRow = row.entity;}});},

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

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

self.refreshData = function() {console.log("数据刷新")self.gridAssets =[{assetId: 1,reference: "Refresh 1"},{assetId: 2,reference: "Refresh 2"},{assetId: 3,reference: "Refresh 3"},{assetId: 4,reference: "Refresh 4"}];如果(self.selectedRow){console.log("行被选中");//这条线在这里我认为是关键 -self.assetGridObject.grid.modifyRows(self.gridAssets);//从新加载的数据中获取行var selectedRoww = null;for (var i = 0; i < self.gridAssets.length; i++){//根据我的资产进行比较，因为这是不会在我的网格中改变的值 - 其他列可以改变if (self.gridAssets[i].assetId == self.selectedRow.assetId){selectedRoww = self.gridAssets[i];}}//这里的这一行是从网格中选择行self.assetGridObject.selection.selectRow(selectedRoww);}}

I am using ui-grid in my web application.

Everything is working fine, the issue is when I refresh the grid data the selection gets removed.

In the Fiddle when I select a row and then hit the refresh the button the ui-grid selection gets removed.

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>

Controller:

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();

});

How do I keep the selection?

解决方案

Seems like I have found a solution:

What I did was first I put the selected row inside a temporary object, when the row is selected

  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;
      }
    });

  },

FIDDLE: http://jsfiddle.net/mdawood1991/02dpggyo/2/

Then when the data is refreshed I am checking if a row is selected or not, if it a row is selected I am getting the latest value of that row from the Array of new data, this what the refresh data method looks like now:

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);

  }

}

这篇关于ui-grid 数据刷新后保持选择的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！