NG-电网如何启用编辑和删除按钮电网、按钮、编辑、NG

2023-09-13 04:26:07 作者:花開、蔠会敗

我还是新的角度和学习有关ngGrid。我有一个基本的NG-电网与调度的一些数据。我有添加,编辑和删除按钮在网格的底部。

I am still new to Angular and learning about the ngGrid. I have a basic ng-grid with some data on schedules. I have Add, Edit and Delete buttons at the bottom of the grid.

我要禁用编辑和加载网格时默认情况下删除按钮。

I want to disable the Edit and Delete buttons by default when the grid is loaded.

我想使这些按钮选择从NG格的任何行的时候。

I would like to enable those buttons when any row from the ng-grid is selected.

我已经能够实现在一个HTML表格此功能,但不是NG-网格。

I have been able to implement this functionality on a HTML table, but not a ng-grid.

下面是我的HTML。

<div class="gridStyle" ng-grid="gridOptions"><!--ng-grid-->
 </div>
<table><!--HTML table-->
<thead>
 <tr>
  <th>Enabled</th>
  <th>Recurrence</th>
  <th>Type</th>
  <th>Protection</th>
  <th>Estimated Duration</th>
  <th>Priority</th>
  <th>Description</th>
 </tr>
</thead>
<tbody>
 <tr class="{{selectedClass(sched)}}" ng-click="selected($event,$index,sched)" ng-dblclick="openModal(sched)" ng-repeat="sched in scheduleData.scheduleList">
  <td>...</td>
  <td>...</td>
  <td>...</td>
  <td>...</td>
  <td>...</td>
  <td>...</td>
  <td>...</td>
 </tr>
</tbody>
</table>
<button ng-click="openAddModal()">Add</button>
<button ng-click="openModal(getSelected())" ng-disabled="!singleSelection()">Edit</button>
<button ng-click="deleteSchedules()" ng-disabled="!somethingSelected()">Death to Schedules!</button>
<button ng-click="deleteAllSchedules()" ng-disabled="">Schedule Extermination!</button>

这是我的app.js

And here is my app.js

$scope.gridOptions = {
  data: 'scheduleData.scheduleList',
  columnDefs: [
               ...                    
  ],
  enableCellSelection: true,
  enableSorting: true,
  enableColumnResize: true,
  enableColumnReordering: true,
  showGroupPanel: true,
  showColumnMenu: true,
  showFilter: true,
  showFooter: true
};

我怎么会去在ngGrid实现相同的吗?

How would I go about implementing the same in ngGrid too?

推荐答案

您需要做一些简单的事情...

You will need to do a few simple things...

以下添加到您的gridOptions:

Add the following to your gridOptions:

selectedItems: $scope.selections,
afterSelectionChange: function() {
    if($scope.selections != null){
        $scope.disabled = true;
    } else {
        $scope.disabled = false;
    }
 }

使用NG-禁用你的元素=已禁用,并确保您设置$ scope.disabled =真正的开始。

Use ng-disabled="disabled" on your elements and make sure that you set $scope.disabled = true to begin with.

下面是一个 plunker 获得一个更好的解释

Here is a plunker for a better explanation

 
精彩推荐
图片推荐