Question

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

＆＃13;

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

＆＃13;

Answer 1

＆＃13;

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

＆＃13;

也许您应该尝试将checkbox元素插入树模板脚本中。然后，使用树模板配置渲染模板脚本，如下所示

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

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

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

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

为什么使用模板时不会出现树形视图复选框？

1 个答案: