jQuery datatable - 在列中选择列表 [英] jQuery datatable - Select list within column
问题描述
我目前在jQuery数据表中拉数据,这是一个盛大的!但是我在角色列中出现问题。
I am currently pulling data in a jQuery datatable which is grand! But I am having an issue with the Role column.
我试图在该列中插入一个选择列表,其中有两个选项admin& 用户和数组中的任何数据设置选择列表中的值。
I am trying to inset a select list in that column which will have two options "admin" & "User" and whatever data is in the array set that value within the select list.
但是我没有能够将选择列表渲染到表中,然后设置它根据数组中的内容给管理员或用户。
But I haven't been able to render select list into the table then set it to admin or user based on whats in the array.
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 = $("<input/>", {
"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();
});
<link href="//cdn.datatables.net/1.10.11/css/jQuery.dataTables.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdn.datatables.net/1.10.11/js/jquery.dataTables.min.js"></script>
<body>
<table class="display" id="authTable" width="60%">
<thead>
<tr>
<th>Email</th>
<th>Active</th>
<th>Role</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</body>
欢迎任何建议或建议
推荐答案
这些是您的代码中的几个问题,如数据表选项不应该在中。在这里检查更正的提示。
These are the few issues in your code like the data table options should not be in "". Check the corrected fiddler here.
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 = $("<input/>", {
"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();
});
在角色列中选择您可以这样做。
for select in the Role column you can do like this.
"title": "Role",
"render": function(data, type, row, meta) {
var a = sdata.indexOf(row);
var select = $("<select id='role_"+a+"'><option value ='admin'>admin</option><option value ='user'>user</option</select>");
$("#role_"+a).val(row[1]);
return select.prop("outerHTML")
fiddler。
https://jsfiddle.net/fjxbz50w / 11 /
这篇关于jQuery datatable - 在列中选择列表的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!