一棵树 Bom树

目前做一个制造业的ERP，要处理一个Bom，里面的阶数和节点数未知。
就是一棵复杂一点的客户端树（能与服务端交互），问了几个朋友，都爱莫能助，只好自己写了。
比较乱，不知道是否说清楚了，但愿能给你一点点的帮助。
一、环境 .net1.1 + javascript
二、关键字：树 Bom  Bom树 javascript树
三、主要功能：
1、框架是左边树右边内容，两边要可以交互，即点击左边节点右边要能显示内容，右边内容保存或删除或建子节点要即时的更新左边的树。
2、树是一层一层打开的，所有的树的HTML都是有代码生成，可以无限节点，无限阶数（当然速度有影响）。
3、第一次打开读数据库，第二次要显示的时候就不必读数据库，第二次显示只是改变visible。
四、主要代码
1、javascript部分（主树）  RemoteBigServer.js

/*------------------------------------下面是树的操作----------------------------------------*/

var m_MaginWith = 14;
var m_ImageWith = 9;
var m_UrlPkid = "BomContentMaterial.aspx?PKID=";
var m_UrlMat = "BomContentProduct.aspx?MaterialNo=";
var m_UrlRemote = "../CommonPage/BomServer.asmx";
var m_ContentPre = "Content";
var m_ImgPre = "Img";
var m_ContentFormTag = "main";
var m_iamgeSpace = "../Images/treeicon/space.gif";
var m_iamgeMinus = "../Images/treeicon/minus.gif";
var m_iamgePlus = "../Images/treeicon/plus.gif";



//other root use pkid as mark
//e.g. :divPKID + pkid   ; content + pkid ; img + pkid
function OnTurnIt()
{
    var DivCurrent = event.srcElement.parentElement;    
    if (DivCurrent.tagName == 'TD')
        DivCurrent = event.srcElement;
        
    var strPKID = DivCurrent.id.substring(7);    
    
    var objContent = document.getElementById(m_ContentPre + strPKID);
    var objDivContent = document.getElementById("divContent" + strPKID);
    var objImage = document.getElementById(m_ImgPre + strPKID);
    if (objContent == null)
    {
    
        var result = StartGetReomte(strPKID);
        //if No Detail  Return  NoData 
        var divObj = document.getElementById("divContent" + strPKID);
        if (result == null || result == "" || result == "nodata" )
        {
            //if clear, has a space
            //divObj.innerHTML = "";   
            return ;
        }
        
        var strHTML = CombineHTML(result,strPKID);        
        
        
        divObj.innerHTML = strHTML;
            
    //    DivCurrent.insertAdjacentHTML( "afterEnd", strHTML);  
        
        objImage.src= m_iamgeMinus;
        
    }
    else
    {
        if (objContent.style.display=="none") 
        {
            objDivContent.style.display="";
            objContent.style.display="";
            objImage.src= m_iamgeMinus;
        }
        else
        {
            objDivContent.style.display="none"; 
            objContent.style.display="none"; 
            objImage.src= m_iamgePlus;
        }
    }
}

function StartGetReomte(strPKID)
{
    var SoapBody = "<strPKID>"+ strPKID + "</strPKID>";
    var MethodName = "GetBomDetailByPKID";
    var result = RemoteRun(m_UrlRemote, MethodName, SoapBody);
    
    return result;
}


//Fill
function CombineHTML(result,strParentpkid)
{
    var strBlockHtml = "";
    var strExPrefix = "<table width='100%' border='0' id='" + m_ContentPre + strParentpkid + "'><tr><td width='"+ m_MaginWith 
                        + "'></td><td><table width='100%' border='0'>"                    
    var strExSuffix = "</table></td></tr></table>";
    
    var objRow = result.split('|');
    if (objRow.length <= 0)
    {
        return;
    }
            
    for(var i = 0 ;i <objRow.length ; i++)
    {
        if (objRow[i] == "")
        {
            continue;
        }
        
        var objcolumn = objRow[i].split(',');
        
        if (objcolumn.length != 3)
        {
            continue;
        }
        
        //objRow Has Three Value: PKID ,MaterialNo    , HasChild
        var strDetailPKID        = objcolumn[0];
        var MaterialNo            = objcolumn[1];
        var hasChild            = objcolumn[2];
        
        var imageSrc = m_iamgePlus;
        if (hasChild==0)
        {
            imageSrc = m_iamgeSpace;
        }
                
        var contentPre = "<tr><td><div style='CURSOR: hand'id='divPKID"+ strDetailPKID +"' onmouseup=OnTurnIt();>";
        var contentSuf = "</div><div id='divContent"  + strDetailPKID + "'></div></td></tr>"; 
        
        var content = "<IMG id='" + m_ImgPre + strDetailPKID + "' width=" + m_ImageWith + " src='" + imageSrc + "'><A href='" + m_UrlPkid + strDetailPKID + "' target='" + m_ContentFormTag + "'>" + MaterialNo + "</A>";

        strBlockHtml += contentPre + content + contentSuf;
        
    }
    
    if (strBlockHtml != "")
    {
        strBlockHtml = strExPrefix + strBlockHtml + strExSuffix;
    }
    
    return strBlockHtml;
}

function RemoteRun(page, Method, SoapBody)
{
    var url = page + "?methodname=" + Method;
    var xmlhttp,dom,node,xmlDOC;
    
    var SoapHead = "<?xml version='1.0' encoding='utf-8'?>" +
                    "<soap:Envelope xmlns:xsi='http://www.w3.org/2001/XMLSchema-instance' xmlns:xsd='http://www.w3.org/2001/XMLSchema' xmlns:soap='http://schemas.xmlsoap.org/soap/envelope/'><soap:Body><" + Method + " xmlns='http://localhost'>";
    var SoapTail = "</" + Method + "></soap:Body></soap:Envelope>";

    var SoapRequest = SoapHead + SoapBody + SoapTail;
    
    xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
    xmlhttp.Open("POST",url,false);
    xmlhttp.setRequestHeader("Content-Type", "text/xml;charset=utf-8");
    xmlhttp.setRequestHeader("SOAPAction", "http://localhost/"+Method);
    xmlhttp.setRequestHeader("Content-Length",SoapRequest.length);
    xmlhttp.Send(SoapRequest);
    
    if( xmlhttp.Status == 200 )
    {
        var result = xmlhttp.responseXML.getElementsByTagName(Method + "Result");
        if(result)
        {
            return result(0).text;
        }
    }

    return "fail,check network!";
}
//other root tree
/*------------------------------------上面是树的操作----------------------------------------*/



//first root use materialno as mark
//e.g. :div + materialNo   ; content + materialNo ; img + materialNo
function OnProductTurnIt()
{
    var DivCurrent = event.srcElement.parentElement;    
    if (DivCurrent.tagName == 'TD')  //如果指向了上一级，就指回来
        DivCurrent = event.srcElement;
        
    var strMaterialNo = DivCurrent.id.substring(6);    
    var strMatVersion = document.getElementById("txtVersion").value;
    
    if (strMaterialNo == "")
        return;
    
    var objContent = document.getElementById(m_ContentPre + strMaterialNo);
    var objImage = document.getElementById(m_ImgPre + strMaterialNo);
    if (objContent == null)
    {    
        var result = StartGetReomteByMat(strMaterialNo,strMatVersion);
        //if No Detail  Return  NoData 
        
        var divObj = document.getElementById("divContent" + strMaterialNo);
        if (result == null || result == "" || result == "nodata" )
        {
            //divObj.innerHTML = "";
            return ;
        }
        /**/
        
        var strHTML = CombineHTML(result,strMaterialNo);    
        
        
        divObj.innerHTML = strHTML;        
    //    DivCurrent.insertAdjacentHTML( "afterEnd", strHTML);  
        
        objImage.src= m_iamgeMinus;
        
    }
    else
    {
        if (objContent.style.display=="none") 
        {
            objContent.style.display="";
            objImage.src= m_iamgeMinus;
        }
        else
        {
            objContent.style.display="none"; 
            objImage.src= m_iamgePlus;
        }
    }    
}

function StartGetReomteByMat(strMaterialNo,strMatVersion)
{
    var sRet = "";
    
    //if no version ,there is no info ,so return empty;
    if (strMatVersion == "")
        return sRet;
        
    var SoapBody = "<MaterialNo>"+ strMaterialNo + "</MaterialNo>" + "<MatVersion>"+ strMatVersion + "</MatVersion>"

    var MethodName = "StartGetReomteByMat";
    sRet  = RemoteRun(m_UrlRemote, MethodName, SoapBody);
    
    return sRet;
}
// above is first root
/*------------------------------------上面是树的操作----------------------------------------*/


/*------------------------------------下面是弹出窗口和查询的操作的操作----------------------------------------*/

var Argobj;
var m_urlPopupMat = '../CommonPage/PopupGetMaterial.aspx?MaterialNo=';


function GetMatNoAndDoQuery()
{
    getMatAndVerFromPopUpWin();
        
    DoSetFirstRoot(Argobj.MaterialNo,Argobj.MatVersion);    
    
}


function getMatAndVerFromPopUpWin()
{    
    Argobj = new Object();

    var txtmaterialno = document.getElementById("txtMaterialNo");
    var strMatNo = txtmaterialno.value;
    
    var sDlgPath = m_urlPopupMat + strMatNo ;
    var sFeatures = 'dialogHeight: 400px; dialogWidth: 320px;scroll:no;help:No;edge:sunken; center:yes; status: No;';

    window.showModalDialog(sDlgPath,Argobj,sFeatures);    
    
    if (Argobj != null && Argobj.MaterialNo != null && Argobj.MaterialNo != "")
    {
        document.getElementById("txtMaterialNo").value =Argobj.MaterialNo;
        document.getElementById("txtVersion").value   =Argobj.MatVersion;
    }    
    else
    {
        Argobj.MaterialNo = "";
        Argobj.MatVersion = "";
    }    
}

function DoSetFirstRoot(strMaterialNo,strMatVersion)
{
    if (strMaterialNo == "")
    {
        return;
    }
    
    var txtproduct = document.getElementById("txtproduct");    
    
    var contentPre = "<div style='CURSOR: hand'id='divMat"+ strMaterialNo +"' onmouseup=OnProductTurnIt();>";
    var contentSuf = "</div><div id='divContent" + strMaterialNo + "'></div>";
    var content = "<IMG id='" + m_ImgPre + strMaterialNo + "' width=" + m_ImageWith + " src='" + m_iamgeSpace + "'><A href='" + m_UrlMat + strMaterialNo   + "&BomVersion=" +  strMatVersion + "' target='" + m_ContentFormTag + "'>" + strMaterialNo + "</A>";
    
    var strProductHtml = contentPre + content + contentSuf;
        
    txtproduct.innerHTML =  strProductHtml;    
    
    //update bomConent
    //document.parentWindow.parent.frames.item(1).location.replace(m_UrlMat + strMaterialNo + "&BomVersion=" +  strMatVersion);

}

/*------------------------------------上面是弹出窗口和查询的操作的操作----------------------------------------*/



/*-----------------------------Begin-------敲回车的四种显示状态----------------Begin------------------------*/

//4status , hasMaterialNo(show) ,Has1Bom(show) ,HasManyBom(popup), NoMaterialNo(popup)

function MatKey13Down()
{
    if(event.keyCode != 13)
    {        
        return;
    }
    
    var txtMaterialNo = event.srcElement;    
    var strMaterialNo = txtMaterialNo.value;    
    var strMatVersion = getDefaultMatVersion(strMaterialNo);    
    
    var strRetValue = DoGetMatVersion(strMaterialNo);
    if (strRetValue == "")
    {
        GetMatNoAndDoQuery();
        return;
    }
    
    var iverCounts = -1;
    var iMatCounts = -1;
    var strRets = strRetValue.split('|_|');
    if (strRets.length > 1)
    {
        iMatCounts = strRets[0];
        iverCounts = strRets[1];
        strMatVersion = strRets[2];        
        if (strMatVersion != '')
            document.getElementById("txtVersion").value = strMatVersion;
    }
    
    // NoMaterialNo(popup)
    if (iMatCounts == 0 || iverCounts > 1)
    {
        GetMatNoAndDoQuery();
    }
    else if (iverCounts == 1)
    {
        DoSetFirstRoot(strMaterialNo,strMatVersion);
    }
    else if (iMatCounts == 1 && iverCounts == 0)
    {
        strMatVersion = document.getElementById("txtVersion").value;
        DoSetFirstRoot(strMaterialNo,strMatVersion);        
    }
}


//set Default MatVersion by script
function getDefaultMatVersion(strMaterialNo)
{
    var strMatVersion = "";
    var SoapBody = "<MaterialNo>"+ strMaterialNo + "</MaterialNo>";
    
    var MethodName = "getDefaultVersion";
    strMatVersion = RemoteRun(m_UrlRemote, MethodName,SoapBody);
    
    document.getElementById("txtVersion").value = strMatVersion;
    
    return strMatVersion;
}

function DoGetMatVersion(strMaterialNo)
{
    var sRet = "";
    if (strMaterialNo == "")
        return sRet;
        
    var SoapBody = "<MaterialNo>"+ strMaterialNo + "</MaterialNo>";

    var MethodName = "getVersionByMat";
    sRet  = RemoteRun(m_UrlRemote, MethodName, SoapBody);
    
    return sRet;    
}


/*-----------------------------End-------敲回车的四种显示状态----------------End------------------------*/


/*----------------Begin-------右边 保存后的调用函数--------Begin--------------------*/
//other root use pkid as mark
//e.g. :div + pkid   ; content + pkid ; img + pkid
function OnTurnItAuto(strPKID)
{
    var DivCurrent = document.getElementById('divPKID' + strPKID);
    var objContent = document.getElementById(m_ContentPre + strPKID);
    var objImage   = document.getElementById(m_ImgPre + strPKID);
    

    var result = StartGetReomte(strPKID);
    //if No Detail  Return  NoData 
    var divObj = document.getElementById("divContent" + strPKID);
    if (result == null || result == "" || result == "nodata" )
    {
        divObj.innerHTML = "";
        return ;
    }
    
    var strHTML = CombineHTML(result,strPKID);            
    
    
    divObj.innerHTML = strHTML;
    
    
    //show
    //divObj.style.display="";
    //document.getElementById(m_ContentPre + strPKID).style.display="";
    
    //DivCurrent.insertAdjacentHTML( "afterEnd", strHTML);  
    
    objImage.src= m_iamgeMinus;

}


//first root
function OnProductTurnItAuto(strMaterialNo)
{
    if (strMaterialNo == "")
        return;

    var DivCurrent = document.getElementById('divMat' + strMaterialNo);        
    var strMatVersion = document.getElementById("txtVersion").value;
    
    
    var objContent = document.getElementById(m_ContentPre + strMaterialNo);
    var objImage = document.getElementById(m_ImgPre + strMaterialNo);

    var result = StartGetReomteByMat(strMaterialNo,strMatVersion);
    //if No Detail  Return  NoData 
    
    var divObj = document.getElementById("divContent" + strMaterialNo);
    if (result == null || result == "" || result == "nodata" )
    {
        divObj.innerHTML = "";
        return ;
    }
    /**/
    
    var strHTML = CombineHTML(result,strMaterialNo);    
    
    
    //show
    //divObj.style.display="";
    //document.getElementById(m_ContentPre + strMaterialNo).style.display="";
    
    divObj.innerHTML = strHTML;
            
//    DivCurrent.insertAdjacentHTML( "afterEnd", strHTML);  
    
    objImage.src= m_iamgeMinus;

    
}


function FlushLeftByRightSave()
{
    var strRetValue = document.getElementById("txtCurrenSaveValue").value;
    
    var strRes = strRetValue.split('|_|');
    
    if (strRes.length == 2)
    {
        var strValue  = strRes[0];
        var status  = strRes[1];
                
        if (status == 1)  //1 express first root
        {
            OnProductTurnItAuto(strValue);
        }
        else if (status == 2)  //2 exress >2 root
        {
            OnTurnItAuto(strValue);        
        }        
    }            
}

/*----------------End-------右边 保存后的调用函数--------End--------------------*/

2、WebService部分 BomServer.asmx

        private int GetChildCount(string strMatNo,DataTable dtCount)
    

 3、右边保存或删除的交互部分
（1）子件物料的保存和删除通过此函数

        private void RegisterFlushLeftTree()
        }

对应Javascript

//now not completed
function OnFlushLeftTree(strValue)
}

（2）父件删除和保存的

        private void SetLeftTreeBomVerSion(int intBomVersion)
        }

对应Javascript

function OnSetLeftBomVersion(strBomVersion)
}