Question

我一直在尝试选择一行被点击，但我遇到的问题是被分页的表显示不同页面上的选定行，而不会显示在其他页面上。

我只是在点击一行时删除并添加一个css类。

之类的东西 -

function rowClicked (){ 

    var table = $('#test').DataTable();

    $('#test tbody').on( 'click','tr', function () {
        if ( $(this).hasClass('selected') ) {
            $(this).removeClass('selected');
            console.log('helloe 1');
        }
        else {
            table.$('tr.selected').removeClass('selected');
            $(this).addClass('selected');
                console.log('helloe 3');
        }
    } );    


}

Answer 1

您可以将Angualr指令用于表格<table select-row>

angular.module('myApp')
    .directive('selectRow', selectRow);

function selectRow($compile) {
    var directive = {
        bindToController: true,
        controller: testCtrl,
        controllerAs: 'vm',
        link: link,
        restrict: 'EA',
        scope: {}
    };
    return directive;

    function link(scope, element, attrs, vm) {
        var target, compileScope, newTd, template ;
        target = angular.element($('table tr'));
        compileScope = scope;
        scope.arr = [];
        angular.forEach(target, function(item) {
            return scope.arr.push(item.textContent);
        });
        template = '<table><thead><tr><th></th><tbody><tr ng-class="selected[$index]" ng-repeat="t in arr track by $index" ng-click="selectRow($index)"><td >{{t}}</td></tr></tbody></tr></thead></table>';
        template = angular.element(template);
        $compile(template)(compileScope);
        element.replaceWith(template);
        // function to select row 
        scope.selectRow = function($index) {
            scope.selected = [];
            scope.index = $index;
            scope.selected[$index] = scope.selected[$index] === 'selected' ? '' :'selected';
        }

    }

    function testCtrl() {

    }
}

在数据表中单击时选择单行

1 个答案: