Question

我正在使用Angular JS构建一个网站，作为与WebApi后端通信的表示框架，需要使用大量数据（略低于1 MB）进行渲染和树控制。树需要支持复选框，并在选择叶子或分支时提供事件。用户必须通过节点名称或与节点关联的已知ID来搜索树中的节点。

我一直在关注Telerik的Kendo UI但是我遇到了以下无法解决的问题：

当树的loadOnDemand设置为false（由于数据大小而必须这样）时，控件的查找方法不起作用
findByText只支持完全匹配，据我所知（不是必要的功能，但肯定是可取的）
根据第二个Id

我很乐意将一些工作卸载到我们的WebApi后端，但无法看到Telerik控件如何支持这一点。我非常感谢帮助解决这些问题，或者建议使用Telerik树控制的高效替代方案

我尝试在Telerik的dojo上创建一个示例代码段，但注册过程对我不起作用。我已经创建了一个小样本来演示问题，但它似乎也可以在这里运行。

 angular.module("KendoDemos", ["kendo.directives"]);

    function MyCtrl($scope) {
      $scope.treeData = new kendo.data.HierarchicalDataSource({
        data: [{
          id: 1,
          extenalId: "AA",
          text: "Item 1"
        }, {
          id: 2,
          extenalId: "BA",
          text: "Item 2",
          items: [{
            id: 21,
            extenalId: "BB",
            text: "SubItem 2.1"
          }, {
            id: 22,
            extenalId: "BC",
            text: "SubItem 2.2"
          }]
        }, {
          id: 3,
          extenalId: "CC",
          text: "Item 3"
        }]
      });

      $scope.itemTemplate = "<span title='{{dataItem.extenalId}}'>{{dataItem.text}}</span>";
      $scope.findNode = findNode;
      $scope.findById = findById;
      $scope.findByExternalId = findByExternalId;


      function findNode(item) {
        var treeView = $("#sTree").data("kendoTreeView");
        // TODO: How do we find SubItem 2.1 if the tree has not been expanded
        // TODO: How do we do a contains search

        var node = treeView.findByText($scope.search);
        if (node.length) {
          console.log("found");
          treeView.expandTo(treeView.dataItem(node));
          if (node[0].textContent === $scope.search)
            treeView.select(node);
        }
      }

      function findById() {
        var treeView = $("#sTree").data("kendoTreeView");
        //TODO: How do we find 22 if the tree has not been expanded
        var dataItem = treeView.dataSource.get($scope.searchId);
        var node = treeView.findByUid(dataItem.uid);
        if (node.length) {
          console.log("found by id");
          treeView.expandTo(treeView.dataItem(node));
          treeView.select(node);
        } else
          console.log("Not found by id");
      }

      function findByExternalId() {
        var treeView = $("#sTree").data("kendoTreeView");
        //TODO: How do we find BB
        var dataItem = treeView.dataSource.get($scope.searchId2);
        var node = treeView.findByUid(dataItem.uid);
        if (node.length) {
          console.log("found by id");
          treeView.expandTo(treeView.dataItem(node));
          treeView.select(node);
        } else
          console.log("Not found by id");
      }






      window.$scope = $scope;
    }

<!DOCTYPE html>
<html>

<head>
  <base href="http://demos.telerik.com/kendo-ui/treeview/angular">
  <style>
    html {
      font-size: 12px;
      font-family: Arial, Helvetica, sans-serif;
    }
  </style>
  <title></title>
  <link href="http://cdn.kendostatic.com/2014.2.903/styles/kendo.common.min.css" rel="stylesheet" />
  <link href="http://cdn.kendostatic.com/2014.2.903/styles/kendo.default.min.css" rel="stylesheet" />
  <link href="http://cdn.kendostatic.com/2014.2.903/styles/kendo.dataviz.min.css" rel="stylesheet" />
  <link href="http://cdn.kendostatic.com/2014.2.903/styles/kendo.dataviz.default.min.css" rel="stylesheet" />
  <script src="http://cdn.kendostatic.com/2014.2.903/js/jquery.min.js"></script>
  <script src="http://cdn.kendostatic.com/2014.2.903/js/angular.min.js"></script>
  <script src="http://cdn.kendostatic.com/2014.2.903/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>Searchable TreeView</h4>
        <input data-ng-model="search" placeholder="Locate node" data-ng-change="findNode()" />
        <div id="sTree" kendo-tree-view="tree" k-data-source="treeData" k-template="itemTemplate" k-on-change="selectedItem = dataItem"></div>
      </div>
      <div class="box-col" ng-show="selectedItem">
        <h4>Selected: {{selectedItem.text}}</h4>
      </div>
      <div class="box-col">
        <h4><input data-ng-model="searchId"  placeholder="ID"  /><button ng-click="findById()">Find </h4>
        <h4><input data-ng-model="searchId2"  placeholder="Extenal ID" /><button ng-click="findByExternalId()">Find </h4>
      </div>
    </div>
    <style scoped>
      .k-treeview .k-in {
        padding: 5px;
      }
    </style>
  </div>

</body>

</html>

可以使用KendoUI的TreeView搜索大树的角树

0 个答案: