Kendo UI treeview 的使用

Kendo UI 中 Treeview 十分适合多级数据的显示与操作。

官网上的例子：

<div id="treeview"></div>
<script>
$("#treeview").kendoTreeView({
  animation: false,
  dataSource: [
    { text: "foo", items: [
      { text: "bar" }
    ] }
  ]
});
</script>

我的使用：

html页面中：（结合了Angular.js 与 k-template）

<div id ="myTree"
         kendo-tree-view ="tree"
         k-data-source ="treeData"
         k-expanded ="true"
         k-on-change ="selectedItem = dataItem">

         <div k-template>
            # if(item.isComposite) {#
            <div class="myTreeStyle" >     
                <div class="mySelect">
                    <span class="mySpan" style="color:darkcyan" ng-init='$scope.compositeTypes.name="AND"'>{{$scope.compositeTypes.name}}</span>
                    <select class="logicSelect" style="width:31px; color:darkcyan" ng-model="$scope.compositeTypes" ng-options="compositeType.name for compositeType in compositeTypes" ng-change="compositeChange($scope.compositeTypes.name,dataItem)" >
                        <option value="" disabled style="color:darkcyan; background-color:gainsboro;">- Select Logic -</option>
                    </select>
                    <span class="spanLogic"></span>
                </div>
                <a ng-click="addComposite(dataItem)" class="mybtn k-icon k-i-insert-n" data-toggle="tooltip" title="Add Group"></kendo-button>
                <a ng-click="addSingle(dataItem)"  class="mybtn k-icon k-i-insert-m" data-toggle="tooltip" title="Add Expression"></kendo-button>
                <a ng-click="remove(dataItem)" class="mybtn k-icon k-i-close" data-toggle="tooltip" title="Remove Item"></a>
            </div>

#} else {#

<div>

......

</div>

         <div k-template>

js文件中：

var filterNode = kendo.data.Node.define({
            id: null,
            logic: null,
            expanded: null,
            deep: null,
            isComposite: null,
            field: null,
            operator: null,
            value: null,
            valueType: null,
            items: null
        });

        var initFilterData = [{
            id: 0,
            logic: "and",
            expanded: true,
            deep: 0,
            isComposite: true,
            field: null,
            operator: null,
            value: null,
            valueType: null,
            items: []
        }];

$scope.treeData = new kendo.data.HierarchicalDataSource(
            {
                data: initFilterData,
                schema: {
                    model: filterNode
                }
            });

        $scope.makeItem = function (i) {
            return { id: i };
        };

        $scope.addSingle = function (dataItem) {
            var id = dataItem.id;
            var barDataItem = $scope.tree.dataSource.get(id);
            var barElement = $scope.tree.findByUid(barDataItem.uid);
            //var node = treeview.findByText("bar");
            $scope.tree.select(barElement);

            var itemId = (dataItem.deep + 1) * 1000;
            if (counter[dataItem.deep + 1]) {
                itemId = itemId + counter[dataItem.deep + 1].number;
                counter[dataItem.deep + 1].number += 1;
            } else {
                counter[dataItem.deep + 1] = { deep: dataItem.deep + 1, number: 1 };
            }

            console.log("AddS:  Deep: " + counter[dataItem.deep + 1].deep + ", Number: " + counter[dataItem.deep + 1].number + ", ID: " + itemId);

            var newItem = $scope.makeItem(itemId);
            newItem.logic = null;
            newItem.expanded = true;
            newItem.deep = dataItem.deep + 1;
            newItem.isComposite = false;
            newItem.field = initField;
            newItem.operator = initOperator;
            newItem.value = "unknow";
            newItem.valueType = initFieldType;
            newItem.items = null;
            $scope.tree.append(newItem, $scope.tree.select());
            $scope.tree.select(null);
        };

        $scope.addComposite = function (dataItem) {
            var id = dataItem.id;


            var barDataItem = $scope.tree.dataSource.get(id);
            var barElement = $scope.tree.findByUid(barDataItem.uid);
            //var node = treeview.findByText("bar");
            $scope.tree.select(barElement);

            var itemId = (dataItem.deep + 1) * 1000;
            if (counter[dataItem.deep + 1]) {
                itemId = itemId + counter[dataItem.deep + 1].number;
                counter[dataItem.deep + 1].number += 1;
            } else {
                counter[dataItem.deep + 1] = { deep: dataItem.deep + 1, number: 1 };
            }

            console.log("AddC:  Deep: " + counter[dataItem.deep + 1].deep + ", Number: " + counter[dataItem.deep + 1].number + ", ID: " + itemId);

            var newItem = $scope.makeItem(itemId);
            newItem.logic = initLogic;
            newItem.expanded = true;
            newItem.deep = dataItem.deep + 1;
            newItem.isComposite = true;
            newItem.field = null;
            newItem.operator = null;
            newItem.value = null;
            newItem.valueType = null;
            newItem.items = [];

            $scope.tree.append(newItem, $scope.tree.select());
            $scope.tree.select(null);
        };

function removeChildrenNumber(dataItem) {
            if (dataItem.isComposite) {
                for (var j = 0; j < counter.length; j++) {
                    if (dataItem.deep + 1 == counter[j].deep) {
                        counter[j].number = counter[j].number - dataItem.items.length;
                    }
                }
                for (var i = 0; i < dataItem.items.length; i++) {
                    var childItem = dataItem.items[i];
                    removeChildrenNumber(childItem);
                }
            }
        }

        $scope.remove = function (dataItem) {
            var id = dataItem.id;

            for (var i = 0; i < counter.length; i++) {
                if (dataItem.deep == counter[i].deep) {
                    console.log("Remove:  Deep: " + counter[i].deep + ", Number: " + counter[i].number + ", ID: " + id);
                    counter[i].number = counter[i].number - 1;
                    removeChildrenNumber(dataItem);
                }
            }

            var array = dataItem.parent();
            for (var i = 0; i < array.length; i++) {
                if (array[i].id == id) {
                    array.splice(i, 1);
                }
            }
        };

以上代码可实现treeview的添加、删除，细节代码未给出。