我使用角度ui-grid来显示表格数据。
可以编辑单元格数据。我注意到如果列被排序,然后如果我们编辑单元格,则排序被踢入并移动行。我想在单元格编辑上禁用排序,有没有办法做到这一点。我在下面提供了plunker链接。在plunk中,首先按升序对第一列进行排序,然后将a2的值编辑为x,然后在单元格外单击,您将看到现在已将eidted行移动到最后一行。我想阻止编辑排序,如果我们在编辑时删除所有现有的活动列排序,基本上就可以了。
<div id="grid1" ui-grid="gridOptions" class="grid" ui-grid-edit > </div>
var app = angular.module('app', ['ngAnimate', 'ngTouch', 'ui.grid','ui.grid.edit',
'ui.grid.selection',
'ui.grid.rowEdit', 'ui.grid.cellNav']);
app.controller('MainCtrl', function($scope) {
$scope.gridOptions = {
enableSorting: true,
columnDefs: [
{ field: 'A' },
{ field: 'B' },
{ field: 'C', enableSorting: false }
],
onRegisterApi: function( gridApi ) {
$scope.gridApi = gridApi;
}
};
$scope.gridOptions.data = [{'A':'a1', 'B':'b1', 'C':'c1'}, {'A':'a3', 'B':'b3', 'C':'c3'}, {'A':'a2', 'B':'b2', 'C':'c2'}];
});
see Plunk for the behavior http://plnkr.co/edit/17H5K6nOEz9gf4Keeap9?p=preview
从beginEditCell
回调中,您可以知道用户何时正在编辑。您可以利用保存和恢复ui-grid状态的优势。 Save and Restore Ui-grid state从afterCellEdit
或cancelCellEdit
回调中,您可以知道用户何时完成编辑,然后您可以恢复。
将enableSorting设置为false
enableSorting: false
我找到了一种通过简单的黑客来解决这个问题的方法。
当有notifyDataChange事件被触发并且调用processRowsCallback函数并且processRowsCallback定义如下时,由于回调函数(registerDataChangeCallback)而发生排序。
Grid.prototype.processRowsCallback = function processRowsCallback( grid ){
grid.queueGridRefresh();
};
这里Grid是一个工厂,processRowsCallback函数在工厂下定义,它调用grid.queueGridRefresh()并调用sort,并在网格中的数据更改之后发生排序。
所以,我想通过将Grid工厂注入我创建的工厂(extendedGridFactory)来重写原型函数processRowsCallBack,并复制相同的函数但是检查条件,如果网格不在editmode中并且调用grid.queueGridRefresh() ;如下。
app.factory('extendedGridFactory', ['Grid', '$rootScope', function (Grid, rootScope) {
var extendedGrid = Object.create(Grid);
extendedGrid.prototype.processRowsCallback = function processRowsCallback(grid) {
if (!rootScope.isInEditMode) {
grid.queueGridRefresh();
}
};
return extendedGrid;
}]);
很棒,到目前为止它的工作正常。
如果您发现此代码有任何问题,请告诉我。 :)