我对新添加的行有问题。它继承了网格中的行(按钮和行为)。代码正在添加一个新行,但我想在AddOverride()函数中添加一个行。就像一个带有保存和取消按钮的按钮。当我添加一个新行时。新行>具有更新和删除按钮。当我尝试在新添加的行上点击更新时,它正在调用服务进行更新。
-
HTML
<button id="addNew" ng-click="addOverride()" type="button" class="btn
btn-primary">Add Rank</button>
<div ui-grid-auto-resize ui-grid="gridOptions" ui-grid-
pagination class="gridRank" style="height: 370px !important;"></div>
填充网格
$scope.gridOptions = {
columnDefs: [
{
field: 'rankID', displayName: '', visible: false
},
{
name: 'rankDesc', field: 'rankDesc', displayName: 'Rank Desc',
cellTemplate: '<div ng-if="!row.entity.editrow">{{COL_FIELD}}</div><div ng-if="row.entity.editrow"><input type="text" style="height:30px" ng-model="MODEL_COL_FIELD"</div>', width: 350
},
{
field: 'createTime', displayName: 'Create Time', cellFilter: 'date:\'yyyy-MM-dd\'', width: 200
},
{
field: 'createUserID', displayName: 'Create UserID', enableFiltering: false, enableSorting: false, enableColumnMenu: false, width: 130
},
{
field: 'updateTime', displayName: 'Update Time', cellFilter: 'date:\'yyyy-MM-dd\'', width: 200
},
{
field: 'updateUserID', displayName: 'Update UserID', enableFiltering: false, enableSorting: false, enableColumnMenu: false, width: 130
},
{
name: 'Action', field: 'edit', enableFiltering: false, enableSorting: false, enableColumnMenu: false,
cellTemplate: '<div><button ng-show="!row.entity.editrow" ng-click="grid.appScope.edit(row.entity)"><span class="glyphicon glyphicon-edit"></span></button>' + ' ' + //Edit Button
'<button ng-show="row.entity.editrow" ng-click="grid.appScope.saveRow(row.entity)"><span class="glyphicon glyphicon-ok"></span></button>' + ' ' +//Save Button
'<button ng-show="row.entity.editrow" ng-click="grid.appScope.cancelEdit(row.entity)"><span class="glyphicon glyphicon-remove"></span></button>' + ' ' + //Cancel Button
'<button ng-show="!row.entity.editrow" ng-click="grid.appScope.Delete(row.entity)"><span class="glyphicon glyphicon-trash"></span></button>' + ' ' + //Delete Button
'</div>', width: 75
}],
data: response.data.resultLists.cookRankList,
paginationPageSizes : [10, 20, 30],
paginationPageSize : 10,
multiSelect: false
};
添加新行
$scope.addOverride = function () {
var emptyData = [
{
field: 'rankID', displayName: '', visible: false
},
{
name: 'rankDesc', field: 'rankDesc', displayName: 'Rank Desc',
cellTemplate: '<div ng-if="!row.entity.editrow">{{COL_FIELD}}</div><div ng-if="row.entity.editrow"><input type="text" style="height:30px" ng-model="MODEL_COL_FIELD"</div>', width: 350
},
{
field: 'createTime', displayName: 'Create Time', cellFilter: 'date:\'yyyy-MM-dd\'', width: 200
},
{
field: 'createUserID', displayName: 'Create UserID', enableFiltering: false, enableSorting: false, enableColumnMenu: false, width: 130
},
{
field: 'updateTime', displayName: 'Update Time', cellFilter: 'date:\'yyyy-MM-dd\'', width: 200
},
{
field: 'updateUserID', displayName: 'Update UserID', enableFiltering: false, enableSorting: false, enableColumnMenu: false, width: 130
},
{
name: 'Action', field: 'add', enableFiltering: false, enableSorting: false, enableColumnMenu: false,
cellTemplate: '<div><button ng-click="grid.appScope.saveRow(row.entity)"><span class="glyphicon glyphicon-ok"></span></button>' + ' ' +//Save Button
'<button ng-click="grid.appScope.cancelEdit(row.entity)"><span class="glyphicon glyphicon-remove"></span></button>' + ' ' + //Cancel Button
'</div>', width: 75
}
];
$scope.gridOptions.data.unshift(emptyData);
};
答案 0 :(得分:0)
添加新行时,它应该是一个与网格中其他对象具有相同属性的对象。您正在将列定义推送到一行,因此网格会混淆。
应缩短添加功能,只需将新对象推送到数据阵列中即可:
$scope.addOverride = function () {
$scope.gridOptions.data.unshift({
rankID: "",
// shortened
});
};
然后,对于模板,您可以创建两个变量以保持整洁。或者只是把它们放在一起。基本上,您希望模板在最初不会出现的某些字段上切换。我猜createTime
就是这样一个领域。通常这将是一个id。如果需要,您还可以创建一个新的隐藏字段。
一个轻量级示例:
var cellTemplateReg = '<div ng-if="row.entity.createTime">Existing</div>';
var cellTemplateNew = '<div ng-if="!row.entity.createTime">New</div>';
columnDefs: [ //shortened
{
name: 'Action,
field: 'action',
enableFiltering: false,
enableSorting: false,
enableColumnMenu: false,
width: 200,
cellTemplate: cellTemplateReg + cellTemplateNew
}
]