JQuery Datatables将复选框设置为选中
JQuery Datatables set checkbox to checked
我目前正在使用JQuery数据表来存储信息,并使用MD数组进行填充。
但如果满足条件,我希望默认情况下将复选框属性设置为:checked
。我尝试了各种方法,例如CCD_;.addprop
找到任何解决方案,但我一直无法按照我的需要让它工作。
E。G因此,如果值为禁用,则不执行任何操作,否则,如果启用,则将复选框值设置为:checked
。
我附上了一个JSfiddle来复制我的问题。
代码是:
HTML
<table id="userTable" class="display" width="100%">
<thead>
<tr>
<th>Enable/Disable</th>
<th>Number</th>
<th>Name</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
Javascript/JQuery
jQuery(function($) {
data = [
['User_488', 'User 1', 'disable'],
['User_487', 'User 2', 'disable'],
['User_477', 'User 3', 'disable'],
['User_490', 'User 4', 'disable'],
['1000', 'User 5', 'enable'],
['1001', 'User 6', 'enable'],
['1002', 'User 7', 'enable'],
['1004', 'User 8', 'enable']
]
var t = $('#userTable').DataTable({
'columnDefs': [{
'targets': 0,
'searchable': false,
'orderable': false,
'className': 'dt-body-center',
'render': function(data, type, full, meta) {
return '<input type="checkbox" class="checkbox_check">';
}
}],
order: []
});
function checkbox() {
t.clear();
if (data) {
for (var i = 0; i < data.length; i++) {
var number = data[i][0];
var name = data[i][1];
var statustemp = "";
var resarr = new Array(statustemp, number, name);
if (status === "disable" || status == null) {
t.row.add(resarr).draw(false);
} else {
t.row.add(resarr).draw(false);
}
}
t.draw(false);
}
};
checkbox();
});
以前有人有这个问题吗?
查看attr
:
'columns': [
{
"title": "Enable/Disable",
"render": function(data, type, row, meta){
var checkbox = $("<input/>",{
"type": "checkbox"
});
if(row[2] === "enable"){
checkbox.attr("checked", "checked");
checkbox.addClass("checkbox_checked");
}else{
checkbox.addClass("checkbox_unchecked");
}
return checkbox.prop("outerHTML")
}
},{
"title": "Number",
"render": function(data, type, row, meta){
return row[0];
}
},{
"title": "Name",
"render": function(data, type, row, meta){
return row[1];
}
}
]
工作JSFiddle
对数据进行排序,以便将其提供给数据表,然后根据其值呈现列
jQuery(function($) {
data = [
['disable','User_488', 'User 1' ],
[ 'disable','User_487', 'User 2'],
['disable','User_477', 'User 3'],
['disable','User_490', 'User 4'],
['enable','1000', 'User 5'],
['enable','1001', 'User 6'],
['enable','1002', 'User 7'],
['enable','1004', 'User 8']
]
var t = $('#userTable').DataTable({
"data": data,
'columnDefs': [{
'targets': 0,
'searchable': false,
'orderable': false,
'className': 'dt-body-center',
'render': function(data, type, full, meta) {
if(data === "disable"){
return '<input type="checkbox" class="checkbox_check">';
}else{
return '<input type="checkbox" checked class="checkbox_check">';
}
}
}],
order: [],
});
});
相关文章:
- 如何在angularJS中编辑时,如果DB中的值为true,则设置复选框,如果值为false,则取消选中复选框
- 余烬操作阻止设置复选框值
- 用于在dojo中动态设置复选框值(如已选中)的语法
- 根据 ajax 响应中的值设置复选框状态
- 设置复选框,当单选按钮与挖空更改时
- Angularjs 设置复选框为 true
- 如何设置复选框值以及如何在javascript中获取复选框值
- 动态设置复选框标签文本会导致复选框中的样式问题
- jQuery设置复选框更改时的下拉值
- Javascript/JQuery设置复选框的值,同时禁用其他复选框
- 如何使用jsTree设置复选框
- 根据服务器响应设置复选框
- Mootools FormCheck -设置复选框时需要一个字段
- 可以't设置复选框选中| JavaScript
- 未设置复选框,已与主体负载上的匹配值进行了检查
- 需要根据模型数据中的字符串设置复选框
- 如何在angularjs中使用css设置复选框的颜色
- 如何设置“复选框”使用javascript从treeview检查
- 设置复选框选择范围的限制
- 设置复选框样式的Angular指令