javascript - 如何编辑 Kendo UI Multiselect 的药丸

Question

通过 Kendo UI 多选，它们内置了药丸容器...您可以指定特定的 tagTemplates，但这只会更改药丸容器内的内容，而不是药丸本身。

我想知道是否有人知道如何定制所选项目的实际药丸。

感谢您的帮助。

Answer 1

您可以在适当的选择器上使用您选择的 CSS 样式，即

.k-multiselect li.k-button {
    border-radius: 50px;
    border-style: ridge;
    border-width: 2px;
    background-color: deeppink;
}

示例:http://dojo.telerik.com/@Stephen/AyEKE

根据评论进行编辑CSS 没有父选择器可以从 tagTemplate 向上移动到父级 <li> ，需要应用样式，因为将样式应用于 content/tagTemplate 本身并不包含整个标签。不过，可以使用 JavaScript 来完成。

我已经更新了示例以附加到多选的更改事件，以执行一些 javascript 以将背景颜色应用于父级 <li>基于项目的某个任意值的所选项目。在我的示例中，我将 CompanyName 添加到 tagTemplate 数据值中，并且我的 JavaScript 会触发该数据值以根据名称应用不同的颜色。

更新了 tagTemplate 以包含项目的 CompanyName:

tagTemplate:  '<span data-companyname="#:data.CompanyName#"...

并向多选添加了一个更改事件处理程序，用于查找父节点并应用样式:

change: function (e) {
                    var selectedTags = $(".k-multiselect li.k-button");
                    for (var i = 0; i < selectedTags.length; i++) {
                      var tag = $(selectedTags[i]);
                      var item = $(tag.find("span.selected-value"));
                      if (item.data("companyname") === "Alfreds Futterkiste") {
                        tag.css({ "background-color": "deeppink" });
                      }
                      if (item.data("companyname") === "Ana Trujillo Emparedados y helados") {
                        tag.css({ "background-color": "green" });
                      }
                      // ...
                    }
                  }

现在，这不一定是实现 JavaScript 的最佳方式，但我确实相信您必须使用 JavaScript。