Kendo UI treeview 的使用

最新推荐文章于 2024-07-16 18:06:50 发布

Jimmie_w

最新推荐文章于 2024-07-16 18:06:50 发布

阅读量5.8k

点赞数

分类专栏： Web 文章标签： KendoUI treeview Angular k-template kendo-tree-view

本文链接：https://blog.csdn.net/JimmieW/article/details/46738233

版权

本文介绍了如何在Kendo UI中使用treeview组件，结合Angular.js和k-template来展示和操作多级数据。示例代码展示了如何创建、添加、删除节点，并通过kendo-data-source和k-on-change实现数据交互。

摘要由CSDN通过智能技术生成

Kendo UI 中 Treeview 十分适合多级数据的显示与操作。

官网上的例子：

<div id="treeview"></div>
<script>
$("#treeview").kendoTreeView({
animation: false,
dataSource: [
{ text: "foo", items: [
{ text: "bar" }
] }
]
});
</script>

我的使用：

html页面中：（结合了Angular.js 与 k-template）

<div id ="myTree"
kendo-tree-view ="tree"
k-data-source ="treeData"
k-expanded ="true"
k-on-change ="selectedItem = dataItem">

<div k-template>
# if(item.isComposite) {#
<div class="myTreeStyle" >
<div class="mySelect">
<span class="mySpan" style="color:darkcyan" ng-init='$scope.compositeTypes.name="AND"'>{ {$scope.compositeTypes.name}}</span>
<select class="logicSelect" style="width:31px; color:darkcyan" ng-model="$scope.compositeTypes" ng-options="compositeType.name for compositeType in compositeTypes" ng-change="compositeChange($scope.compositeTypes.name,dataItem)" >
<option value="" disabled style="color:darkcyan; background-color:gainsboro;">- Select Logic -</option>