Question

我正在使用ABN tree，我想从代码中选择一个特定元素，主要是因为我可以实现搜索功能。

我尝试在相关元素上设置“selected”属性。这只是部分有效：元素被选中，但当用户点击另一个元素时，它不会被取消选择。

在源代码中，我看到ABN树内部有一个select_branch函数。但是，我还没有想出如何从外部访问它 - 我无法获得对范围的引用。

那么，我该怎么做呢？我很开心使用不同的树形控件。

Answer 1

您可以将select-text属性添加到abntree并将select-text绑定到模型。 e.g。

<abn-tree tree-data="my_data" on-select="my_tree_handler(branch)" select-text="textToSelect"></abn-tree>

在树指令中，将selectText条目添加到范围。因此，你的范围将是

scope: {
    treeData: '=',
    onSelect: '&',
    initialSelection: '@',
    selectText: '=',
    treeControl: '='
  },

然后在指令中的return语句之前添加以下代码

scope.$watch('selectText', function() {
    if (scope.selectText) {
      for_each_branch(function (b) {
        if (b.label === scope.selectText) {
          return select_branch(b);
        }
      });
    }
  });

现在将模型的文本设置为您想要的值，它应该在树中选择它并调用您可能在树上设置的任何选择处理程序。

希望这有帮助。

Answer 2

我已经更改了上面的代码（可能使用此版本的abn-tree代码失败），通过此更改，您可以按ID或按标题选择节点.hope有助于：）

在abn_tree source js文件中将范围更改为：

 scope: {
              treeData: '=',
              onSelect: '&',
              onDblSelect: '&',
              initialSelection: '=',
              selectedText: '=',//parichehr
              selectedId: '=',//parichehr
              treeControl: '=',
              labelFiled: '=',
              idFiled: '=',//parichehr
              childrenField: '='
          },

然后将此部分添加到以下链接：function ...

 link: function (scope, element, attrs) {

              scope.label = scope.labelFiled || 'Title';
              scope.id = scope.idFiled || 'Id';//parichehr
              scope.children = scope.childrenField || 'Children';

然后将此部分添加到TreeDataWatcher ...：

  var treeDataWatcher = scope.$watch('treeData', onTreeDataChange, true);
              //parichehr start
              var selectedTextWatcher = scope.$watch('selectedText', function () {
                  if (scope.selectedText) {
                      forEachBranch(function (b) {
                          if (b[scope.label] === scope.selectedText) {
                              return selectBranch(b);
                          }
                      });
                  }
              });
              var selectedIdWatcher = scope.$watch('selectedId', function () {
                  if (scope.selectedId) {
                      forEachBranch(function (b) {
                          if (b[scope.id] === scope.selectedId) {
                              return selectBranch(b);
                          }
                      });
                  }
              });
              //parichehr end

最后将观察者放在最后：

scope.$on('$destroy', function() {
                  if (treeDataWatcher) treeDataWatcher();
                  if (initialWatcher) initialWatcher();
                  //parichehr start
                  if (selectedTextWatcher) selectedTextWatcher();
                  if (selectedIdWatcher) selectedIdWatcher();
                  //parichehr end
              });

在您的HTML中

您将进行以下更改：如果要按节点标题选择：

<abn-tree tree-data="my_data" on-select="my_tree_handler(branch)" selected-text="textToSelect"></abn-tree>

如果您想按节点ID选择：

<abn-tree tree-data="my_data" on-select="my_tree_handler(branch)" selected-id="idToSelect"></abn-tree>

Angular ABN树：如何从代码中选择一个元素？

2 个答案: