javascript - Dojo 1.10 - 刷新 TreeView ，同时保持展开的节点状态

Question

我有一个 Dojo 树，我在其中使用 getIconClass 方法根据项目值更改图标:

_tree = new Tree({
    model: _model,
    getIconClass: function(item) {
        if (item.completed) {
            return "iconCompleted";
        } else if (item.launched) {
            return "iconIncomplete";
        } else {
            return "iconInitial";
        }
    }
}, div_id);

我正在寻找一种在项目属性更改时刷新 TreeView 的方法，现在我发现了这个:

refreshTree : function(){
    _tree.rootNode.destroyRecursive();
    _tree.model.constructor(_tree.model)
    _tree.postMixInProperties();
    _tree._load();
}

这个函数刷新了树，但它实际上重建了 View ，所以:

• 树有时间再次出现
• 扩展节点状态重新初始化

所以我的问题是:在保持扩展节点状态的情况下即时动态更新树的方法是什么？

我开始编写一些东西来获取扩展节点状态，但是当我需要再次设置扩展节点状态时，由于 TreeView 有时间显示，我需要一个回调来知道 TreeView 何时完成显示，我没有找到它。顺便说一句，有没有办法让 TreeView 立即出现？

Answer 1

如果您只想更改图标，则无需重新创建树。你可以用 Observable 包装你的 store，当 store 数据发生变化时，树会收到通知。要更新项目，请使用 store.put() 函数。

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

    myStore = new Memory({
        data: [
        { id: 'world', name:'The earth', type:'planet', population: '6 billion'},
        { id: 'AF', name:'Africa', type:'continent', population:'900 million', area: '30,221,532 sq km',
                timezone: '-1 UTC to +4 UTC', parent: 'world'},
            { id: 'EG', name:'Egypt', type:'country', parent: 'AF' },
            { id: 'KE', name:'Kenya', type:'country', parent: 'AF' },
                { id: 'Nairobi', name:'Nairobi', type:'city', parent: 'KE' },
                { id: 'Mombasa', name:'Mombasa', type:'city', parent: 'KE' },
            { id: 'SD', name:'Sudan', type:'country', parent: 'AF' },
                { id: 'Khartoum', name:'Khartoum', type:'city', parent: 'SD' },
        { id: 'AS', name:'Asia', type:'continent', parent: 'world' },
            { id: 'CN', name:'China', type:'country', parent: 'AS' },
            { id: 'IN', name:'India', type:'country', parent: 'AS' },
            { id: 'RU', name:'Russia', type:'country', parent: 'AS' },
            { id: 'MN', name:'Mongolia', type:'country', parent: 'AS' },
        { id: 'OC', name:'Oceania', type:'continent', population:'21 million', parent: 'world'},
        { id: 'EU', name:'Europe', type:'continent', parent: 'world' },
            { id: 'DE', name:'Germany', type:'country', parent: 'EU' },
            { id: 'FR', name:'France', type:'country', parent: 'EU' },
            { id: 'ES', name:'Spain', type:'country', parent: 'EU' },
            { id: 'IT', name:'Italy', type:'country', parent: 'EU' },
        { id: 'NA', name:'North America', type:'continent', parent: 'world' },
        { id: 'SA', name:'South America', type:'continent', parent: 'world' }
        ],
        getChildren: function(object){
            // Supply a getChildren() method to store for the data model where
            // children objects point to their parent (aka relational model)
            return this.query({parent: object.id});
        }
    });
    myStore = new Observable(myStore);
    // Create the model
    var myModel = new ObjectStoreModel({
        store: myStore,
        query: {id: 'world'}
    });

    // Create the Tree.
    var tree = new Tree({
        model: myModel,
        getIconClass: function(item, opened) {
            if (item.completed) {
                return "dijitLeaf";
            } else if (item.launched) {
                return (opened ? "dijitFolderOpened" : "dijitFolderClosed");
            } else {
                return (opened ? "dijitFolderOpened" : "dijitFolderClosed");
            }
        }
    });
    tree.placeAt("test");
    tree.startup();
});

function changeOceaniaIcon() {
    var item = myStore.get('OC');
    if (item) {
        item.completed = !item.completed;
        myStore.put(item);
    }
}

<script src="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js"></script>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/resources/dojo.css"> 
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.10.4/dijit/themes/claro/claro.css">

<div class="claro">
  <div id="test"></div>
<button onclick="changeOceaniaIcon();">
Change Oceania Icon
</button>
</div>