1

有人可以建议我如何针对以下树层次结构的每个文件夹放置复选框？我正在尝试添加复选框，但它没有出现在如下所示的树中。请建议我需要对以下代码进行的更改以显示复选框。这是一个工作代码，只需将其复制粘贴到文本板中并在允许 activex 的 IE 中打开。

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=UTF-8"/>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.7.2/dojo/resources/dojo.css">
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.7.2/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.7.2/dojox/grid/resources/Grid.css">
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.7.2/dojox/grid/resources/claroGrid.css">

<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.7.2/dojo/dojo.js"
        data-dojo-config="isDebug: true,parseOnLoad: true"></script>
            <link rel="stylesheet" href="css/style.css" media="screen">
    <script>
    dojo.require("dojo.parser");
    dojo.require("dijit.form.Form");
    dojo.require("dijit.form.Select");
    dojo.require("dijit.form.TextBox");
    dojo.require("dijit.layout.BorderContainer");
    dojo.require("dijit.layout.AccordionContainer");
    dojo.require("dijit.layout.ContentPane");
    dojo.require("dijit.layout.TabContainer");
    dojo.require("dojo.data.ItemFileWriteStore");
    dojo.require("dijit.tree.ForestStoreModel");
    dojo.require("dijit.tree.dndSource");
    dojo.require("dijit.Tree");


        dojo.addOnLoad(function() { 
            dojo.byId('loaderInner').innerHTML += " done.";
            setTimeout(function hideLoader(){
                dojo.fadeOut({ 
                    node: 'loader', 
                    duration:500,
                    onEnd: function(n){
                        n.style.display = "none";
                    }
                }).play();
            }, 250);

      }); 

    var store;    
    var selectedItemId = 0;
    var itemSelected = null;
    var sel          = null;
    var idCount      = 0;

    var treeModel; 
    var mytree;

    var modeSelector;               

    dojo.ready(function(){

            store = new dojo.data.ItemFileWriteStore({
                      contentType: 'application/json',
                      target: 'store',
                      url: "http://pmis.biz/rwa/data/ProjectList.php"         
            });                 
            treeModel = new dijit.tree.ForestStoreModel({ 
                iconClass: 'dijitEditorIcon dijitEditorIconCut', 
                store: store,
                query: {"main": 0},                
                rootId: 0,                
                rootLabel: "project",
                pasteItem: function(){},             
                mayHaveChildren : function(item) {
                   return true;
                },

                getChildren: function(parentItem, callback, onError) {
                    if(parentItem.root == true  ){

                       if(this.root.children){

                            callback(this.root.children);
                       }else{
                           this.store.fetch({
                                query: this.query,
                                queryOptions: {cache:false},
                                onComplete: dojo.hitch(this, function(items){
                                    this.root.children = items;
                                    callback(items);
                                }),
                                onError: onError
                            });
                       }

                    } else {
                       console.debug("Tree child onLoad here: "+parentItem.id);
                         if (idCount < parseInt(parentItem.id)){
                           idCount = parseInt(parentItem.id);
                       }      

                           var sx = parseInt(parentItem.id);
                           this.store.fetch({
                                query: { main: sx },
                                queryOptions: {cache:false},
                                onComplete: dojo.hitch(this, function(items){
                                    this.root.children = items;
                                    callback(items);
                                }),
                                onError: onError
                            });
                    }  
                } 
            }); 

            mytree = new dijit.Tree({
                model: treeModel,
                openOnClick:true,
                showRoot: true,                
                setCheckboxOnClick : true,
              //  onDblClick: function (item, node, evt){ 

              //  },                 
                onClick: function (item, node, evt){
                    resetEditor();
                }  

            }, "treeThree");
    });    
        </script>

</head>
<body class="claro">
<!-- BorderContainer -->
<div id="main" data-dojo-type="dijit.layout.BorderContainer" 
         data-dojo-props="liveSplitters:false, design:'headline',
         style:'width:100%; height:100%; max-width:1050px; min-width:680px; min-height:400px; margin: 0 auto;'">

    <!-- AccordionContainer-->
    <div data-dojo-type="dijit.layout.AccordionContainer" 
        data-dojo-props="region:'leading', splitter:true, minSize:20" style="width: 630px;" id="leftAccordion">

        <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="title:'NG Tree Hierarchy'">

      <div data-dojo-type="dijit.layout.ContentPane" 
           data-dojo-props="title:'Rootless Tree',
           style:'width:30%; height:100%; max-width:1050px; min-width:250px; min-height:300px; margin: 0 auto; float:left'">
           <div id="treeThree"></div>
      </div>


<div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="title:'Rootless CCCCCC'">
      <!-- Project selector -->
      <div id=help"></div><br>
      <br>    
     <!--   <select id="f_2"></select>-->

      <br>
 <div>
    <table style="width: 135px; height: 83px;">
      <tr><td>
      <div id="ip"></div>
      </tr><tr><td>        
      <button id="bd" data-dojo-type="dijit.form.Button"  style="visibility:hidden"
       data-dojo-id="bd"
       data-dojo-props="disabled: true,
                        onClick: function (evt){
                                     store.deleteById(selectedItemId);
                                     resetEditor();
                                 },
                        label:'Delete project' ">    
      </button>

      <button id="bs" data-dojo-type="dijit.form.Button"  style="visibility:hidden"
       data-dojo-id="bs"
       data-dojo-props="disabled: true,
                        onClick: function (evt){
                            var lvalue = dijit.byId('s1').value;
                            store.setValue(itemSelected, 'title', dijit.byId('s1').value);
                            store.setValue(itemSelected, 'description', dijit.byId('s2').value);
                            store.save();
                        },
                        label:'Save project' ">    
      </button>
      <button id="ba"data-dojo-type="dijit.form.Button"  style="visibility:hidden"
       data-dojo-id="ba"
       data-dojo-props="disabled: true,
                        onClick: function (evt){
                            idCount = idCount +1;                        
                            var newItem = {};
                            newItem.id = idCount;
                            newItem.main = selectedItemId;
                            newItem.title = dijit.byId('s1').value;
                            newItem.description = dijit.byId('s2').value;

                            store.newItem(newItem);
                            sel.setStore(store,'',{query:{main: 0}});
                            /* mytree.update();*/
                        },
                        label:'Add project' ">    
      </button>
      <br>
      <button onclick="mytree.refreshModel()"  style="visibility:hidden">
          Update
      </button>

     </tr>

    </table> 
    <br>
  </div>           
</div>
        </div>
        <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="title:''">
            <div></div>
        </div>
   </div>



   <div id="header" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'top'">

    </div>

    <!-- Top tabs (marked as "center" to take up the main part of the BorderContainer) -->
        <div data-dojo-type="dijit.layout.TabContainer" data-dojo-props="region:'center', tabStrip:true" id="topTabs">

            <div id="basicFormTab1" data-dojo-type="dijit.layout.ContentPane" 
                             data-dojo-props="title:'Tab1', style:'padding:10px;display:none;'">

<p> </p>            
        </div>

        <div id="basicFormTab2" data-dojo-type="dijit.layout.ContentPane" 
                              data-dojo-props="title:'Tab2', style:'padding:10px;display:none;'">

<p> </p>            
        </div>
            <div id="basicFormTab3" data-dojo-type="dijit.layout.ContentPane" 
                              data-dojo-props="title:'Tab3', style:'padding:10px;display:none;'">

<p> </p>            
        </div>
          </div>
        </div>

</body>
</html>
4

2 回答 2

0

为此创建了一个库：

http://www.thejekels.com/dojo/cbtree_AMD.html

从那个网站很难找到说明书。这是一个 github wiki：https ://github.com/pjekel/cbtree/wiki/CheckBox-Tree 。下载 git repo，然后按照https://github.com/pjekel/cbtree/wiki/Installation上的说明进行操作，一切顺利。

于 2015-04-20T19:24:34.003 回答
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
    }]
}];
于 2015-05-04T23:37:32.617 回答