0

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

<!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>

4

1 回答 1

0 

<!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()),

您还可以添加一些样式/类或额外的标签元素，使您的模板复选框看起来像标准剑道复选框。

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

$("#treeview").kendoTreeView({
            dataTextField:"text",
            dataValueField:"value",..})
于 2016-10-19T09:11:30.640 回答