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

How can I generate kendo tree view from hierarchical data? AngularJS

本文关键字：视图 AngularJS 分层 数据      更新时间：2023-09-26

如何使用这些数据向kendo-tree-view添加数据源在这种情况下，我的ID是projectatachmentfolderid和父ID - projectatachementfolderparentid 

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>

当我这样做，我没有节点在树…

首先我看到这个错误:

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

查看prop:有C子节点是children而不是fields

相关文章：