Question

我正在尝试使用我自己的css类更改jquery datatable中所选行的背景颜色，但是复选框中的刻度标记没有出现。

如果我从下面的代码中移除className: 'selected-row'，那么一切正常，但没有我想要的颜色。

Fiddler： https://jsfiddle.net/8f63kmeo/12/

HTML：

<table id="CustomFilterOnTop" class="table table-bordered table-condensed" width="100%"></table>

JS

var Report4Component = (function () {
    function Report4Component() {
        //contorls
        this.customFilterOnTopControl = "CustomFilterOnTop"; //table id
        //data table object
        this.customFilterOnTopGrid = null;
        //variables
        this.result = null;
    }
    Report4Component.prototype.ShowGrid = function () {
        var instance = this;       

        //create the datatable object
        instance.customFilterOnTopGrid = $('#' + instance.customFilterOnTopControl).DataTable({
            columns: [
                    { title: "<input name='SelectOrDeselect' value='1' id='ChkBoxSelectAllOrDeselect' type='checkbox'/>" },
                { data: "Description", title: "Desc" },
                { data: "Status", title: "Status" },
                { data: "Count", title: "Count" }
            ],
            "paging": true,
            scrollCollapse: true,
            "scrollX": true,
            scrollY: "300px",
            deferRender: true,
            scroller: true,
            dom: '<"top"Bf<"clear">>rt <"bottom"<"Notes">i<"clear">>',
            buttons: [
                {
                    text: 'Load All',
                    action: function (e, dt, node, config) {
                        instance.ShowData(10000);
                    }
               }
            ],            
            columnDefs: [{
                    orderable: false,
                    className: 'select-checkbox text-center',
                    targets: 0,
                    render: function (data, type, row) {
                        return '';
                    }
                }],
            select: {
                style: 'multi',
                selector: 'td:first-child',
                className: 'selected-row'
            }
        });        
    };

    Report4Component.prototype.ShowData = function (limit) {
        if (limit === void 0) { limit = 100; }
        var instance = this;
        instance.customFilterOnTopGrid.clear(); //latest api function
        instance.result = instance.GetData(limit);
        instance.customFilterOnTopGrid.rows.add(instance.result.RecordList);
        instance.customFilterOnTopGrid.draw();
    };
    Report4Component.prototype.GetData = function (limit) {
        //structure of the response from controller method
        var resultObj = {};
        resultObj.Total = 0;
        resultObj.RecordList = [];
        for (var i = 1; i <= limit; i++) {
            resultObj.Total += i;
            var record = {};
            record.Description = "This is a test description of record " + i;
            record.Status = ["A", "B", "C", "D"][Math.floor(Math.random() * 4)] + 'name text ' + i;
            record.Count = i;
            resultObj.RecordList.push(record);
        }
        return resultObj;
    };
    return Report4Component;
}());
$(function () {
    var report4Component = new Report4Component();
    report4Component.ShowGrid();  
    report4Component.ShowData();
});
function StopPropagation(evt) {
    if (evt.stopPropagation !== undefined) {
        evt.stopPropagation();
    }
    else {
        evt.cancelBubble = true;
    }
}

问题：

非常感谢任何建议/帮助。

Answer 1

类selected设置复选框刻度等，并且通过使用不同的类，不再添加selected类。

你可以改为添加这两个类，它应该可以工作

select: {
    style: 'multi',
    selector: 'td:first-child',
    className: 'selected-row selected'
}

FIDDLE

jquery datatable - 为select.className应用值未按预期工作

1 个答案: