如何在ng网格的顶行显示新添加的记录
How to show newly added record in top row of ng-grid?
我有一个ng网格,当我向其中添加一条记录时,该行会插入到网格的底部,我想在网格的顶部显示新添加的行,这样用户就可以知道添加了哪些数据。
这是我的app.js
var app = angular.module('myApp', ['ngGrid']);
app.controller('MyCtrl', function($scope, $http) {
$scope.filterOptions = {
filterText: "",
useExternalFilter: true
};
$scope.totalServerItems = 0;
$scope.pagingOptions = {
pageSizes: [5, 10, 20],
pageSize: 5,
currentPage: 1
};
$scope.setPagingData = function(data, page, pageSize){
var pagedData = data.slice((page - 1) * pageSize, page * pageSize);
$scope.myData = pagedData;
$scope.totalServerItems = data.length;
if (!$scope.$$phase) {
$scope.$apply();
}
};
$scope.getPagedDataAsync = function (pageSize, page, searchText) {
setTimeout(function () {
var data;
if (searchText) {
var ft = searchText.toLowerCase();
$http.get('largeLoad.json').success(function (largeLoad) {
data = largeLoad.filter(function(item) {
return JSON.stringify(item).toLowerCase().indexOf(ft) != -1;
});
$scope.setPagingData(data,page,pageSize);
});
} else {
$http.get('largeLoad.json').success(function (largeLoad) {
$scope.setPagingData(largeLoad,page,pageSize);
});
}
}, 100);
};
$scope.getPagedDataAsync($scope.pagingOptions.pageSize, $scope.pagingOptions.currentPage);
$scope.$watch('pagingOptions', function (newVal, oldVal) {
if (newVal !== oldVal && newVal.currentPage !== oldVal.currentPage) {
$scope.getPagedDataAsync($scope.pagingOptions.pageSize, $scope.pagingOptions.currentPage, $scope.filterOptions.filterText);
}
}, true);
$scope.$watch('filterOptions', function (newVal, oldVal) {
if (newVal !== oldVal) {
$scope.getPagedDataAsync($scope.pagingOptions.pageSize, $scope.pagingOptions.currentPage, $scope.filterOptions.filterText);
}
}, true);
$scope.edit = function (row) {
row.entity.edit = !row.entity.edit;
};
$scope.gridOptions = {
data: 'myData',
enableRowSelection: true,
showGroupPanel: true,
enableCellSelection: false,
jqueryUIDraggable: true,
enablePaging: true,
showFooter: true,
totalServerItems:'totalServerItems',
pagingOptions: $scope.pagingOptions,
filterOptions: $scope.filterOptions,
columnDefs: [{
field: 'nm',
displayName: 'Name',
cellTemplate: '<div class="ngCellText"><div ng-show="!row.entity.edit">{{row.getProperty(col.field)}}</div>' +
'<div ng-show="row.entity.edit" class="ngCellText"><input type="text" ng-model="row.entity.nm"/></div></div>'
},
{
field: 'cty',
displayName: 'city',
cellTemplate: '<div class="ngCellText"><div ng-show="!row.entity.edit">{{row.getProperty(col.field)}}</div>' +
'<div ng-show="row.entity.edit" class="ngCellText"><input type="text" ng-model="row.entity.cty"/></div></div>'
},
{
field: 'hse',
displayName: 'Address',
cellTemplate: '<div class="ngCellText"><div ng-show="!row.entity.edit">{{row.getProperty(col.field)}}</div>' +
'<div ng-show="row.entity.edit" class="ngCellText"><input type="text" ng-model="row.entity.hse"/></div></div>'
},
{
field: 'yrs',
displayName: 'PinCode',
cellTemplate: '<div class="ngCellText"><div ng-show="!row.entity.edit">{{row.getProperty(col.field)}}</div>' +
'<div ng-show="row.entity.edit" class="ngCellText"><input type="text" ng-model="row.entity.yrs"/></div></div>'
},
{
displayName: 'Edit',
cellTemplate: '<button id="editBtn" type="button" class="btn btn-primary" ng-click="edit(row)" >Modify</button> '
},
{
displayName: 'Remove',
cellTemplate: '<button id="removebtn" type="button" class="btn btn-primary" ng-click="removeRow($index)" >Remove</button> '
}
]
};
$scope.removeRow = function() {
var index = this.row.rowIndex;
$scope.gridOptions.selectItem(index, false);
$scope.myData.splice(index, 1);
};
这是我的addRow
函数;当这个函数被执行时,一行被插入到网格的底部,我希望每当点击添加按钮时,这个新行都显示在最顶部
$scope.addRow = function() {
$scope.myData.push({nm: 'abc', cty: 0 , hse:'abcd' , yrs:2014});
};
});
这是我在plunker上的代码:http://plnkr.co/edit/QbsQ6uDgNxts9TUMERj2?p=info
当您将数据推入数组时,javascript总是将其放在最后。一个可能的解决方案是使用unshift
而不是push
:
unshift()方法将新项添加到数组的开头,并且返回新的长度。
相关文章:
- 将新对象添加到本地存储
- 在Knockout中将新项添加到对象数组
- 为新对象添加函数,将对象添加到数组中.理解困难'这'关键字
- 如何将新的
- 添加到
- 使用JavaScript单击
- 添加到
- 将新行添加到localStorage变量中
- 从HTML表单中获取计算得到的JavaScript数据,并将其作为新元素添加到相同的表单操作中以使用PHP保存
- 当上一行/当前行被填充时,将新行添加到HTML表中
- Regex用于在特定条件下为新句子添加空格或句号
- 什么'在javascript中将新方法添加到对象中的区别是什么
- 当新行添加到表中时,使用AJAX更新页面
- 将新行添加到数据库时的 Javascript 警报
- 将新时区添加到时刻.js时区
- 有没有办法让 Javascript 在将新属性添加到给定对象时抛出错误
- 如何创建具有预定义值的下拉列表,但也应该有将新值添加到列表中的选项
- 将新对象添加到 chrome 本地存储
- 通过 Javascript 将新对象添加到 JSON 文件中
- 如何将新用户添加到我的用户数据库对象中
- 数据表 sDom 质询将新元素添加到表的左下角
- 使用 contructor 参数将新属性添加到原型
- 如何将新项目添加到 srt 文件中