Question

当数据绑定到数据表时，我想在数据表中添加复选框

我将在这里分享我的代码

我在这里使用Jquery Datatble，而我在使用C＃和剃须刀，

function BindColumSelectTable(DataExchangeList) {
    debugger
    $('#columnSelectTable').DataTable({      
        "data": DataExchangeList,
        "destroy": true,
        "columns": [
            { data: null },
            { data:"FieldCaption" },
        ],
        "columnDefs": [
            { className: "checkbox i-checks", "targets": [0] },
            { className:"tabletdAdjust","targets":[1]}
        ],     
    });
}

我期望结果像一个带有两列的表。 第一列是复选框，第二列是列表中的数据绑定。 现在，我在第一列中获得 objectobject

这是我现在得到的输出

Column          Name
[objectObject] ID
[objectObject] Code
[objectObject] Name
[objectObject] CreatedBy
[objectObject] CreatedDate
[objectObject] UpdatedBy
[objectObject] UpdatedDate

Answer 1

从a similar issue开始，我认为问题是由于使用data: null定义作为第一列引起的。它告诉DataTables使用相应行的原始对象作为该列的数据源。

您应该在数据源中使用不存在的属性名称来设置data设置，如果表中没有唯一的ID列，请使用defaultContent选项：

{ data: 'id', defaultContent: '' }

使列定义应如下所示：

"columns": [
    { data: 'id', defaultContent: '' }
    { data: 'FieldCaption' },
],

关于使用选择复选框，您可以像这样设置columnDefs（例如，参见the reference）：

columnDefs: [{
    orderable: false,
    className: 'select-checkbox i-checks',
    targets: 0
},
{ 
    className: 'tabletdAdjust',
    targets: 1
}],

Answer 2

我们只需做一件事即可添加带有数据的复选框

"columns": [
        {
            data: 'check', defaultContent: '', render: function (data, type, row) {
                return '<input type="checkbox"/>'
            }
        },
        { data:"FieldCaption" },
    ],

仅我们需要添加一个渲染功能并返回一个复选框

将数据绑定到数据表时如何添加复选框？

2 个答案: