为什么使用模板时不显示 treeview 复选框？

Question

当前的问题是复选框没有出现在我的 kendo 树视图中。使用模板的原因是我想在更容易处理选中事件的地方定义复选框名称，但我不确定模板的格式是否正确。

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

    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.914/styles/kendo.common.min.css"/>
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.914/styles/kendo.rtl.min.css"/>
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.914/styles/kendo.silver.min.css"/>
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.914/styles/kendo.mobile.all.min.css"/>

    <script src="http://code.jquery.com/jquery-1.12.4.min.js"></script>
    <script src="http://kendo.cdn.telerik.com/2016.3.914/js/kendo.all.min.js"></script>
</head>
<body>
  
<div id="treeview" data-role="treeview" data-template="treeviewtemplate" data-text-field="text" data-checkboxes='{"checkChildren": true,template:checkboxtemplate}' data-value-field="value"></div>
  
  <script id="treeviewtemplate" type="text/kendo-ui-template">
     #= item.text #
  </script>
  
  <script type="text/javascript">
     function checkboxtemplate(e){
     return "#if(!item.hasChildren){#<input type='hidden' parent_id='#=item.parent_id#' d_text='#=item.value#' /><input type='checkbox' name='checkedFiles[#= item.value #]' value='true' />#}else{#<input type='checkbox' parent_id='#=item.parent_id#' d_text='#=item.value#' /> #}#"
     }
  </script>
  
  <script>
$("#treeview").kendoTreeView({
  dataSource: {
  data: [
    { id      : 5,
     parent_id: 0,
     text    : "General - Primary Probe",
     value    : "General - Primary Probe",
     expanded : true,
     items    : [
       { id: 51, parent_id: 5, text: "Agent Running Mode",value:"priProbeARM"},
       { id: 52, parent_id: 5, text: "Agent Version",value:"priProbeAV"},
       { id: 53, parent_id: 5, text: "Master/Slave Mode",value:"priProbeMSM"},
       { id: 54, parent_id: 5, text: "Manufacturer",value:"priProbeManu"},
       { id: 55, parent_id: 5, text: "Model",value:"priProbeModel"},
       { id: 56, parent_id: 5, text: "Software Version",value:"priProbeSV"}
     ]}]
  }
});
</script>
</body>
</html>

Answer 1

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

    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.914/styles/kendo.common.min.css"/>
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.914/styles/kendo.rtl.min.css"/>
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.914/styles/kendo.silver.min.css"/>
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.914/styles/kendo.mobile.all.min.css"/>

    <script src="http://code.jquery.com/jquery-1.12.4.min.js"></script>
    <script src="http://kendo.cdn.telerik.com/2016.3.914/js/kendo.all.min.js"></script>
</head>
<body>
  
<div id="treeview"></div>
<script id="treeviewtemplate" type="text/kendo-ui-template">
     #if(!item.hasChildren){#
     <input type='hidden' parent_id='#=item.parent_id#' d_text='#=item.value#' /><input type='checkbox' name='checkedFiles[#=item.value #]' value='true' />#}else{#<input type='checkbox' parent_id='#=item.parent_id#' d_text='#=item.value#' /> #}#
     #= item.text#
</script>
  
<script>
$("#treeview").kendoTreeView({
  template:kendo.template($("#treeviewtemplate").html()),
  dataTextField:"text",
  dataValueField:"value",
  dataSource: {
  data: [
    { id      : 5,
     parent_id: 0,
     text    : "General - Primary Probe",
     value    : "General - Primary Probe",
     expanded : true,
     items    : [
       { id: 51, parent_id: 5, text: "Agent Running Mode",value:"priProbeARM"},
       { id: 52, parent_id: 5, text: "Agent Version",value:"priProbeAV"},
       { id: 53, parent_id: 5, text: "Master/Slave Mode",value:"priProbeMSM"},
       { id: 54, parent_id: 5, text: "Manufacturer",value:"priProbeManu"},
       { id: 55, parent_id: 5, text: "Model",value:"priProbeModel"},
       { id: 56, parent_id: 5, text: "Software Version",value:"priProbeSV"}
     ]}]
  }
});
</script>
</body>
</html>

也许您应该尝试将复选框元素插入到您的树模板脚本中。然后，使用像这样的树模板配置渲染模板脚本，

template : template:kendo.template($("#treeviewtemplate").html()),

您还可以添加一些 styles/classes 或额外的标签元素，使您的模板复选框看起来像标准 kendo 复选框。

我还建议您使用 kendo 树配置来创建额外的属性，例如 dataTextField、dataValueField.. 而不是将它们添加为 div 占位符元素属性：

$("#treeview").kendoTreeView({
            dataTextField:"text",
            dataValueField:"value",..})

为什么使用模板时不显示 treeview 复选框？

Why treeview checkbox doesn't appear when using template?

javascript

checkbox

kendo-ui

kendo-treeview

kendo-template