jquery kendo-ui 添加属性和 class 到复选框树项目

Question

我在循环中附加动态复选框项目的地方，我尝试添加额外的后缀，如下所示：

checkBoxTree.append({ text: plc + " (" + id + ")"}).attr("data-id", id).className = "id-item class";

我没有收到任何错误，但是没有在任何地方添加属性和两个类。这是怎么做到的？

上面尝试在我写新复选框元素的末尾添加这个'.attr("data-id", id).className = "id-item class";'

Answer 1

你不应该玩 Kendo 的 DOM，它会不断重绘。我建议使用 template 并将项目内容包装在 div 中。然后在 div 上添加您需要的任何 class 或数据属性，而不是项目的 li。示例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>Kendo UI Snippet</title>

    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2020.2.617/styles/kendo.default-v2.min.css"/>

    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2020.2.617/js/kendo.all.min.js"></script>
</head>
<body>
  
<div id="treeview"></div>
<script>
let tv = $("#treeview").kendoTreeView({
  template: "<div data-id='#= item.id #' class='id-item class'>#= item.text # (#= item.inStock #)</div>",
  dataSource: [
    { text: "foo", inStock: 7, items: [
      { text: "bar", inStock: 2 },
      { text: "baz", inStock: 5 }
    ] }
  ]
}).data('kendoTreeView');
  
tv.append({ text: 'abc', id: 10, inStock: 1000 });
</script>
</body>
</html>

Dojo

如果您检查以上树的 abc 节点，您将看到...

jquery kendo-ui 添加属性和 class 到复选框树项目

jquery kendo-ui add attribute and class to checkbox tree item

javascript

jquery

kendo-ui