テンプレートを使用しているときにツリービューのチェックボックスが表示されないのはなぜですか？

現在の問題は、チェックボックスが私の剣道のツリービューに表示されないことです。テンプレートを使用する理由は、チェックされたイベントをより簡単に処理できるチェックボックス名を定義したかったのですが、テンプレートの形式が正しいかどうかわかりません。テンプレートを使用しているときにツリービューのチェックボックスが表示されないのはなぜですか？

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

出典

2016-10-19 Austin Hoh

<!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-19 09:11:30 FuatOgme

テンプレートを使用しているときにツリービューのチェックボックスが表示されないのはなぜですか？

答えて

関連する問題