kendo ui 网格上的可编辑颜色输入字段 [英] kendo ui Editable color input field on grid
本文介绍了kendo ui 网格上的可编辑颜色输入字段的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
正如您在下面的代码中看到的，我有一个带有可编辑单元格的网格.在名为szin"的专栏中，我厌倦了实现剑道颜色选择器，它工作得很好.我的问题是，只有当您尝试编辑其中一个单元格时才会显示颜色.我可以以某种方式让它永久显示吗?我不在乎单元格的背景颜色是否改变或下拉框是否一直可见或使用任何其他方法.
As you can see in the code below, i have a grid with editable cells. At the column named "szin" i tired to implement a kendo colorpicker and it works just fine. My problem is, that the colors are only displayed when you try to edit one of the cell. Can i make it permanently displayed somehow? I dont care if the bg-color of the cell change or the dropdown box visible all the time or with any other methods.
这是我的代码:
<!DOCTYPE html>
<html>
<head>
<link href="../styles/kendo.metro.min.css" rel="stylesheet">
<link href="../styles/kendo.common.min.css" rel="stylesheet">
<script src="../js/jquery.min.js"></script>
<script src="../js/kendo.all.min.js"></script>
</head>
<body>
<div id="grid" style="width:1024px; height:400px; margin-left:auto; margin-right:auto;"></div>
<script>
$(document).ready(function() {
$("#grid").kendoGrid({
dataSource: {
transport: {
read: "load.php",
update: {
url: "load.php",
type: "POST"
}/*,
destroy: {
url: "load.php",
type: "DELETE"
}*/
},
error: function(e) {
alert(e.responseText);
}
},
columns: [ { field: "termekid", width:"70px" },
/*
...
*/
{ field: "szin", width:"74px",
editor: szinColorPickerEditor
}
/*
...
*/
],
sortable: true,
editable: true,
navigatable: true,
toolbar: ["save", "cancel"/*, "create"*/],
pageable: {
previousNext: true,
numeric: true,
buttonCount: 5,
input: false,
pageSizes: [0, 10, 20, 50, 100],
refresh: true,
info: true
}
});
function szinColorPickerEditor(container, options) {
$("<input type='color' data-bind='value:" + options.field + "' />")
.appendTo(container)
.kendoColorPicker({
buttons: true
});
}
});
</script>
</body>
</html>
推荐答案
您可以为此使用列模板，例如您可以将字段定义更改为:
You can use a column template for this, for example you could change your field definition to:
{
field: "szin",
width: "74px",
editor: szinColorPickerEditor,
template: "<span style='display: inline-block; width: 100%; height: 100%; background-color: #= szin #'></span>"
}
参见演示
这篇关于kendo ui 网格上的可编辑颜色输入字段的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
