这上面是一个用户的基本信息表单，那么组织结构这里是一个可选择的DropdownTree，现在我们就是要做这么一个通用的DropdownTree

我们的组织结构的html是这样一个代码片段：

<td width="90px"><label>组织机构</label></td>

<td>
    <input type="hidden" name="organizationId" dojoType="dijit.form.TextBox">
    <div dojoType="dijit.form.TextBox" name="organizationName" readonly="true" style="width:160px"></div> 
    <div><div data-dojo-type="app.widget.DropDownTree" url="system/organization/tree"></div></div>
</td>

这里需要编写一个app.widget.DropDownTree的js文件,然后每次当我面使用的时候只需要复制然后修改

<div><div data-dojo-type="app.widget.DropDownTree" url="system/organization/tree"></div></div>中的url即可：

define([
"dojo/_base/declare",
"dojo/data/ItemFileReadStore",
"dijit/tree/TreeStoreModel",
"dijit/Tree",
"dijit/TooltipDialog",
"dijit/form/DropDownButton",
], function(declare,ItemFileReadStore,TreeStoreModel,Tree,TooltipDialog,DropDownButton){

    return declare("app.widget.DropDownTree", null, {
        idInput: null, //id
        nameInput: null, //name
        appendTo: null, // 添加选择按钮
        url: "", //load tree url

        //init widget method
        _initTree: function(){
             this.treeStore = new ItemFileReadStore({
                  url: this.url,
                  urlPreventCache:true
              });
              var treeModel = new TreeStoreModel ({
                   store: this.treeStore,
                   rootId:"root",
                   rootLabel:"选择",
                   query:{id:"root"},
                   childrenAttrs: ["children"],
                   mayHaveChildren: function(item){return dojo.some(this.childrenAttrs, function(attr){
                          return this.store.hasAttribute(item, attr) && this.store.getValue(item,attr);
                   }, this);}
              });
              var parentTree = new Tree({
                   model: treeModel,
                   showRoot:true ,
                   labelAttr:"name",
                   style:{overflow: "auto",width:"250px", height:"220px"}
               });

               var tooltip = new TooltipDialog({
                     content: parentTree.domNode
                });

                this.dropDwonButton_ = new DropDownButton({
                       label: "选择",
                       iconClass: "configButtonIcon",
                       dropDown: tooltip
                },this.appendTo);
               dojo.connect(parentTree,‘onClick‘,dojo.hitch(this,this.confirmHandler));
          },

          confirmHandler: function(item,treeNode){
                var id = this.treeStore.getValue(item,"id");
                var name = this.treeStore.getValue(item,"name");
                this.idInput.setValue(id);
                this.nameInput.setValue(name);
           },

           constructor: function(_arg){
                  dojo.mixin(this, _arg);
                  this.inherited("constructor", arguments);
                  this.appendTo = arguments[1].parentNode;

                  //getEnclosingWidget可通过dom获得widget
                  this.idInput = dijit.getEnclosingWidget(this.appendTo.parentNode.children[0]); 
                  this.nameInput = dijit.getEnclosingWidget(this.appendTo.parentNode.children[1]);
                  this._initTree();
            },

            uninitialize: function(){
                  if(this.dropDwonButton_){
                       this.dropDwonButton_.destroyRecursive();
                       delete this.dropDwonButton_;
                   }
                   this.inherited(arguments);
            }
       });
});

dropdown tree