最佳答案
<!DOCTYPE html>
<html>
<head>
<base href="https://demos.telerik.com/kendo-ui/treeview/angular">
<style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
<title></title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.1.221/styles/kendo.common-material.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.1.221/styles/kendo.material.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.1.221/styles/kendo.material.mobile.min.css" />
<script src="https://kendo.cdn.telerik.com/2018.1.221/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2018.1.221/js/angular.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2018.1.221/js/kendo.all.min.js"></script>
</head>
<body>
<div id="example" ng-app="KendoDemos">
<div class="demo-section k-content" ng-controller="MyCtrl">
<div class="box-col">
<div class="box">
<h4>TreeView</h4>
<div class="row header">
<p><b>header</b>
<br />
<br />(sized to content)</p>
</div>
<div class="row content">
<div kendo-tree-view="tree"
k-data-source="treeData"
k-on-change="selectedItem = dataItem">
<span k-template>
{{dataItem.text}} <button class='k-button' ng-click='click(dataItem)'>Select</button>
</span>
</div>
</div>
</div>
<div class="box-col" ng-show="selectedItem">
<h4>Selected: {{selectedItem.text}}</h4>
<button class="k-button" ng-click="addAfter(selectedItem)">Add item below</button>
<button class="k-button" ng-click="addBelow(selectedItem)">Add child item</button>
<button class="k-button" ng-click="remove(selectedItem)">Delete</button>
</div>
</div>
</div>
</div>
<script>
angular.module("KendoDemos", [ "kendo.directives" ])
.controller("MyCtrl", function($scope){
$scope.treeData = new kendo.data.HierarchicalDataSource({ data: [
{ text: "Item 1" },
{ text: "Item 2", expanded: true, items: [
{ text: "SubItem 2.1" },
{ text: "SubItem 2.2" },{ text: "SubItem 2.2" },{ text: "SubItem 2.2" },{ text: "SubItem 2.2" },{ text: "SubItem 2.2" },{ text: "SubItem 2.2" },{ text: "SubItem 2.2" },{ text: "SubItem 2.2" },{ text: "SubItem 2.2" },{ text: "SubItem 2.2" },{ text: "SubItem 2.2" },{ text: "SubItem 2.2" },{ text: "SubItem 2.2" },{ text: "SubItem 2.2" },{ text: "SubItem 2.2" },{ text: "SubItem 2.2" },{ text: "SubItem 2.2" },{ text: "SubItem 2.2" },{ text: "SubItem 2.2" },{ text: "SubItem 2.2" },{ text: "SubItem 2.2" },{ text: "SubItem 2.2" },{ text: "SubItem 2.2" },{ text: "SubItem 2.2" },{ text: "SubItem 2.2" },{ text: "SubItem 2.2" },{ text: "SubItem 2.2" },{ text: "SubItem 2.2" },{ text: "SubItem 2.2" },{ text: "SubItem 2.2" },{ text: "SubItem 2.2" },{ text: "SubItem 2.2" },{ text: "SubItem 2.2" },{ text: "SubItem 2.2" },{ text: "SubItem 2.2" },{ text: "SubItem 2.2" },{ text: "SubItem 2.2" },{ text: "SubItem 2.2" },{ text: "SubItem 2.2" },{ text: "SubItem 2.2" },{ text: "SubItem 2.2" },{ text: "SubItem 2.2" },{ text: "SubItem 2.2" },{ text: "SubItem 2.2" }
] },
{ text: "Item 3" }
]});
$scope.click = function(dataItem) {
alert(dataItem.text);
};
function makeItem() {
var txt = kendo.toString(new Date(), "HH:mm:ss");
return { text: txt };
};
$scope.addAfter = function(item) {
var array = item.parent();
var index = array.indexOf(item);
var newItem = makeItem();
array.splice(index + 1, 0, newItem);
};
$scope.addBelow = function() {
// can't get this to work by just modifying the data source
// therefore we're using tree.append instead.
var newItem = makeItem();
$scope.tree.append(newItem, $scope.tree.select());
};
$scope.remove = function(item) {
var array = item.parent();
var index = array.indexOf(item);
array.splice(index, 1);
$scope.selectedItem = undefined;
};
})
</script>
<style>
html,body {
height: 100%;
margin: 0
}
.box {
display: flex;
flex-flow: column;
height: 100%;
}
.box .row {
border: 1px dotted grey;
}
.box .row.header {
flex: 0 1 auto;
/* The above is shorthand for:
flex-grow: 0,
flex-shrink: 1,
flex-basis: auto
*/
}
#example{height: 100%;}
#example{height: 100%;}
.box{
max-height: 100vh !important;
}
.box .row.content {
flex: 1 1 auto;
overflow-y: scroll !important;
}
</style>
</body>
</html>关于html - 如何使我的 kendo treeview div 可滚动且不展开，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50224631/