剑道树视图Angularjs上的自定义按钮

Posted 2023-05-07

【中文标题】剑道树视图Angularjs上的自定义按钮

【英文标题】：Custom buttons on Kendo tree view Angularjs

【发布时间】：2018-11-11 19:11:05

【问题描述】：

我正在尝试在 Kendo 树视图节点中添加多个按钮。我已经使用模板添加了多个按钮，但由于整个节点都在使用链接，因此未能实现它们的功能。请在下面找到 html 和 JS

HTML

<div kendo-tree-view="tree" k-data-source="treeData" class="hasMenu" k-on-change="selectedItem = dataItem">
    <span k-template>
        dataItem.text 
        <i class="fa fa-plus" aria-hidden="true"></i>
        <i class="fa fa-trash" aria-hidden="true"></i>
    </span>
</div>

JS

$scope.treeData = new kendo.data.HierarchicalDataSource(
        
            data: [
             
                 text: "My Product",
                 items: [
                     
                         text: "Building Materials",
                         items: [
                              text: "Lumber & Composites" ,
                              text: "Molding" ,
                              text: "Drywall" ,
                              text: "Doors" 
                         ]
                     ,
                      text: "Decor" ,
                      text: "Chemicals" ,
                      text: "Hardware" ,
                      text: "Lighting & Fixtures" ,
                      text: "Paint" ,
                      text: "Storage & Organization" ,
                      text: "Window Coverings" ,
                 ]
             ,
             
                 text: "Service",
                 items: [
                      text: "Labor" ,
                      text: "Installation" ,
                      text: "Removal Service" ,
                      text: "Travel" ,
                      text: "Ladder" ,
                      text: "Service Call" ,
                 ]
             ,
              text: "Discount" 
            ]
        ); 

截图供参考：

【参考方案1】：

我已经在我身边测试了一个类似的场景，它在我的情况下可以正常工作。这是我的测试dojo。请您检查一下，让我知道您的情况是否有所不同或仍然无法正常工作。

【参考方案2】：

我查看了 kendo UI 树视图的文档，请查看here 上面的同一链接中还有一个实现按钮的工作示例。

我尝试使用您提供的代码来实现示例，它似乎工作正常，如果这是您要找的，请告诉我！

angular.module("KendoDemos", ["kendo.directives"])
  .controller("MyCtrl", function($scope) 
    $scope.treeData = new kendo.data.HierarchicalDataSource(
      data: [
          text: "My Product",
          items: [
              text: "Building Materials",
              items: [
                  text: "Lumber & Composites"
                ,
                
                  text: "Molding"
                ,
                
                  text: "Drywall"
                ,
                
                  text: "Doors"
                
              ]
            ,
            
              text: "Decor"
            ,
            
              text: "Chemicals"
            ,
            
              text: "Hardware"
            ,
            
              text: "Lighting & Fixtures"
            ,
            
              text: "Paint"
            ,
            
              text: "Storage & Organization"
            ,
            
              text: "Window Coverings"
            ,
          ]
        ,
        
          text: "Service",
          items: [
              text: "Labor"
            ,
            
              text: "Installation"
            ,
            
              text: "Removal Service"
            ,
            
              text: "Travel"
            ,
            
              text: "Ladder"
            ,
            
              text: "Service Call"
            ,
          ]
        ,
        
          text: "Discount"
        
      ]
    );
    $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($event) 
      $event.stopPropagation();
      // 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, $event) 
    //  $event.stopPropagation();
      var array = item.parent();
      var index = array.indexOf(item);
      array.splice(index, 1);

      $scope.selectedItem = undefined;
    ;
  )

.k-treeview .k-in 
  padding: 5px;

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<!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.2.516/styles/kendo.common-material.min.css" />
  <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.2.516/styles/kendo.material.min.css" />
  <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.2.516/styles/kendo.material.mobile.min.css" />

  <script src="https://kendo.cdn.telerik.com/2018.2.516/js/jquery.min.js"></script>
  <script src="https://kendo.cdn.telerik.com/2018.2.516/js/angular.min.js"></script>
  <script src="https://kendo.cdn.telerik.com/2018.2.516/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">
        <h4>TreeView</h4>
        <div kendo-tree-view="tree" k-data-source="treeData" k-on-change="selectedItem = dataItem">
          <span k-template>
                     dataItem.text
                     
        <i class="fa fa-plus" aria-hidden="true" ng-click="addBelow($event)"></i>
        <i class="fa fa-trash" aria-hidden="true" ng-click="selectedItem=dataItem;remove(selectedItem, $event)"></i>
                 </span>
        </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>


</body>

</html>