Angularjs 数据表 - rowCallback 事件

Question

有人可以帮助我使用 rowCallback。问题是，我有一个 table，您可以单击 table 行的任意位置以打开所单击项目的信息。在第一个 TD 上，我设置了复选框。但是当我选中复选框时，我不想打开信息。这是更好解释的图片

我的代码

var vm = this;
    vm.selected = {};
    vm.selectAll = false;
    vm.toggleAll = toggleAll;
    vm.toggleOne = toggleOne;

    var titleHtml = '<input type="checkbox" ng-model="showCase.selectAll" ng-click="showCase.toggleAll(showCase.selectAll, showCase.selected)">';


    function getUserTokenFromLocalStorage(localStorage) {
        var authData = [];
        for (key in localStorage) {
            if (key == "ls.authorizationData") {
                authData = localStorage[key];
            }

        }

        var jsonObj = JSON.parse(authData);
        return jsonObj.token;
    };


    var vm = this;
    vm.message = '';
    vm.someClickHandler = someClickHandler;
    vm.dtOptions = DTOptionsBuilder.newOptions()
        .withOption('ajax', {
            // Either you specify the AjaxDataProp here
            // dataSrc: 'data',
            url: serviceBase + 'test',
            type: 'POST',
            headers: {
                'xtoken': 'Bearer ' + getUserTokenFromLocalStorage(localStorage)
            }
        })
        // or here
        .withDataProp('data')
        .withOption('processing', true)
        .withOption('serverSide', true)
        .withOption('rowCallback', rowCallback)
        .withOption('createdRow', function(row, data, dataIndex) {
            // Recompiling so we can bind Angular directive to the DT
            $compile(angular.element(row).contents())($scope);
        })
        .withOption('headerCallback', function(header) {
            if (!vm.headerCompiled) {
                // Use this headerCompiled field to only compile header once
                vm.headerCompiled = true;
                $compile(angular.element(header).contents())($scope);
            }
        })
        .withPaginationType('full_numbers')


    vm.dtColumns = vm.dtColumns = [
        DTColumnBuilder.newColumn(null).withTitle(titleHtml).notSortable()
        .renderWith(function(data, type, full, meta) {
            vm.selected[full.id] = false;
            return '<input type="checkbox" ng-model="showCase.selected[' + data.id + ']" ng-click="showCase.toggleOne(showCase.selected)">';
        }), //don't change state when click on this TD, only check checkbox.
        DTColumnBuilder.newColumn('id').withTitle('ID'),
        DTColumnBuilder.newColumn('type').withTitle('Type'),
        DTColumnBuilder.newColumn('city').withTitle('City'),
        DTColumnBuilder.newColumn('country').withTitle('Country'),
        DTColumnBuilder.newColumn('last_report_dt').withTitle('Last report'),
        DTColumnBuilder.newColumn('hardware_version').withTitle('HW version'),
        DTColumnBuilder.newColumn('rpi_image_version').withTitle('Image version'),
        DTColumnBuilder.newColumn('software_version').withTitle('Code version'),
        DTColumnBuilder.newColumn('internal_note').withTitle('Internal note'),
        DTColumnBuilder.newColumn(null).withTitle('Info').notSortable()
        .renderWith(function(data, type, full, meta) {
            vm.selected[full.id] = false;
            return '<a class="btn btn-default" ng-href="info/' + data.id + '">Info</a>';
        }),
    ];

    function toggleAll(selectAll, selectedItems) {
        for (var id in selectedItems) {
            if (selectedItems.hasOwnProperty(id)) {
                selectedItems[id] = selectAll;
            }
        }
    }

    function toggleOne(selectedItems) {
        for (var id in selectedItems) {
            if (selectedItems.hasOwnProperty(id)) {
                if (!selectedItems[id]) {
                    vm.selectAll = false;
                    return;
                }
            }
        }
        vm.selectAll = true;
    }


    function someClickHandler(info) {
        vm.message = info.id;
        $location.path('info/' + info.id);

    }

    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;
    }


}

Answer 1

我自己也遇到过这个问题。我认为你的方法有点倒退。您在 rowCallback 内声明 td 单击处理程序，只是为了能够传递 id。相反，我会推荐这个：

第一栏加一个no-click class防止点击:

DTColumnBuilder.newColumn(null).withTitle(titleHtml).notSortable()
  .withClass('no-click')
  .renderWith(function(data, type, full, meta) {
     vm.selected[full.id] = false;
     return '<input type="checkbox" ng-model="showCase.selected[' + data.id + ']" ng-click="showCase.toggleOne(showCase.selected)">';
   }),

将 rowCallback 更改为仅将 id 作为属性注入行：

function rowCallback(nRow, aData, iDisplayIndex, iDisplayIndexFull) {
   $(nRow).attr('data-id', aData.id);
}

在 td 上创建一个委托事件处理程序，以替换 rowCallback 和您的 someClickHandler() 中的事件处理程序：

$('#tableid').on('click', 'tbody td:not(.no-click)', function() {
  var id = $(this).parent().attr('data-id');
  vm.message = id;
  $location.path('info/' + id);
})

Angularjs 数据表 - rowCallback 事件

Angularjs datatables - rowCallback event

javascript

angularjs

angular-datatables