Question

将此列放在当前显示MySQL布尔值的Kendo网格中，这样我们就有1或0。

Made this demo to play on...

这是 autosync 和 内联：true 网格。

我希望此列的类型为“Checkbox”但是，由于一些奇怪的原因，我只是在网络上找不到演示或示例显示“已启用”复选框，在未选中时将其更改为1并且反之亦然。

Answer 1

以前有一些注意事项：

当您在单元格中单击进行编辑时，您将其切换为编辑模式，然后是编辑器功能执行时。
如果您在编辑模式下不，尽管使用了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

Answer 2

我的批量编辑网格遇到了同样的问题。我发现的解决方案仅适用于一个特定的色谱柱（如上所述）。所以我改变了

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>

Answer 3

更新了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 + '">&#8203;</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>

将可绑定的复选框列添加到网格

3 个答案: