簡體   English   中英

Dijit樹未按預期呈現

[英]Dijit Tree not rendering as expected

我正在嘗試使json數據呈現道場樹。

您可以在http://jsfiddle.net/F53Ge/38/中看到我在做什么

                                   require(["dojo/parser","dojo/json","dojo/store/Memory","dijit/tree/ObjectStoreModel","dijit/Tree", "dojo/window"], function              (parser,json,Memory,ObjectStoreModel,Tree,win) {



var data = [{"id":"root","team":[{"teamId":1,"teamname":"JMK_TEST_1","parentteamId":0,"associatedList":[{"type":"9117","number":"1011D1P"}]},{"teamId":174,"teamName":"JJG_PARENT_3","parentteamId":0,"associatedList":[{"type":"8205","number":"062072T"}]},{"teamId":172,"teamName":"JJG_PARENT_1","parentteamId":0,"subteamsList":[{"teamId":175,"teamName":"JJG_Subteam_1","parentteamId":172,"associatedList":[{"type":"8720","number":"12345"}]},{"teamId":176,"teamName":"JJG_Subteam_2","parentteamId":172,"associatedList":[{"type":"8720","number":"12345"}]}],"associatedList":[{"type":"7945","number":"KQZGTNC"}]},{"teamId":221,"teamName":"JJG_Parent_4","parentteamId":0,"subteamsList":[{"teamId":222,"teamName":"JJG_Subteam_4_1","parentteamId":221,"associatedList":[{"type":"9117","number":"10E7683"},{"type":"9119","number":"514DDB2"},{"type":"8233","number":"102FE9P"},{"type":"7978","number":"KDGYKLL"},{"type":"7978","number":"99A9880"}]}]},{"teamId":106,"teamName":"JMK_TEST","parentteamId":0,"subteamsList":[{"teamId":107,"teamName":"JMK_TEST1","parentteamId":106,"subteamsList":[{"teamId":173,"teamName":"JJG_PARENT_2","parentteamId":107,"subteamsList":[{"teamId":178,"teamName":"JJG_Subteam_2_1","parentteamId":173,"associatedList":[{"type":"9117","number":"10E7683"}]}],"associatedList":[{"type":"7945","number":"KQZGTNC"}]}]}]}]}];


var store = new Memory({
    data: data,
    getChildren: function(object){
        return object.team || [];
    }
});

  var model = new ObjectStoreModel({
store: store,
   query: { id:'root' },
    mayHaveChildren: function (item) {
        return "subteamsList" in item;
    }
});

var tree = new Tree({
    model: model,
    showRoot: false,
    autoExpand: true,
    persist: false,
    onClick: function (item, treeNode, e) {
        selectednodeid = this.selectedNode;
        win.scrollIntoView(selectednodeid);
        alert(selectednodeid);
    }
},"oopt_list");
tree.startup();


 });

首先,我看不到子節點,也不知道如何傳遞標簽,因為標簽顯示的列表未定義。

任何幫助表示贊賞。

還請讓我知道是否應該使用ForestModel。 基本上,我試圖在樹狀目錄中顯示json數據,並想知道用戶單擊了哪個節點,因此我可以基於此執行一些操作。

問候大黃蜂

要定義應將哪個屬性用作標簽,您需要在模型上定義“ labelAttr”。

之所以看不到子節點,是因為您存儲的商店缺少idProperty。 (或者您在根項“ id”上具有不同的id屬性,而在其他項“ teamId”上具有不同的屬性)。

使用ObjectStoreModel代替ForestModel是正確的。 您正在使用內存存儲,它是新的dojo / store API的實現。 (ForestModel應該僅與較舊的dojo / data API一起使用)

在這里查看您的示例更新http://jsfiddle.net/F53Ge/42/

require(["dojo/parser","dojo/json","dojo/store/Memory","dijit/tree/ObjectStoreModel","dijit/    Tree", "dojo/window"], function (parser,json,Memory,ObjectStoreModel,Tree,win) {



var data = [{"teamId":"root","subteamsList":[{"teamId":1,"teamName":"JMK_TEST_1","parentteamId":0,"associatedList":[{"type":"9117","number":"1011D1P"}]},{"teamId":174,"teamName":"JJG_PARENT_3","parentteamId":0,"associatedList":[{"type":"8205","number":"062072T"}]},{"teamId":172,"teamName":"JJG_PARENT_1","parentteamId":0,"subteamsList":[{"teamId":175,"teamName":"JJG_Subteam_1","parentteamId":172,"associatedList":[{"type":"8720","number":"12345"}]},{"teamId":176,"teamName":"JJG_Subteam_2","parentteamId":172,"associatedList":[{"type":"8720","number":"12345"}]}],"associatedList":[{"type":"7945","number":"KQZGTNC"}]},{"teamId":221,"teamName":"JJG_Parent_4","parentteamId":0,"subteamsList":[{"teamId":222,"teamName":"JJG_Subteam_4_1","parentteamId":221,"associatedList":[{"type":"9117","number":"10E7683"},{"type":"9119","number":"514DDB2"},{"type":"8233","number":"102FE9P"},{"type":"7978","number":"KDGYKLL"},{"type":"7978","number":"99A9880"}]}]},{"teamId":106,"teamName":"JMK_TEST","parentteamId":0,"subteamsList":[{"teamId":107,"teamName":"JMK_TEST1","parentteamId":106,"subteamsList":[{"teamId":173,"teamName":"JJG_PARENT_2","parentteamId":107,"subteamsList":[{"teamId":178,"teamName":"JJG_Subteam_2_1","parentteamId":173,"associatedList":[{"type":"9117","number":"10E7683"}]}],"associatedList":    [{"type":"7945","number":"KQZGTNC"}]}]}]}]}];


    var store = new Memory({
        data: data,
        idProperty:"teamId",
        getChildren: function(object){
            return object.subteamsList || [];
        }
    });

   var model = new ObjectStoreModel({
    store: store,
       query: { teamId:'root' },
        mayHaveChildren: function (item) {
            console.log("may",item)
            return "subteamsList" in item;
        },labelAttr :"teamName"
    });
    var tree = new Tree({
        model: model,
        showRoot: false,
        autoExpand: true,
        persist: false,
        onClick: function (item, treeNode, e) {
            selectednodeid = this.selectedNode;
            win.scrollIntoView(selectednodeid);
            alert(selectednodeid);
        }
    },"oopt_list");
    tree.startup();


});

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM