如何从分层数据生成剑道树视图? AngularJS

时间:2015-09-21 07:15:07

标签: javascript asp.net angularjs kendo-ui kendo-treeview

如何使用此数据将数据源添加到kendo-tree-view, 在这种情况下,我的ID是projectAttachmentFolderId和父ID - projectAttachementFolderParentId

var flatData = [{ "projectAttachmentFolderId": null, "projectAttachementFolderParentId": -1, "projectAttachmentFolderName": "Root", "projectIAttachmentHasUniquePermissions": 1, "projectIAttachmentIsFolder": 1, "canCreate": true, "canDelete": true, "canRead": true, "canUpdate": true, "projectAttachmentFolderId2": null, "projectIAttachmentId": -1, "folderType": null, "id": 0 },
                { "projectAttachmentFolderId": 5112, "projectAttachementFolderParentId": null, "projectAttachmentFolderName": "Dokumenty klienta", "projectIAttachmentHasUniquePermissions": 1, "projectIAttachmentIsFolder": 1, "canCreate": true, "canDelete": true, "canRead": true, "canUpdate": true, "projectAttachmentFolderId2": null, "projectIAttachmentId": 6161, "folderType": 4, "id": 0 },
                { "projectAttachmentFolderId": 5156, "projectAttachementFolderParentId": null, "projectAttachmentFolderName": "Dokumenty klienta", "projectIAttachmentHasUniquePermissions": 1, "projectIAttachmentIsFolder": 1, "canCreate": true, "canDelete": true, "canRead": true, "canUpdate": true, "projectAttachmentFolderId2": null, "projectIAttachmentId": 6228, "folderType": 4, "id": 0 },
                { "projectAttachmentFolderId": 5157, "projectAttachementFolderParentId": null, "projectAttachmentFolderName": "Test projekt", "projectIAttachmentHasUniquePermissions": 1, "projectIAttachmentIsFolder": 1, "canCreate": true, "canDelete": true, "canRead": true, "canUpdate": true, "projectAttachmentFolderId2": null, "projectIAttachmentId": 6230, "folderType": 5, "id": 0 },
                { "projectAttachmentFolderId": 5158, "projectAttachementFolderParentId": 5157, "projectAttachmentFolderName": "test2", "projectIAttachmentHasUniquePermissions": 1, "projectIAttachmentIsFolder": 1, "canCreate": true, "canDelete": true, "canRead": true, "canUpdate": true, "projectAttachmentFolderId2": null, "projectIAttachmentId": 6233, "folderType": 1, "id": 0 },
                { "projectAttachmentFolderId": 5159, "projectAttachementFolderParentId": 5157, "projectAttachmentFolderName": "test3", "projectIAttachmentHasUniquePermissions": 1, "projectIAttachmentIsFolder": 1, "canCreate": true, "canDelete": true, "canRead": true, "canUpdate": true, "projectAttachmentFolderId2": null, "projectIAttachmentId": 6235, "folderType": 1, "id": 0 },
                { "projectAttachmentFolderId": 5160, "projectAttachementFolderParentId": 5157, "projectAttachmentFolderName": "test4", "projectIAttachmentHasUniquePermissions": 1, "projectIAttachmentIsFolder": 1, "canCreate": true, "canDelete": true, "canRead": true, "canUpdate": true, "projectAttachmentFolderId2": null, "projectIAttachmentId": 6236, "folderType": 1, "id": 0 },
                { "projectAttachmentFolderId": 5161, "projectAttachementFolderParentId": null, "projectAttachmentFolderName": "testProj2", "projectIAttachmentHasUniquePermissions": 1, "projectIAttachmentIsFolder": 1, "canCreate": true, "canDelete": true, "canRead": true, "canUpdate": true, "projectAttachmentFolderId2": null, "projectIAttachmentId": 6237, "folderType": 5, "id": 0 },
                { "projectAttachmentFolderId": 5162, "projectAttachementFolderParentId": 5161, "projectAttachmentFolderName": "Dokumenty projektowe", "projectIAttachmentHasUniquePermissions": 1, "projectIAttachmentIsFolder": 1, "canCreate": true, "canDelete": true, "canRead": true, "canUpdate": true, "projectAttachmentFolderId2": null, "projectIAttachmentId": 6238, "folderType": 1, "id": 0 },
                { "projectAttachmentFolderId": 5163, "projectAttachementFolderParentId": 5162, "projectAttachmentFolderName": "FleBOK", "projectIAttachmentHasUniquePermissions": 1, "projectIAttachmentIsFolder": 1, "canCreate": true, "canDelete": true, "canRead": true, "canUpdate": true, "projectAttachmentFolderId2": null, "projectIAttachmentId": 6239, "folderType": 1, "id": 0 },
                { "projectAttachmentFolderId": 5164, "projectAttachementFolderParentId": 5163, "projectAttachmentFolderName": "Dokumenty robocze", "projectIAttachmentHasUniquePermissions": 1, "projectIAttachmentIsFolder": 1, "canCreate": true, "canDelete": true, "canRead": true, "canUpdate": true, "projectAttachmentFolderId2": null, "projectIAttachmentId": 6240, "folderType": 1, "id": 0 },
                { "projectAttachmentFolderId": 5165, "projectAttachementFolderParentId": 5157, "projectAttachmentFolderName": "Dokumenty projektowe", "projectIAttachmentHasUniquePermissions": 1, "projectIAttachmentIsFolder": 1, "canCreate": true, "canDelete": true, "canRead": true, "canUpdate": true, "projectAttachmentFolderId2": null, "projectIAttachmentId": 6242, "folderType": 1, "id": 0 },
                { "projectAttachmentFolderId": 5166, "projectAttachementFolderParentId": 5165, "projectAttachmentFolderName": "FlexBOK", "projectIAttachmentHasUniquePermissions": 1, "projectIAttachmentIsFolder": 1, "canCreate": true, "canDelete": true, "canRead": true, "canUpdate": true, "projectAttachmentFolderId2": null, "projectIAttachmentId": 6243, "folderType": 1, "id": 0 },
                { "projectAttachmentFolderId": 5167, "projectAttachementFolderParentId": 5166, "projectAttachmentFolderName": "Dokumenty finalne", "projectIAttachmentHasUniquePermissions": 1, "projectIAttachmentIsFolder": 1, "canCreate": true, "canDelete": true, "canRead": true, "canUpdate": true, "projectAttachmentFolderId2": null, "projectIAttachmentId": 6244, "folderType": 2, "id": 0 },
                { "projectAttachmentFolderId": 5168, "projectAttachementFolderParentId": 5163, "projectAttachmentFolderName": "Dokumenty finalne", "projectIAttachmentHasUniquePermissions": 1, "projectIAttachmentIsFolder": 1, "canCreate": true, "canDelete": true, "canRead": true, "canUpdate": true, "projectAttachmentFolderId2": null, "projectIAttachmentId": 6248, "folderType": 2, "id": 0 }];
 vm.folders2 = processTable(flatData, "projectAttachmentFolderId", "projectAttachementFolderParentId", -1);

接下来,我将flatData转换为分层文件夹vm.folders2。这是这个功能:

function processTable(data, idField, foreignKey, rootLevel) {
                var hash = {};

                for (var i = 0; i < data.length; i++) {
                    var item = data[i];
                    var id = item[idField];
                    var parentId = item[foreignKey];

                    hash[id] = hash[id] || [];
                    hash[parentId] = hash[parentId] || [];

                    item.items = hash[id];
                    hash[parentId].push(item);
                }

                return hash[rootLevel];
            }

接下来,我尝试将数据发送到我的HierarchicalDataSource。

$scope.treeNewDataSource = new kendo.data.HierarchicalDataSource({
                data: vm.folders2,
                schema: {
                    model: {
                        id: "projectattachmentfolderid",
                        fields: {
                            projectAttachmentFolderId:{  type: "number" },
                            projectAttachementFolderParentId: { type: "number" },
                            projectAttachmentFolderName: { type: "string" },
                            projectIAttachmentHasUniquePermissions: { type: "number" },
                            projectIAttachmentIsFolder: { type: "number" },
                            canCreate: { type: "boolean" },
                            canDelete: { type: "boolean" },
                            canRead: { type: "boolean" },
                            canUpdate: { type: "boolean" },
                            projectAttachmentFolderId2: { type: "number" },
                            projectIAttachmentId: { type: "number" },
                            folderType: { type: "number" },
                            id: { type: "number" }
                        },
                        haschildren: function (x) {
                            var id = x.projectattachmentfolderid;
                            //alert('id:' + x.id + ' parent: ' + x.parent);
                            var flatData = vm.folders2;
                            for (var i = 0; i < flatdata.length; i++) {
                                if (flatdata[i].projectattachementfolderparentid == id) {
                                    return true;
                                }
                            }
                            return false;
                        }
                    }
                }
            });    

至少我在cshtml中将它添加到我的树视图中:

<div kendo-tree-view="tree" class="hasMenu" id="tree" k-data-source="treeData">
            <span class="hasMenu treeViewSpans" k-template id="{{dataItem.projectAttachmentFolderId}}" projectattachmentfolderid="{{dataItem.projectAttachmentFolderId}}" projectattachementfolderparentid="{{dataItem.projectAttachementFolderParentId}}">
                {{dataItem.projectAttachmentFolderName}}
            </span>
        </div>

当我这样做时,我没有树中的节点......出了什么问题?

1 个答案:

答案 0 :(得分:1)

首先我看到了这个错误:

            var dsTree = new kendo.data.HierarchicalDataSource({
            data: vm.folders2,
            schema: {
                model: {
                    id: "projectAttachmentFolderId",
                    children: "items",
                    hasChildren: "HasChildren"
                }
            }
        });

看看道具: C hildren 它是children而不是fields