CheckboxTree

checkbox效果图：

准备以下文件结构的三个文件：

1.CheckboxTree.js

define([
    "dojo/_base/declare",
    "dijit/Tree",    
    "dijit/form/CheckBox",
    "dijit/_WidgetsInTemplateMixin",
    "dojo/text!./templates/TreeNode.html"
], function(declare,Tree,CheckBox,_WidgetsInTemplateMixin,template){

    var CheckboxTreeNode = declare("comm.tree.CheckboxTreeNode", [dijit._TreeNode,_WidgetsInTemplateMixin], {
        templateString: template,
        checked:false,
        _onCheckBoxClick:function(e){
            this.tree.model.setChecked(this.item, this.check_input.get("checked"));
        },
        /* constructor : function(_arg){    
            dojo.mixin(this,_arg);
            
            this.checked = this.tree.model.store.getValue(this.item, "checked");
            this.inherited("constructor", arguments);
        
        },  */
          // return the dijit.Checkbox inside the tree node
        getNodeCheckbox: function(){
            return this.check_input;
        },
        setNodeCheckboxValue: function(value){
            this.check_input.set("checked",value);
        },
        getCheckedNodesList: function(nodeArray){
            if (this.getNodeCheckbox().isChecked()){
                nodeArray.push(this.item.label);
            }
            this.getChildren().forEach(getCheckedNodesList(nodeArray), this);
        },
      
        postCreate: function(){
            // preload
            // get value from the store (JSON) of the property "checked" and set the checkbox
            this.checked = this.tree.model.getChecked(this.item);
            this.check_input.set("checked",this.checked);
            this.inherited(arguments);
        }
    });
    
    
    declare("comm.tree.CheckboxTree", [Tree], {
       
        //修改数据发生变化时的处理事件。
        _onItemChange: function(/*Item*/item){
        
            //summary: set data event on an item in the store
            var identity = this.model.getIdentity(item);
            var newValue = this.model.store.getValue(item, "checked");
            nodes = this._itemNodesMap[identity];
            if(nodes){
                var self = this;
                dojo.forEach(nodes,function(node){
                    node.set({
                        label: self.getLabel(item),
                        tooltip: self.getTooltip(item)
                    });
                    node.setNodeCheckboxValue(newValue);
                    node._updateItemClasses(item);
                });
            }      
        },
        _createTreeNode: function(/*Object*/ args){
            // summary:
            //        creates a TreeNode
            // description:
            //        Developers can override this method to define their own TreeNode class;
            //        However it will probably be removed in a future release in favor of a way
            //        of just specifying a widget for the label, rather than one that contains
            //        the children too.
            return new CheckboxTreeNode(args);
        }
    });
})

2.CheckboxTreeStoreModel.js

define([
    "dojo/_base/declare",
    "dijit/tree/TreeStoreModel"
], function(declare,TreeStoreModel){
    
    return declare("comm.tree.CheckboxTreeStoreModel", [TreeStoreModel], {
        /*constructor: function(params){
            // summary:
            //        Sets up variables, etc.
            // tags:
            //        private
        
            // Make dummy root item
            this.root = {
                store: this,
                root: true,
                id: params.rootId,
                label: params.rootLabel,
                children: params.rootChildren    // optional param
            };
        },*/
        getChecked:function(/*dojo.data.Item*/item){
            return this.store.getValue(item,"checked");
        },
        setChecked:function(/*dojo.data.Item*/item,/*boolean*/checked){
            this.store.setValue(item,"checked",checked);
        },
        onChange: function(/*dojo.data.Item*/item){
            var currStore = this.store;
            var newValue = currStore.getValue(item, "checked");
            
            // if a node gets checked we propagate the "event" down to the children
            // erase this if you don't need to propagate the event (simple check)
            this.getChildren(item, function(children){
                dojo.forEach(children, function(child){
                    currStore.setValue(child, "checked", newValue);
                });
            });
        },
        _onItemChildrenChange: function(/*dojo.data.Item*/ parent, /*dojo.data.Item[]*/ newChildrenList){
            console.info(arguments);
            // summary:
            //        Callback to do notifications about new, updated, or deleted items.
            // tags:
            //        callback
        },
        mayHaveChildren: function(/*dojo.data.Item*/ item){
            // summary:
            //        Tells if an item has or may have children.  Implementing logic here
            //        avoids showing +/- expando icon for nodes that we know don't have children.
            //        (For efficiency reasons we may not want to check if an element actually
            //        has children until user clicks the expando node)
            return dojo.some(this.childrenAttrs, function(attr){
                return this.store.hasAttribute(item, attr) && this.store.getValue(item,attr);
            }, this);
        }
    });
})

3.TreeNode.html

<div class="dijitTreeNode" role="presentation">
    <div data-dojo-attach-point="rowNode" class="dijitTreeRow" role="presentation">
        <img src="${_blankGif}" alt="" data-dojo-attach-point="expandoNode" class="dijitTreeExpando" role="presentation"/>
        <span data-dojo-attach-point="expandoNodeText" class="dijitExpandoText" role="presentation"></span>
        <span data-dojo-attach-point="contentNode" class="dijitTreeContent" role="presentation">
            <img src="${_blankGif}" alt="" data-dojo-attach-point="iconNode" class="dijitIcon dijitTreeIcon" role="presentation"/>
            <input data-dojo-attach-point="check_input" type="checkbox" data-dojo-attach-event="onClick:_onCheckBoxClick" 
　　　　　　　　   data-dojo-type="dijit.form.CheckBox"/>
            <span data-dojo-attach-point="labelNode" class="dijitTreeLabel" role="treeitem" tabindex="-1" aria-selected="false"></span>
        </span>
    </div>
    <div data-dojo-attach-point="containerNode" role="presentation" style="display: none;"></div>
</div>

4.调用

<div id="menuTree"></div>
<div style="float: left; margin: 5px;">
    <div dojoType="dijit.form.Button" data-dojo-id="saveModuleButton" iconClass="saveButtonIcon">保存</div>
</div>

var store = new dojo.data.ItemFileWriteStore({
    url: "/url",
    urlPreventCache:true
});
var model = new comm.tree.CheckboxTreeStoreModel({
    store: store,
    rootId:"root",
    rootLabel:"菜单树",
    query:{id:"root"},
    childrenAttrs: ["children"]
});

var menuTree = new comm.tree.CheckboxTree({
    model: model,
    showRoot: true,
    labelAttr:"name",
    label:"菜单树"
},dojo.byId("menuTree"));

//点击保存获得节点编号
var saveMenu = function(e){
    var nodeIds = new Array();
    store.fetch({
         query: {
            checked: true
        },
        queryOptions: {
            deep: true
        },
        onComplete: function(items, request){
            var item=null;
            while(item = items.shift()){
                var id = item["id"];
                if("root" !=id){
                    nodeIds.push(id);
                }    
            }
        }
    });
};

store的数据结构应该包括checked属性，初始化checkbox是否选中。举例格式如下：