在Angular JS框架内从Kendo树视图中检索所选项目的最佳方法

时间:2014-06-16 16:58:05

标签: angularjs kendo-treeview

我正在将Kendo UI树视图小部件集成到我的基于Angular的应用程序中(使用asp.net mvc4框架)。 我正在寻找关于检索树选定项目的最佳方法的建议,因为我不确定我这样做的方式 - e.sender._current.text(); - 是最佳实践。

在下面的html div中,您会注意到k-on-change="vm.onTreeSelect(kendoEvent)"以及function onTreeSelect(e)中关联的js事件。

我发现当前的文档在http://kendo-labs.github.io/angular-kendo/#/TreeView处有点弱,所以我正在寻找的是目前的两件事:

1)从树视图中获取当前所选项目的最佳方法。

2)当我到达树的底部时,我怎么知道。

提前感谢您的建议,请在下面找到一些代码片段......

我的html代码段是:

  <div class="widget-content text-left text-info">
         Selected: {{vm.selected}}
         <span id="treeview" kendo-tree-view="tree"
             k-options="vm.treeOptions"
             k-data-source="vm.hierarchy"                                                   
             k-on-change="vm.onTreeSelect(kendoEvent)">
         </span>
  </div>

我的javascript代码片段是:

 (function () {
   'use strict';
   var controllerId = 'dashboard';
   angular.module('app').controller(controllerId, ['common', 'datacontext', dashboard]);
   vm.hierarchy = [];
   vm.onTreeSelect = onTreeSelect;
   vm.treeOptions = {
        checkboxes: {
            checkChildren: true
        }
    };
   vm.selected = null;

   activate();

    function activate() {
        var promises = [getHierarchy(), getCountries()];
        common.activateController(promises, controllerId)
            .then(function () { log('Activated Dashboard View'); });
    }

   function dashboard(common, datacontext) {

        function onTreeSelect(e) {
            vm.selected = e.sender._current.text();            
        }
  })();

1 个答案:

答案 0 :(得分:5)

获取数据项的最佳方法是:

var dataItem = e.sender.dataItem(e.sender.select());

这将为您提供附加了所有数据的项目。确保在更改事件中调用它。这可行,因为e.sender实际上是角度的剑道树视图,其他方法是标准的。还将kendoEvent作为事件参数传递。