gpt4 book ai didi

javascript - 为什么使用模板时不会出现 Treeview 复选框?

转载 作者:行者123 更新时间:2023-12-03 22:52:10 24 4
gpt4 key购买 nike

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

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

最佳答案

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

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

我还建议您使用 Kendo Tree 配置来创建额外的属性,例如 dataTextField、dataValueField.. 而不是将这些添加为 div 占位符元素属性:
$("#treeview").kendoTreeView({
dataTextField:"text",
dataValueField:"value",..})

关于javascript - 为什么使用模板时不会出现 Treeview 复选框?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40125204/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com