ui-grid数据刷新后继续选择 [英] Keep selection after ui-grid data refresh
问题描述
我在Web应用程序中使用ui-grid.
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.
在小提琴中,当我选择一行然后单击刷新按钮时,将删除ui-grid选择.
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/
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();
});
如何保留选择?
推荐答案
似乎我找到了解决方案:
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;
}
});
},
字段: http://jsfiddle.net/mdawood1991/02dpggyo/2/
然后,当刷新数据时,我正在检查是否选择了某行,如果选中了某行,那么我正在从新数据数组中获取该行的最新值,这就是刷新数据方法的样子现在:
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屋!