Question

这让我发疯了。树根本没有显示。这是代码

<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>

任何人都有任何线索？进口都很好。我在根目录中有这样的文件夹：

dojo / dojo

dojo / dijit

cbtree /

由于

Answer 1

你是require dojo/dojo/ready，但你没有使用它。我认为你需要在ready(function(){...})中包装你的树创建，或者在你与它交互之前使用dojo/domReady! plugin等待dom准备就绪。请注意使用require而不是required，并在第一个示例中的ready回调中包含require。

<强>道场/就绪

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();
    }
});

<强>道场/ 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();
});

Answer 2

尝试这个（在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/

Dojo树与复选框不显示

2 个答案: