【发布时间】：2013-07-27 04:15:58
【问题描述】：
在当前显示 MySQL 布尔值的 Kendo 网格中将此列设置为 1 或 0。
这在 autosync 和 inline:true 网格中。
我希望此列的类型为“复选框”，但由于某些奇怪的原因，我无法在网络上找到显示“启用”复选框的演示或示例，该复选框在未选中时从 1 变为 0，而副-反之亦然。
【问题讨论】：
标签： kendo-ui kendo-grid
【发布时间】：2013-07-27 04:15:58
【问题描述】：
之前有一些注意事项：
- 当您单击单元格进行编辑时，您会将其切换到编辑模式，然后执行编辑器功能。
- 如果您不处于编辑模式，尽管使用了 HTML，则更改不会在模型中传输。
- Kendo UI 将
boolean渲染为复选框以进行编辑，但在未处于编辑模式时不会。
你需要做的是：
- 定义用于显示复选框的模板。
- 如果您不想单击两次复选框（第一次进入编辑模式，第二次更改其值），您需要定义一个复选框，但绑定一个更改事件，拦截单击它并更改模型。
模板定义：
{
title : "Fully Paid",
field : "fullyPaid",
template: "<input name='fullyPaid' class='ob-paid' type='checkbox' data-bind='checked: fullyPaid' #= fullyPaid ? checked='checked' : '' #/>"
}
如您所见，我没有定义编辑器功能，因为我们将在不进入编辑模式的情况下更改复选框的值。
定义一个处理程序，用于检测我在模板中定义的复选框中的更改并更新模型。
grid.tbody.on("change", ".ob-paid", function (e) {
var row = $(e.target).closest("tr");
var item = grid.dataItem(row);
item.set("fullyPaid", $(e.target).is(":checked") ? 1 : 0);
});
您的 JSBin 已在此处修改：http://jsbin.com/ebadaj/12/edit
【讨论】：
-
这是一个非常受欢迎的主动提示......如果只有更多像你一样的人。 !
-
刚刚在涉及远程数据源的真实应用程序上使用了这个解决方案......如何触发更新？除了更改没有持久化到数据库之外，一切正常。
-
另外，我看到仍然可以单击复选框右侧并编辑其后面的 0-1 值......并且它不会影响复选标记。 ..
-
您可以通过在网格对象中调用
saveChanges来触发更新。 -
对于我的其他评论......你知道解决这个问题的方法吗？
我的批量编辑网格遇到了同样的问题。 我找到的解决方案仅适用于一个特定的列（如上所述的解决方案）。所以我改变了
item.set("fullyPaid", $(e.target).is(":checked") ? 1 : 0);
到
var col = $(this).closest('td');
dataItem.set(grid.columns[col.index()].field, checked);
因此您可以将它用于任何复选框列。
下一个问题是使用复选框的“一键编辑”选项时未正确设置的脏标志。
所以我已经测试了各种方法以使其正常工作并对此感到满意：
在列定义中：
.ClientTemplate("<input type='checkbox' #= CheckboxColumn? checked='checked': checked='' # class='chkbx' />");
下面的脚本：
<script>
$(function () {
$('#GridName').on('click', '.chkbx', function () {
var checked = $(this).is(':checked');
var grid = $('#GridName').data().kendoGrid;
grid.closeCell();
var dataItem = grid.dataItem($(this).closest('tr'));
var col = $(this).closest('td');
grid.editCell(col);
dataItem.set(grid.columns[col.index()].field, checked);
grid.closeCell(col);
});
});
</script>
【讨论】：
-
OnaBai 的回答不适用于 IE。这个答案也适用于 IE，对于 IE 来说确实是一个很好的解决方法。
-
在使用内联编辑并且该行未被编辑时，如何防止勾选/取消勾选？
-
这对我来说适用于 ASP.Net Core 的 UI。使复选框变脏，模型绑定成功用于 incell 批量编辑。
2018 年更新示例！！
有主题。 Kendo 使用主题，因此使用标准的“浏览器复选框外观”（每个浏览器都不同）不是很好。
https://dojo.telerik.com/IluJosiG/14
$(document).ready(function () {
$("#grid").kendoGrid({
dataSource: {
transport: {
read: function(options){
var data = [
{
include: true,
Amount: 20
},
{
include: true,
Amount: 30
},
{
include: false,
Amount: 0
}
];
options.success(data);
}
},
schema:{
model: {
fields: {
include: { type: 'boolean' },
Amount: { type: "number", },
}
}
}
},
columns: [
{
field: "include",
editor: function(container, options){
var grid = $(container).closest('[data-role=grid]').data('kendoGrid');
var row = grid.dataItem(container.closest('tr'));
//console.log('grid', grid);
console.log('row', row);
if(row.include){
row.set('include', false);
row.set('Amount', 0);
} else {
row.set('include', true);
row.set('Amount', 1);
}
grid.closeCell();
},
template: function(items){
var guid = kendo.guid();
var checked = ''; // = ' disabled="disabled" ';
if(items.include){
checked = ' checked="checked" ';
}
return '<input class="k-checkbox" id="' + guid + '" type="checkbox" ' + checked + ' />' +
'<label class="k-checkbox-label" for="' + guid + '">​</label>';
},
attributes:{ align:"center" },
headerAttributes: { 'class': 'k-header-centeralign' }
},
{
field: "Amount",
format: "{0:n6}",
editor: function(container, options){
$('<input data-bind="value:' + options.field + '"/>')
.appendTo(container)
.kendoNumericTextBox({
decimals: 6,
min: 0,
restrictDecimals: true // Specifies whether the decimals length should be restricted during typing. The length of the fraction is defined by the decimals value
}
);
}
}
],
editable: true,
save: function(e){
console.log('save', e);
var model = e.model;
console.log('save model', model);
var items = this.dataSource.data();
var item = $.grep(items, function(e){ return e.uid == model.uid; })[0];
//console.log('item uid', items);
var userAmount = e.values.Amount;
if(userAmount>0){
item.set('include', true);
console.log('set include true');
} else {
item.set('include', false);
console.log('set include false');
}
// redraw row for checkbox
// timeout because qty is not updated before
var grid = e.sender;
setTimeout(function(){
var row = grid.element.find('tr[data-uid=' + model.uid + ']');
console.log('redraw row for checkbox', row);
kendoFastReDrawRow(grid, row);
},0);
},
dataBound: function(e){
console.log('dataBound');
},
});
});
function kendoFastReDrawRow(grid, row) {
var dataItem = grid.dataItem(row);
var rowChildren = $(row).children('td[role="gridcell"]');
for (var i = 0; i < grid.columns.length; i++) {
var column = grid.columns[i];
var template = column.template;
var cell = rowChildren.eq(i);
if (template !== undefined) {
var kendoTemplate = kendo.template(template);
// Render using template
cell.html(kendoTemplate(dataItem));
} else {
var fieldValue = dataItem[column.field];
var format = column.format;
var values = column.values;
if (values !== undefined && values != null) {
// use the text value mappings (for enums)
for (var j = 0; j < values.length; j++) {
var value = values[j];
if (value.value == fieldValue) {
cell.html(value.text);
break;
}
}
} else if (format !== undefined) {
// use the format
cell.html(kendo.format(format, fieldValue));
} else {
// Just dump the plain old value
cell.html(fieldValue);
}
}
}
}td[role=gridcell] .k-checkbox + label.k-checkbox-label {
cursor: pointer !important;
}<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.2.620/styles/kendo.common-bootstrap.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.2.620/styles/kendo.bootstrap.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.2.620/styles/kendo.bootstrap.mobile.min.css" />
<script src="https://kendo.cdn.telerik.com/2018.2.620/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2018.2.620/js/kendo.all.min.js"></script>
<div id="example">
<div id="grid"></div>
</div>【讨论】：