Question

我正在使用Kendo UI Web并找到根据特定需求进行自定义的方法。从我的JS bin我简单地添加了Kendo UI下拉控件和样本列表项，其背景需要使用各自的颜色进行渲染。

我花了一些时间检查元素以改变它的风格，但还没有找到控制每个列表项的解决方案。有人有经验吗？

Answer 1

有一个简单的部分和一个困难的部分。很容易让背景难以让它看起来很漂亮。

简单，定义用于呈现每个列表项的模板：

<script id="template" type="text/kendo-tmpl">
    <div style="background-color: #= text #;">#= text #</div>
</script>

然后将您的ComboBox定义为：

$(document).ready(function () {
    $('#combobox').kendoComboBox({
        template : $("#template").html()
    });
});

但是这可能不是你想要的那么好，因为在我的模板<div>之前有一个由KendoUI引入的<li>，除非你想开始玩它，你可能会考虑只显示带有项目颜色的颜色方块。

您可以执行以下操作：

开始为颜色方块定义CSS：

.ob-patch {
    margin: 4px 6px 0 0 !important;
    height: 14px;
    width: 14px;
    float: left;
    border: 1px solid black;
}

然后每个项目的模板将是：

<script id="template" type="text/kendo-tmpl">
    <div>
        <div style="background-color: #= text #;" class="ob-patch">&nbsp;</div>
        #= text #
    </div>
</script>

和组合框初始化：

$('#combobox').kendoComboBox({
    template: $("#template").html()
});

使用此方法修改了您的JS Bin here

编辑：如果您希望输入的背景获得所选项目的颜色，您应该使用：

function setColor() {
    var val = this.value();
    this.input.css("background-color", val);
}

$("#combobox").kendoComboBox({
    template : $("#template").html(),
    dataBound: setColor,
    change   : setColor
});

change事件处理程序从所选选项中设置input的值，dataBound事件处理程序为初始值设置值。

Kendo UI Web - 下拉列表，每个列表项的不同背景颜色。

1 个答案: