1

这真让我抓狂。树根本不显示。这是代码

<html>
<head>
<meta charset="utf-8">
<title>The CheckBox Tree with multi-parented Eventable Store</title>
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="dojo/dojo/dojo.js"></script>
<link rel="stylesheet" href="dojo/dijit/themes/claro/claro.css" type="text/css"/>
<link rel="stylesheet" href="cbtree/themes/claro/claro.css" type="text/css"/>
<script> dojoConfig = {async: true, parseOnLoad: true};</script>

  <script>
 var myData = [
 { name:"Family"    , type:"root"                                           },
 { name:"Abe"       , type:"parent", parent:["root"]         , hair:"Brown" },
 { name:"Jacqueline", type:"parent", parent:["root"]         , hair:"Brown" },
 { name:"Homer"     , type:"parent", parent:["Abe"]          , hair:"none"  },
 { name:"Marge"     , type:"parent", parent:["Jacqueline"]   , hair:"blue"  },
 { name:"Bart"      , type:"child" , parent:["Homer","Marge"], hair:"blond" },
 { name:"Lisa"      , type:"child" , parent:["Homer","Marge"], hair:"blond" },
 { name:"Maggie"    , type:"child" , parent:["Homer","Marge"], hair:"blond" }
  ];

required(["cbtree/store/Hierarchy",         
      "cbtree/model/TreeStoreModel",     
      "cbtree/Tree",
      "dojo/dojo/ready"
     ], function (Hierarchy, TreeStoreModel, Tree) {

  // Create the store and load it with our data set.
  var myStore = new Hierarchy( { data:myData } );
 var myModel = new TreeStoreModel({ store:myStore, query:{type:"root"} });
 var myTree  = new Tree( { model:myModel }, "CheckBoxTree" );
 myTree.startup();
});
 </script>
</head>
<body class="claro">
<h1 class="DemoTitle">The CheckBox Tree with Multi State CheckBoxes</h1>
<div id="CheckBoxTree" style="width:300px; height:300px; border-style:solid; border-width:medium;">
</div>
</body>
</html>

有人有任何线索吗？进口一切正常。我在根目录中有这样的文件夹：

道场/道场

道场/dijit

cbtree/

谢谢

4

2 回答 2

1

你在requireing dojo/dojo/ready，但你没有使用它。我认为您需要将您的树创建包装起来ready(function(){...})或使用dojo/domReady！在与 dom 交互之前等待 dom 准备好的插件。请注意在第一个示例中的回调中使用requireasrequired和in 。readyrequire

道场/准备

require(["cbtree/store/Hierarchy",         
      "cbtree/model/TreeStoreModel",     
      "cbtree/Tree",
      "dojo/dojo/ready"
], function (Hierarchy, TreeStoreModel, Tree, ready) {
    ready(function() {
        // Create the store and load it with our data set.
        var myStore = new Hierarchy( { data:myData } );
        var myModel = new TreeStoreModel({ store:myStore, query:{type:"root"} });
        var myTree  = new Tree( { model:myModel }, "CheckBoxTree" );
        myTree.startup();
    }
});

dojo/domReady！

require(["cbtree/store/Hierarchy",         
      "cbtree/model/TreeStoreModel",     
      "cbtree/Tree",
      "dojo/dojo/domReady!"
], function (Hierarchy, TreeStoreModel, Tree) {
    // Create the store and load it with our data set.
    var myStore = new Hierarchy( { data:myData } );
    var myModel = new TreeStoreModel({ store:myStore, query:{type:"root"} });
    var myTree  = new Tree( { model:myModel }, "CheckBoxTree" );
    myTree.startup();
});
于 2013-09-24T15:49:41.760 回答
0

试试这个（在 dojo 1.10 上测试）：

    require(["dojo/_base/connect", "dijit/dijit", "dojo/data/ItemFileReadStore", "dijit/Tree", "dijit/form/CheckBox",
        "dojo/domReady!"],
        function (connect, dijit, ItemFileReadStore, Tree, CheckBox) {
            var store = new ItemFileReadStore({
                data: {
                    identifier: 'id',
                    label: 'label',
                    items: rawdata
                }
            });

            var treeControl = new Tree({
                store: store,
                showRoot: false,
                _createTreeNode: function (args) {
                    var tnode = new Tree._TreeNode(args);
                    tnode.labelNode.innerHTML = args.label;

                    var cb = new CheckBox();
                    cb.placeAt(tnode.labelNode, "first");

                    connect.connect(cb, "onChange", function () {
                        var treeNode = dijit.getEnclosingWidget(this.domNode.parentNode);
                        connect.publish("/checkbox/clicked", [{
                            "checkbox": this,
                            "item": treeNode.item
                        }]);
                    });

                    return tnode;
                }
            }, "CheckboxTree");

            connect.subscribe("/checkbox/clicked", function (message) {
                console.log("you clicked:", store.getLabel(message.item));
            });
        }); // require

    var rawdata = [{
        label: 'Level 1',
        id: '1',
        children: [{
            label: 'Level 1.1',
            id: '1.1',
            active: true
        },
        {
            label: 'Level 1.2',
            id: '1.2',
            active: true
        }]
    },
    {
        label: 'Level 2',
        id: '2',
        children: [{
            id: '2.1',
            label: 'Level 2.1',
            active: false
        },
        {
            id: '2.2',
            label: 'Level 2.2',
            active: true
        },
        {
            id: '2.3',
            label: 'Level 2.3',
            active: true
        }]
    }];

http://jsfiddle.net/mcfskLop/

于 2015-05-04T23:16:28.613 回答