Dropdown Tree

博客贡献于：dojo技术交流群（35476066）

作者：spring

 

这上面是一个用户的基本信息表单，那么组织结构这里是一个可选择的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: "config/equipment/treeall", //default load equipment tree
        
        //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 roleParentTreeDlg = new TooltipDialog({
                content: parentTree.domNode
             });
            
            this.dropDwonButton_ = new DropDownButton({
                 label: "选择",
                 iconClass: "configButtonIcon",
                 dropDown: roleParentTreeDlg
            },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;
            this.idInput   = dijit.getEnclosingWidget(this.appendTo.parentNode.children[0]);//通过dom节点获得widget对象
            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);
        }
    });
});