jQuery datatable – 在列中选择列表
我目前正在jQuery数据表中提取数据，这是非常棒的！ 但是我对“角色”列有疑问。
我试图在该列中插入一个选择列表，它将有两个选项“admin”和“User”以及数组中选择列表中值的任何数据。
但我无法将选择列表呈现到表中，然后根据数组中的whats将其设置为admin或user。
jQuery(function($) { var data = [ ["test1", "admin", "yes"], ["test2", "admin", "yes"], ["test3", "user", "no"], ["test4", "user", "no"] ] function authusers() { t = $('#authTable').DataTable({ retrieve: true, paging: false, data: data, columns: [{ "title": "Email", "render": function(data, type, row, meta) { return row[0]; } }, { "title": "Role", "render": function(data, type, row, meta) { return row[1]; } }, { "title": "Active", "render": function(data, type, row, meta) { var checkbox = $("", { "type": "checkbox" }); checkbox.attr("checked", (row[2] === "yes")); checkbox.addClass((row[2] === "yes") ? "checkbox_checked" : "checkbox_unchecked") return checkbox.prop("outerHTML") } }, ], order: [] }); } //Passes value and if it was enabled or disabled value to serverside. $(document).on('click', '.checkbox_checked , .checkbox_unchecked', function() { if ($(this).is(':checked')) { var rowIndex = $(this).closest('tr').find('td:eq(0)').text(); var status = 'yes'; } else if ($(this).prop('checked', false)) { var rowIndex = $(this).closest('tr').find('td:eq(0)').text(); var status = 'no'; } }); authusers(); }); Email Active Role
还有一个JSfiddle
欢迎任何建议或建议！
这些是代码中的少数问题，例如数据表选项不应该在“”中。 在这里检查纠正的提琴手。
https://jsfiddle.net/fjxbz50w/6/
jQuery(function($) { var sdata = [ ["test1", "admin", "yes"], ["test2", "admin", "yes"], ["test3", "user", "no"], ["test4", "user", "no"] ] function authusers(data) { t = $('#authTable').DataTable({ retrieve: true, paging: false, data : sdata, columns: [{ "title": "Email", "render": function(data, type, row, meta) { return row[0]; } }, { "title": "Role", "render": function(data, type, row, meta) { return row[1]; } }, { "title": "Active", "render": function(data, type, row, meta) { var checkbox = $("", { "type": "checkbox" }); checkbox.attr("checked", (row[2] === "yes")); checkbox.addClass((row[2] === "yes") ? "checkbox_checked" : "checkbox_unchecked") return checkbox.prop("outerHTML") } }, ], order: [] }); } //Passes value and if it was enabled or disabled value to serverside. $(document).on('click', '.checkbox_checked , .checkbox_unchecked', function() { if ($(this).is(':checked')) { var rowIndex = $(this).closest('tr').find('td:eq(0)').text(); var status = 'yes'; console.log(rowIndex); console.log(status); } else if ($(this).prop('checked', false)) { var rowIndex = $(this).closest('tr').find('td:eq(0)').text(); var status = 'no'; console.log(rowIndex); console.log(status); } }); authusers(); });
对于Role列中的select，您可以这样做。
"title": "Role", "render": function(data, type, row, meta) { var a = sdata.indexOf(row); var select = $(""); $("#role_"+a).val(row[1]); return select.prop("outerHTML")
这是更新的提琴手。