Dijit 트리 내 노드 이동

Question

사용자가 범주를 구성 할 수 있도록 입력 도구로 트리를 사용하고 있습니다.

사용자들이 최상위 레벨에서 노드를 이동할 수 있고, 특히 같은 부모 아래에서 노드 순서를 바꿀 수 있기를 바랍니다.

저장소가 업데이트 될 때까지 모든 것이 잘 보입니다. 디스플레이가 잘못되었습니다. 이동 된 항목이 올바른 위치에 표시되지 않습니다.

JSFiddle

https://bugs.dojotoolkit.org/ticket/18142

require([ 
    "dojo/aspect", 
    "dojo/store/Memory", 
    "dojo/store/Observable", 
    "dijit/Tree", 
    "dijit/tree/ObjectStoreModel", 
    "dijit/tree/dndSource", 
    "dojo/domReady!" 
], function(aspect, Memory, Observable, Tree, ObjectStoreModel, dndSource) { 

    var observableStore, model; 
    var memoryStore = new Memory({ 
    data: [{ 
     "id": 10, 
     "position": 0, 
     "name": "top", 
     "parent": null 
    }, { 
     "id": 19, 
     "position": 18, 
     "name": "Audio", 
     "parent": 10 
    }, { 
     "id": 23, 
     "position": 19, 
     "name": "Monitors", 
     "parent": 10 
    }, { 
     "id": 20, 
     "position": 20, 
     "name": "Communication", 
     "parent": 10 
    }, { 
     "id": 21, 
     "position": 28, 
     "name": "Video", 
     "parent": 10 
    }, { 
     "id": 18, 
     "position": 29, 
     "name": "Camera", 
     "parent": 10 
    }, { 
     "id": 22, 
     "position": 40, 
     "name": "Five", 
     "parent": 21 
    }, { 
     "id": 24, 
     "position": 60, 
     "name": "Networking", 
     "parent": 21 
    }, { 
     "id": 25, 
     "position": 70, 
     "name": "Toasters", 
     "parent": 18 
    }], 
    mayHaveChildren: function(object) { 
     var children = this.store.getChildren(object); 
     return children.length > 0; 
    }, 
        getChildren: function (object) { 
        return this.query({parent: object.id}); 
       } 
    }); 

    observableStore = new Observable(memoryStore); 

    model = new ObjectStoreModel({ 
    store: observableStore, 
    query: { 
     name: "top" 
    } 
    }); 

    aspect.around(memoryStore, "put", function(originalPut) { 
    // To support DnD, the store must support put(child, {parent: parent}). 
    // Since memory store doesn't, we hack it. 
    // Since our store is relational, that just amounts to setting child.parent 
    // to the parent's id. 
    return function(obj, options) { 
     if (options && options.parent) { 
     obj.parent = options.parent.id; 
     } 
     return originalPut.call(memoryStore, obj, options); 
    } 
    }); 

    var tree =new Tree({ 
    model: model, 
    dndController: dndSource, 
    betweenThreshold: 5, 
    showRoot: false, 
    persist: false 
    }, "category-tree").startup(); 


}); 

-이에 더 많은 시간을 투자 할 수있는,하지만 난 싶지 않아. 전통적인 접근 방식을 선택하고 읽기 전용 트리보기를 제공합니다.

Answer 1

Observable로 랩핑하기 전에 상점의 put 함수 주위에 애스펙트를 배치해야합니다. 당신의 코드 Observable은 대체 된 put 함수에 접근 할 수 없습니다. example을 자세히 복제하면 작동합니다.

require([ 
    "dojo/aspect", 
    "dojo/store/Memory", 
    "dojo/store/Observable", 
    "dijit/Tree", 
    "dijit/tree/ObjectStoreModel", 
    "dijit/tree/dndSource", 
    "dojo/domReady!" 
], function(aspect, Memory, Observable, Tree, ObjectStoreModel, dndSource) { 

    var observableStore, model; 
    var memoryStore = new Memory({ 
    data: [{ 
     "id": 10, 
     "position": 0, 
     "name": "top", 
     "parent": null 
    }, { 
     "id": 19, 
     "position": 18, 
     "name": "Audio", 
     "parent": 10 
    }, { 
     "id": 23, 
     "position": 19, 
     "name": "Monitors", 
     "parent": 10 
    }, { 
     "id": 20, 
     "position": 20, 
     "name": "Communication", 
     "parent": 10 
    }, { 
     "id": 21, 
     "position": 28, 
     "name": "Video", 
     "parent": 10 
    }, { 
     "id": 18, 
     "position": 29, 
     "name": "Camera", 
     "parent": 10 
    }, { 
     "id": 22, 
     "position": 40, 
     "name": "Five", 
     "parent": 21 
    }, { 
     "id": 24, 
     "position": 60, 
     "name": "Networking", 
     "parent": 21 
    }, { 
     "id": 25, 
     "position": 70, 
     "name": "Toasters", 
     "parent": 18 
    }], 
    mayHaveChildren: function(object) { 
     var children = this.store.getChildren(object); 
     return children.length > 0; 
    }, 
        getChildren: function (object) { 
        return this.query({parent: object.id}); 
       } 
    }); 

    aspect.around(memoryStore, "put", function(originalPut) { 
    // To support DnD, the store must support put(child, {parent: parent}). 
    // Since memory store doesn't, we hack it. 
    // Since our store is relational, that just amounts to setting child.parent 
    // to the parent's id. 
    return function(obj, options) { 
     if (options && options.parent) { 
     obj.parent = options.parent.id; 
     } 
     return originalPut.call(memoryStore, obj, options); 
    } 
    }); 

    observableStore = new Observable(memoryStore); 

    model = new ObjectStoreModel({ 
    store: observableStore, 
    query: { 
     name: "top" 
    } 
    }); 


    var tree =new Tree({ 
    model: model, 
    dndController: dndSource, 
    showRoot: false, 
    persist: false 
    }, "category-tree").startup(); 


}); 

JSFiddle의 포크.

업데이트 : 위의 해결 방법은 betweenThreshold 옵션 (항목을 다른 항목의 하위 항목으로 만드는 대신 다른 항목 사이에 놓을 수있는 기능)을 지원하지 않습니다. 공식 참조 가이드조차도 작동하지 않습니다. 이것은 아이템의 위치를 ​​올바르게 지원하는 저장소를 필요로합니다 (MemoryStore는하지 않으며 put 함수에 대한 해킹으로는 충분하지 않습니다). 한 가지 옵션은 더 이상 사용되지 않는 dojo/data/ItemFileWriteStore로 대체하는 것입니다.

require([ 
    "dojo/data/ItemFileWriteStore", 
    "dijit/Tree", 
    "dijit/tree/TreeStoreModel", 
    "dijit/tree/dndSource", 
    "dojo/domReady!" 
], function(ItemFileWriteStore, Tree, TreeStoreModel, dndSource) { 

    var model; 

    var categories = { 
    identifier: 'id', 
    label: 'name', 
    items: [ 
     { id: '0', name:'Foods', numberOfItems:1, children:[ {_reference: '1'}, {_reference: '2'}, {_reference: '3'} ] }, 
      { id: '1', name:'Fruits', numberOfItems:1, children:[ {_reference: '4'} ] }, 
       { id: '4',name:'Citrus', numberOfItems:1, items:[ {_reference: '5'} ] }, 
        { id: '5', name:'Orange'}, 
     { id: '2', name:'Vegetables', numberOfItems:0}, 
     { id: '3', name:'Cereals', numberOfItems:0} 
    ] 
}; 
    var memoryStore = new ItemFileWriteStore({data: categories}); 

    var model = new TreeStoreModel({store: memoryStore, query:{id: "0"}}); 


    var tree =new Tree({ 
    model: model, 
    dndController: dndSource, 
    betweenThreshold: 5, 
    showRoot: false, 
    persist: false 
    }, "category-tree").startup(); 


}); 

또 다른 JSFiddle입니다. 이 example을 참조 할 수도 있습니다.