Question

我找到了在datatable中生成多个复选框的下一个代码，它的工作非常好：

var table = $('#example').DataTable({     
      'columnDefs': [
         {
            'targets': 0,
            'checkboxes': {
               'selectRow': true
            }
         }
      ],
      'select': {
         'style': 'multi'
      },
      'order': [[1, 'asc']]
});

但是当我尝试更改代码以使用静态表数据（更改该数据不会来自Ajax）时，它已停止工作..

这是我的代码：

https://jsfiddle.net/snqw56dw/3158/

from tkinter import *

class Window(Frame):
    def __init__(self, parent):
        Frame.__init__(self, parent)

        self.vmcd1 = parent.register(self.validate_entry)

        self.title = Label(self, text='Enter here:')
        self.title.pack()

        self.entry = Entry(self, validatecommand=(self.vcmd1,'%P'))
        self.entry.pack()


        self.entered=Label(self, text='You entered')
        self.entered.pack()

    def callback(self):
        self.entered.config(text='You entered: ' + self.entry.get())

    def validate_entry(self, entry):
        print('Code validates entry')
        if entry == 'APPLE':
            print('This input is correct.')
        else:
            pass


root = Tk()
frame = Window(root)
frame.pack()
root.mainloop()

我很乐意得到你的帮助，明白我在那里做错了什么..

由于

Answer 1

您需要在包含复选框的列中具有唯一数据-1，2，3等

有关代码和演示，请参见updated example。

Answer 2

根据DataTable文档：

DataTables将自动为您添加它（请注意，这将起作用用于Ajax和Javascript加载的数据以及服务器端处理中。）

您可以在此处阅读完整的文档：https://www.ksia.or.kr/plugin/DataTables-1.10.15/examples/server_side/ids.html

对于静态记录，您可以按照以下方式进行操作：https://jsfiddle.net/cwvr7kba/1/

$(document).ready(function() {
    var table = $('#example').DataTable({
        'columnDefs': [{
            'targets': 0,
            'checkboxes': {
                'selectRow': true
            }
        }],
        'select': {
            'style': 'multi'
        },
        'fnCreatedRow': function(nRow, aData, iDataIndex) {
            $(nRow).attr('data-id', aData.DT_RowId); // or whatever you choose to set as the id
            $(nRow).attr('id', 'id_' + aData.DT_RowId); // or whatever you choose to set as the id
        },
        'order': [
            [1, 'asc']
        ]
    });
    // Handle form submission event 
    $('#frm-example').on('submit', function(e) {
        var form = this;


        var rows = $(table.rows({
            selected: true
        }).$('input[type="checkbox"]').map(function() {
            return $(this).prop("checked") ? $(this).closest('tr').attr('data-id') : null;
        }));
        //console.log(table.column(0).checkboxes.selected())
        // Iterate over all selected checkboxes
        rows_selected = [];
        $.each(rows, function(index, rowId) {
            console.log(rowId)
            // Create a hidden element 
            rows_selected.push(rowId);
            $(form).append(
                $('<input>')
                .attr('type', 'hidden')
                .attr('name', 'id[]')
                .val(rowId)
            );
        });

        // FOR DEMONSTRATION ONLY
        // The code below is not needed in production

        // Output form data to a console     
        $('#example-console-rows').text(rows_selected.join(","));

        // Output form data to a console     
        $('#example-console-form').text($(form).serialize());

        // Remove added elements
        $('input[name="id\[\]"]', form).remove();

        // Prevent actual form submission
        e.preventDefault();
    });
});

datatables多个复选框

2 个答案: