tree.js

很全面的hrm管理。提供通用的企业人力资源管理。

var DebugLevel = 50;
var InfoLevel = 20;
var NoInfoLevel = 0;

/*
* Select空间的构造函数
* list : Array 要显示的数据的列表
*   格式：
*    contentList["1"] = "总部";
*    contentList["10"] = "北京";
*    contentList["11"] = "上海";
*    contentList["21"] = "陕西";
*    contentList["2101"] = "西安|21";
*    contentList["2102"] = "宝鸡|21";
* parentSelected： bool 省级公司是否可以选择
*/
function Tree(list, parentSelected)
{
    if(!(list instanceof Array))
    {
        throw "参数必须是Array";
    }

    this.info("得到数组:" + list.length)
    
    this.list = list;
    
    this.relation = new Array();
    this.parentOptions = '<option value="NoSelected"></option>';
    
    if(parentSelected)
    {
        this.parentSelected = parentSelected;
    }
    else
    {
        this.parentSelected = false;
    }
    
    this.info("准备将数组中的数据分解到主从关系中");
   
    for( cId in this.list )
    {
        this.debug("得到对象:" + cId);
        var content = this.list[cId];
        
        var ret = this.splitContent(content);
        if(ret instanceof Array)
        {
            this.debug("是子对象:" + ret[0]);
            this.addChild(cId, ret[0], ret[1]);
        }
        else
        {
            this.debug("是父对象:" + ret);
            this.addParent(cId, ret);
        }
    }
    
    this.nameSuffix = "Select_" + _TreeCount;
    this.addHTML();
    
    _TreeReg[_TreeCount] = this;
    _TreeCount ++;
}
//内部变量，保存当前全局的Tree对象个数
var _TreeCount = 0;
//内部变量，保存全局的数对象
var _TreeReg = new Array();

//显示下拉框的宽度
Tree.prototype.SelectWidth = 100;
//显示层的总宽度
Tree.prototype.DivWidth = 100;

//是否显示调试信息
Tree.prototype.IsDebug = NoInfoLevel;

//调试信息输出
Tree.prototype.info = function(message)
{
    if(this.IsDebug >= InfoLevel)
    {
        alert("INFO:" + message );
    }
}

//调试信息输出
Tree.prototype.debug = function(message)
{
    if(this.IsDebug >= DebugLevel)
    {
        alert("DEBUG:" + message );
    }
}

//调试信息输出
Tree.prototype.warn = function(message)
{
    alert("WARN:" + message );
}

/*
* 分解市公司的格式数据
* 返回值：  [0]名称
*          [1]ID 
*/

Tree.prototype.splitContent = function(content)
{
    var index = content.indexOf("|");
    if(index != -1)
    {
        var ar = new Array();
        ar[0] = content.substring(0, index);
        ar[1] = content.substring(index + 1, content.length);
        
        return ar;
    }
    else
    {
        return content;
    }
}

/*
* 增加一个市公司
* childId： String 市公司ID
* childContent: String 市公司名称
* parentId: String 上级公司编码
*/
Tree.prototype.addChild = function(childId, childContent, parentId)
{
    this.debug("父对象ID:" + parentId);
    var o = this.relation[parentId];
    if(!(o) || !(o instanceof Array))
    {
        this.debug("父对象在关系列表中不存在，准备增加");
        o = new Array();
    }
    o[childId]=childContent;
    this.relation[parentId] = o;
}

/*
* 增加一个省公司
* Id : String  省公司ID
* content : String  省公司名称
*/
Tree.prototype.addParent = function(Id, content)
{
    var o = new Array();
    if(this.parentSelected)
    {
        o["NoSelected"] = "";
    }
    
    if(this.relation[Id])
    {
        this.debug("在对象关系列表中存在,移动");
        var oo = this.relation[Id];
        for( oitem in oo )
        {
            o[oitem] = oo[oitem];
        }
    }


    this.relation[Id] = o;
    this.parentOptions = this.parentOptions + '<option value="' + Id + '">' + content + '</option>';
}

/*
* 在页面中生成HTML代码
*/
Tree.prototype.addHTML = function()
{
    var sFrame = '<div style="position: absolute;FILTER: alpha(opacity=70);border:1px solid #60587E;display:none; width: ' + (this.SelectWidth+20)+ '; height: 77px; z-index: 1; left:0px; top:90px" id="_Div' + this.nameSuffix + '"><iframe id="_IFrm' + this.nameSuffix + '" frameborder="0" scrolling="no" width="100%" height="77px" src="../core/blank.htm"></iframe></div>';

    var HTML = '';
    HTML += '';
    HTML += '    <table border="0" cellpadding="" cellspacing="2" width="100%" id="_table' + this.nameSuffix + '">';
    HTML += '        <tr align="center">';
    HTML +='            <td colspan="3"><select id="_parent' + this.nameSuffix + '" style="width:' + this.SelectWidth + '">';
    HTML += this.parentOptions;
    HTML +='</select></td>';
    HTML +='        </tr>';
    HTML +='        <tr align="center">';
    HTML +='            <td colspan="3"><select id="_child' + this.nameSuffix + '" style="width:' + this.SelectWidth + '" disabled="true"></select></td>';
    HTML +='        </tr>';
    HTML +='        <tr height="4px" colspan="3">';
    HTML +='        <tr align="center">';
    HTML +='            <td align="right" style="padding-left:1px"><input type="button" value="确定" class="data_tab_input" id="_okBtn' + this.nameSuffix + '"/></td><td width="26"></td><td align="left" style="padding-right:1px"><input type="button" value="取消" class="data_tab_input" id="_cancelBtn' + this.nameSuffix + '"/></td>';
    HTML +='        </tr>';
    HTML +='    </table>';
    
    //alert(sFrame);
    document.body.insertAdjacentHTML("beforeEnd", sFrame);
    var InvokParam = '_initTreeFrame(\'' + this.nameSuffix + '\',\'' + HTML + '\')';
    //alert(InvokParam);
    setTimeout(InvokParam,700);
    
}

Tree.prototype.getParentSelect = function()
{
    var frmObj = document.frames("_IFrm" + this.nameSuffix);
    return frmObj.document.all("_parent" + this.nameSuffix);
}

Tree.prototype.getChildSelect = function()
{
    var frmObj = document.frames("_IFrm" + this.nameSuffix);
    return frmObj.document.all("_child" + this.nameSuffix);
}

function _initTreeFrame(nameSuffix, frameHTML)
{
    var frameName = "_IFrm" + nameSuffix;
    var frmObj = document.frames(frameName);
    frmObj.document.body.leftMargin = 0;
    frmObj.document.body.rightMargin = 0;
    frmObj.document.body.topMargin = 0;
    frmObj.document.body.bottomMargin = 0;
    frmObj.document.body.style.backgroundColor = "#E5DBEB";
    frmObj.document.body.innerHTML = frameHTML;

    var parentSelect = frmObj.document.all("_parent" + nameSuffix);
    parentSelect.attachEvent("onchange", frmObj.parentSelectChange);
    
    var childSelect =  frmObj.document.all("_child" + nameSuffix);
    childSelect.attachEvent("onchange", frmObj.childrenSelectChange);
    
    var okBtn = frmObj.document.all("_okBtn" + nameSuffix);
    okBtn.attachEvent("onclick", frmObj.okBtnClick);//_okBtnClick);

    var cancelBtn = frmObj.document.all("_cancelBtn" + nameSuffix);
    cancelBtn.attachEvent("onclick", frmObj.cancleBtnClick);

    //var tb= document.all("_Div" + nameSuffix);
    //tb.attachEvent("onmouseout", _mouseOut);
}


/*
* 省公司下拉框变化，更具选择的省公司，生成对应的是公司Options
*/
Tree.prototype.changeParentSelect = function()
{
    var parentSelect = this.getParentSelect();
    
    var value = parentSelect.value;
    
    var childSelect = this.getChildSelect();
    
    var length = childSelect.options.length;
    for(i = 0; i < length; i++)
    {
        childSelect.options.remove(0);
    }
    
    var childOptions = this.relation[value];
    for(opValue in childOptions)
    {
        var op = document.createElement("OPTION");
        childSelect.options.add(op);
        op.innerText = childOptions[opValue];
        op.value = opValue;
    }
    
    var minLen = 0;
    
    if(this.parentSelected)
    {
        minLen = 1;
    }
    
    if(childSelect.options.length <= minLen)
    {
        childSelect.disabled = true;
    }
    else
    {
        childSelect.disabled = false;
    }
}

/*
* 点击确定按钮，将选择的数据取出，设置到对应的输入框中
*/
Tree.prototype.ok = function()
{
    var parentSelect = this.getParentSelect();
    var childSelect =  this.getChildSelect();
    
    if(parentSelect.value == "NoSelected")
    {
        this.setValue("",new Array("",""));
        this.close();
    }
    else if( childSelect.disabled )
    {
        this.setValue(parentSelect.value, this.getValue(parentSelect.value));
        this.close();
    }
    else if( childSelect.value == "NoSelected")
    {
        if(this.parentSelected)
        {
            this.setValue(parentSelect.value, this.getValue(parentSelect.value));
            this.close();
        }
        else
        {
            this.close();
        }
    }
    else
    {
        this.setValue(childSelect.value, this.getValue(childSelect.value));
        this.close();
    }
    
    this.invokeOnChange();
    this.onChange = null;
}

Tree.prototype.invokeOnChange = function()
{
    if(this.onChange)
    {
        this.onChange();
    }
    else
    {
        if( this.nameObj && this.nameObj.tagName && this.nameObj.tagName == "INPUT" )
        {
            this.nameObj.fireEvent("onchange");
        }
    }
}

Tree.prototype.cancel = function()
{
    this.close();
    this.onChange = null;
}

/*
* 根据ID得到对应的公司名称
*/
Tree.prototype.getValue = function(value)
{
    var retValue = this.splitContent(this.list[value]);
    var retArray = new Array();
    
    if(retValue instanceof Array)
    {
        retArray[0] = retValue[0];
        retArray[1] = this.list[retValue[1]] + "  " + retValue[0];
        return retArray;
    }
    else
    {
        retArray[0] = retValue;
        retArray[1] = retValue;
        return retArray;
    }
}

/*
* 显示选择框
* inputName : String 保存选择的公司编码的input名称
* spanId : String 显示选择公司名称的span ID
*/
Tree.prototype.show = function(idControlName, nameControlName, onChange)
{
    if(onChange)
    {
        this.onChange = onChange;
    }
    
    var eventEle = event.srcElement;
    if( !nameControlName)
    {
        
        var nameControl = _findNextSibling(eventEle);
        if(nameControl && nameControl.tagName)
        {
            /*
            if(nameControl .tagName == "SPAN")
            {
                nameControlName = nameControl.id;
            }
            else if(nameControl .tagName == "INPUT");
            {
                nameControlName = nameControl .name;
            }
            */
            if(nameControl.tagName == "SPAN" || nameControl.tagName == "INPUT")
            {
                nameControlName = nameControl;
            }
        }
        
        if(!nameControlName)
        {
            alert("必须指定数据邦定的控件2");
            return;
        }
    }

    if( !idControlName)
    {
        var idControl = _findNextSibling(_findNextSibling(eventEle));
        //alert(idControl.tagName)
        if(idControl && idControl.tagName)
        {
            //alert(idControl.tagName);
            /*
            if(idControl.tagName == "SPAN")
            {
                idControlName = idControl.id;
            }
            else if(idControl.tagName == "INPUT");
            {
                idControlName = idControl.name;
            }
            */
            if(idControl.tagName == "SPAN" || idControl.tagName == "INPUT")
            {
                idControlName = idControl;
            }
        }
        
        if(!idControlName)
        {
            alert("必须指定数据邦定的控件1");
            return;
        }
    }

    this.setControl(idControlName, nameControlName);

    this.setInitValue();
    
    var divObj = eval("_Div" + this.nameSuffix);
    var left = event.clientX - 20;
    divObj.style.left = left;

    var top = event.clientY;
    divObj.style.top = top - 20;
    divObj.style.display = "";
}