Angular - 數據表點擊行事件

Question

我正在使用 AngularJS 和 angular-datatable，我想連續處理該事件，我已經設置了控制器來監聽事件，但它不起作用。 我的代碼是：

html

<div  class="panel panel-flat">
    <div class="panel-heading">
        <h6 class="panel-title">Planilla</h6>
    </div>
    <div class="panel-heading"> 
    <table class="table datatable-basic table-hover" datatable="ng" dt-options="empleadoList.dtOptions"  dt-column-defs="empleadoList.dtColumnDefs" >
        <thead>
            <tr>
                <th style="width: 30px;">Nro.</th>  
                <th>Nombre Completo</th>
                <th class="col-md-2">DNI</th>
                <th class="col-md-2">Celular</th>
                <th class="col-md-2">Teléfono</th>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="empleado in empleadoList.empleados">
                <td style="width: 30px;">{{$index + 1}}</td>
                <td> <span class="text-muted"><i class="icon-user"></i>{{empleado.apellidoPaterno}} {{empleado.apellidoMaterno}} {{empleado.nombre}}</span></td>
                <td><span class="text-success-600"><span class="status-mark border-blue position-left"></span>{{empleado.dni}}</span></td>
                <td><span class="text-success-600"><i class="icon-mobile position-left"></i> {{empleado.celular}}</span></td>
                <td><h6 class="text-semibold"><i class="icon-phone position-left"></i> {{empleado.telefono}}</h6></td>
            </tr>
        </tbody>
    </table>
    </div>
</div>

控制器.js

App.controller('EmpleadoListController', function($scope,$resource,EmpleadoService,DTOptionsBuilder,DTColumnDefBuilder) {

$scope.dtOptions = DTOptionsBuilder.newOptions()
    .withDisplayLength(10)
    .withOption('bLengthChange', false)
    .withPaginationType('full_numbers')
    .withOption('rowCallback', rowCallback);
$scope.dtColumnDefs = [
                   DTColumnDefBuilder.newColumnDef(0),
                   DTColumnDefBuilder.newColumnDef(1),
                   DTColumnDefBuilder.newColumnDef(2),
                   DTColumnDefBuilder.newColumnDef(3),
                   DTColumnDefBuilder.newColumnDef(4)
               ];

function rowCallback(nRow, aData, iDisplayIndex, iDisplayIndexFull) {
    $('td', nRow).unbind('click');
    $('td', nRow).bind('click', function() {
        $scope.$apply(function() {
            console.log('click row');
        });
    });
    return nRow;
}

EmpleadoService.fetch().then(
        function(response){
            return $scope.empleadoList = { empleados: response.data};
        }, 
        function(errResponse){
            console.error('Error while fetching users');
            return $q.reject(errResponse);
        }
);
});

應用程序.js

'use strict';
var App = angular.module('myApp', ['ngRoute','ngResource','datatables']);
App.config(function($routeProvider) {
  var resolveEmpleados = {
    empleados: function (EmpleadoService) {
    return EmpleadoService.fetch();
  }
 };

$routeProvider
 .when('/planilla', {
    controller:'EmpleadoListController as empleadoList',
    templateUrl:'static/js/planilla.html',
  });
});

謝謝大家。

Answer 1

由於您使用的是角度方式進行渲染，為什么不也使用ng-click ：

<tr ng-repeat="empleado in empleadoList.empleados" ng-click="click(empleado)">

$scope.click = function(empleado) {
  console.log(empleado.apellidoPaterno+' clicked')
}

Answer 2

我看到您錯過了代碼中的功能：

function someClickHandler(info) {
    vm.message = info.id + ' - ' + info.firstName;
}

function rowCallback(nRow, aData, iDisplayIndex, iDisplayIndexFull) {
    // Unbind first in order to avoid any duplicate handler (see https://github.com/l-lin/angular-datatables/issues/87)
    $('td', nRow).unbind('click');
    $('td', nRow).bind('click', function() {
        $scope.$apply(function() {
            vm.someClickHandler(aData);
        });
    });
    return nRow;
}

不要忘記這一點：

vm.someClickHandler = someClickHandler;

你可以在這里閱讀文檔

希望能幫到你。

Answer 3

你快到了。 行元素可從行回調函數中作為 nRow 訪問。

因此，例如，您可以通過如下切換所選類來更改行的顏色

$scope.$apply(function() {
      $(nRow).toggleClass('selected');
      // do your stuff with the row here
});

nRow 使您可以訪問行元素。

然后是 aData ，它為您提供一個包含該行中 td 或列元素值的數組。

$scope.$apply(function() {
      console.log(aData);
      // do your stuff with the row here
});

Answer 4

也許這段代碼可以幫助我們：

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-row-click-event',
  templateUrl: 'row-click-event.component.html'
})
export class RowClickEventComponent implements OnInit {
  message = '';
  dtOptions: DataTables.Settings = {};

  constructor() { }

  someClickHandler(info: any): void {
    this.message = info.id + ' - ' + info.firstName;
  }

  ngOnInit(): void {
    this.dtOptions = {
      ajax: 'data/data.json',
      columns: [{
        title: 'ID',
        data: 'id'
      }, {
        title: 'First name',
        data: 'firstName'
      }, {
        title: 'Last name',
        data: 'lastName'
      }],
      rowCallback: (row: Node, data: any[] | Object, index: number) => {
        const self = this;
        // Unbind first in order to avoid any duplicate handler
        // (see https://github.com/l-lin/angular-datatables/issues/87)
        $('td', row).unbind('click');
        $('td', row).bind('click', () => {
          self.someClickHandler(data);
        });
        return row;
      }
    };
  }
}
```

Link where i found this example:
[Link github datatables examples][1]


  [1]: https://github.com/l-lin/angular-datatables/blob/master/demo/src/app/advanced/row-click-event.component.ts