-1

生徒の情報を一覧表示するために angular-datatables を使用しています。すべてのデータをフェッチし、angularjs を使用してデータを繰り返すのではなく、すべての検索、並べ替え、ページングなどにサーバー側の ajax 実装を実装したいと考えています。並べ替え、検索、ページングは​​正常に機能しています。ng-clickしかし、特定の行アクションをクリックすると、イベントをバインドできません。

これは私の見解です： これが私の見解です

これは私のjavascriptソースコードです: これは私のJavaScriptソースコードです

<div ng-app="myApp"> 
  <div ng-controller="OrganizationController">
    <table id="entry-grid" datatable="" dt-options="dtOptions" 
           dt-columns="dtColumns" class="table table-hover"></table>
  </div>
</div>

<script>
    var app = angular.module('myApp',['datatables']);
    app.controller('OrganizationController', BindAngularDirectiveCtrl);
    function BindAngularDirectiveCtrl($scope, $compile, DTOptionsBuilder, DTColumnBuilder) {
        var vm = this;
        vm.message = '';
        vm.edit = edit;
        vm.dtInstance = {};
        vm.persons = {};
        $scope.dtColumns = [
            DTColumnBuilder.newColumn("organization_name").withOption('organization_name'),
            DTColumnBuilder.newColumn(null).withTitle('Actions').notSortable()
                    .renderWith(actionsHtml)
        ]
        $scope.dtOptions = DTOptionsBuilder.newOptions().withOption('ajax', {
                    dataSrc: "data",
                    url: "organizations",
                    type:"get"
                })
                .withOption('processing', true) //for show progress bar
                .withOption('serverSide', true) // for server side processing
                .withPaginationType('full_numbers') // for get full pagination options // first / last / prev / next and page numbers
                .withDisplayLength(2) // Page size
                .withOption('aaSorting',[0,'asc'])
        function edit() {
            console.log('hi')
        }

        function actionsHtml(data, type, full, meta) {
            vm.persons[data.id] = data;
            return '<button class="btn btn-warning" ng-click="edit()">' +
                    '   <i class="fa fa-edit"></i>' +
                    '</button>';
        }
    }

</script>
4

2 に答える 2

2

追加しませんでしたwithOption("rowCallback",fn)

<script>
    var app = angular.module('myApp',['datatables']);
    app.controller('OrganizationController', BindAngularDirectiveCtrl);
    function BindAngularDirectiveCtrl($scope, $compile, DTOptionsBuilder, DTColumnBuilder) {
        var vm = this;
        vm.message = '';
        vm.edit = edit;
        vm.dtInstance = {};
        vm.persons = {};
        $scope.dtColumns = [
            DTColumnBuilder.newColumn("organization_name").withOption('organization_name'),
            DTColumnBuilder.newColumn(null).withTitle('Actions').notSortable()
                    .renderWith(actionsHtml)
        ]
        $scope.dtOptions = DTOptionsBuilder.newOptions().withOption('ajax', {
                    dataSrc: "data",
                    url: "organizations",
                    type:"get"
                })
                .withOption('rowCallback', rowCallback)
                .withOption('processing', true) //for show progress bar
                .withOption('serverSide', true) // for server side processing
                .withPaginationType('full_numbers') // for get full pagination options // first / last / prev / next and page numbers
                .withDisplayLength(2) // Page size
                .withOption('aaSorting',[0,'asc'])
        function edit() {
            console.log('hi')
        }

        function actionsHtml(data, type, full, meta) {
            vm.persons[data.id] = data;
            return '<button class="btn btn-warning" ng-click="edit()">' +
                    '   <i class="fa fa-edit"></i>' +
                    '</button>';
        }

      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() {
               alert("You've clicked row," + iDisplayIndex);
            });
        });
        return nRow;
    }

    }

</script>
于 2016-04-06T05:04:58.270 に答える
2

角度データ テーブル行の特定の DOM 要素にクリック イベントをバインドする場合は、任意の CSS セレクターを使用してその要素を検索 (jQuery) します。例えば ​​-

HTML

<table id='table' datatable [dtOptions]="dtOptions" class="table table-sm table-striped table-bordered" cellspacing="0" width="100%">

Angular(v4) コンポーネント-

export class ExampleComponent implements OnInit {
    dtOptions: DataTables.Settings = {};

    ngOnInit() {
        //Starts Angular jQuery DataTable server side processing settings
        let ajaxSettings: any = {
            settings: {
                ajax: {
                    ...
                },
                serverSide: true,
                searchDelay: 800,
                deferRender: true,
                processing: true,
                autoWidth: false,
                stateSave: false,
                searching: true,
                aoColumns: [
                    //Table column definition
                    {
                        //Action Column
                        sTitle: 'Action',
                        sWidth: "20%",
                        bSearchable: false,
                        bSortable: false,
                        mRender: (data, type, full) => {
                            return "<a href='javascript:void(0);'  class='custombtn btn btn-sm btn-primary'><span class='fa fa-paper-plane-o'></span>Action Button</a>";
                        }
                    }
                ],
                fnServerParams: function (data) {

                },
                initComplete: () => {

                },
                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)
                    var element = $('td', row).find('a.custombtn');
                    if (element) {
                        element.unbind('click');
                        element.bind('click', () => {
                            self.someClickHandler(data, index);
                        });
                    }
                    return row;
                }
            }
        };

        this.dtOptions = ajaxSettings.settings;
        //Ends Angular jQuery DataTable server side processing settings
    }

//Will be called on click of anchor tag which has the class "custombtn"
    someClickHandler(info: any, index: number): void {
        alert(JSON.stringify(info) + ' index =>' + index);
    }

}
于 2018-01-16T09:09:18.593 に答える