Kendo UI TreeView需求：仅无子项节点显示复选框，子节点不显示

方法一：使用自定义复选框模板 #

通过TreeView的checkbox.template配置，直接根据节点是否包含子项来决定是否渲染复选框，代码简洁且适合静态数据源场景：

<div id="treeview"></div>

<script>
$("#treeview").kendoTreeView({
  dataSource: [
    { text: "父节点1", items: [
      { text: "叶子节点1-1" },
      { text: "叶子节点1-2" }
    ]},
    { text: "父节点2", items: [
      { text: "父节点2-1", items: [
        { text: "叶子节点2-1-1" }
      ]}
    ]},
    { text: "叶子节点3" }
  ],
  checkbox: {
    // 仅当节点无任何子项时，渲染复选框
    template: "# if (!item.items || item.items.length === 0) { # <input type='checkbox' /> # } #"
  }
});
</script>

方法二：结合dataBound与expand事件动态处理 #

如果你的TreeView使用异步加载子节点，可先全局开启复选框，再在节点绑定、展开时动态移除父节点的复选框，保留叶子节点的：

<div id="treeview"></div>

<script>
$("#treeview").kendoTreeView({
  dataSource: [
    // 支持异步数据源配置
    { text: "异步父节点", hasChildren: true }
  ],
  checkbox: true,
  dataBound: function() {
    this._toggleLeafCheckboxes();
  },
  expand: function(e) {
    // 异步加载子节点后延迟处理，确保DOM已渲染
    setTimeout(() => this._toggleLeafCheckboxes(e.node), 100);
  },
  // 封装复用的处理逻辑
  _toggleLeafCheckboxes: function(targetNode) {
    const treeView = this;
    const nodes = targetNode ? $(targetNode).find(".k-item") : treeView.element.find(".k-item");
    
    nodes.each(function() {
      const nodeData = treeView.dataItem(this);
      const checkbox = $(this).find(".k-checkbox");
      
      if (nodeData.items && nodeData.items.length > 0) {
        checkbox.remove();
      }
    });
  }
});
</script>

关键说明 #

• 模板方式：直接在渲染阶段控制复选框的生成，性能更优，适合静态或预加载完成的数据源。
• 事件方式：适配异步加载场景，能处理动态新增的节点，需注意延迟执行确保DOM元素已存在。

内容的提问来源于stack exchange，提问作者vahid