一棵树 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)
        {
            int iret = 0;
            string strExp = string.Format(" FatherMat = '{0}' ",strMatNo);
            DataRow[] drs = dtCount.Select(strExp);

            if (drs.Length > 0)
            {
                iret = (int)drs[0]["ChildCount"] ;
            }

            return iret;
        }

        [WebMethod]
        public string StartGetReomteByMat(string MaterialNo,string MatVersion)
        {
            string strRet = "";

            string strSQLPKIDMat = string.Format(" Select PKID,MaterialNo FROM TBL_BomDetail Where FatherMat = \'{0}\' And ProductNo = \'{0}\'  And BomVersion = {1} And IsDelete = 0  ",MaterialNo,MatVersion);
            string strSQLHasChild = string.Format(" Select FatherMat,Count(*) As ChildCount FROM TBL_BomDetail Where FatherMat In ( Select MaterialNo FROM TBL_BomDetail Where FatherMat = \'{0}\' And ProductNo = \'{0}\'  And BomVersion = {1} And IsDelete = 0 ) And ProductNo = \'{0}\'  And BomVersion = {1} And IsDelete = 0 Group By FatherMat  ",MaterialNo,MatVersion);
            string strSQL = string.Format(" {0} ; {1} ",strSQLPKIDMat,strSQLHasChild);

            DataSet ds =  DataProvider.RunSelect(strSQL);

            if (ds==null || ds.Tables.Count <= 1 || ds.Tables[0].Rows.Count ==0)
            {
            }
            else
            {
                foreach(DataRow dr in ds.Tables[0].Rows)                               
                {
                    if (strRet.Trim() != "")
                    {
                        strRet += "|";
                    }
                    string strPKID = dr["PKID"].ToString().Trim();
                    string strMatNo = dr["MaterialNo"].ToString().Trim();

                    int childCount = GetChildCount(strMatNo,ds.Tables[1]);

                    strRet    += string.Format("{0},{1},{2}",strPKID,strMatNo,childCount);
                }
            }

            return strRet;
        }


        [WebMethod]
        public string GetBomDetailByPKID(string strPKID)
        {
            string strRet = "";

            string strConSQL = string.Format("  FatherMat In (Select MaterialNo FROM TBL_BomDetail  Where PKID =  {0}) And ProductNo In (Select ProductNo FROM TBL_BomDetail  Where PKID =  {0}) And  BomVersion In (Select BomVersion FROM TBL_BomDetail  Where PKID =  {0}) ",strPKID);
            string strSQLPKIDMat = string.Format(" Select PKID,MaterialNo FROM TBL_BomDetail Where IsDelete = 0  And  {0} ",strConSQL);

            string strHasChildCon = string.Format("  ProductNo In (Select ProductNo FROM TBL_BomDetail  Where PKID =  {0}) And  BomVersion In (Select BomVersion FROM TBL_BomDetail  Where PKID =  {0}) ",strPKID);
            string strHasChildConFatherMat = string.Format(" FatherMat In ( Select MaterialNo FROM TBL_BomDetail Where IsDelete = 0 And {0} ) ",strConSQL);
            string strSQLHasChild = string.Format("  Select FatherMat,Count(*) As ChildCount FROM TBL_BomDetail Where {0} And {1} And IsDelete = 0 Group By FatherMat  ",strHasChildConFatherMat,strHasChildCon);
            string strSQL = string.Format(" {0} ; {1} ",strSQLPKIDMat,strSQLHasChild);

            DataSet ds =  DataProvider.RunSelect(strSQL);

            if (ds==null || ds.Tables.Count==0 || ds.Tables[0].Rows.Count ==0)
            {
            }
            else
            {
                foreach(DataRow dr in ds.Tables[0].Rows)                               
                {
                    if (strRet.Trim() != "")
                    {
                        strRet += "|";
                    }
                    string strDetialPKID = dr["PKID"].ToString().Trim();
                    string strMatNo = dr["MaterialNo"].ToString().Trim();
                    int childCount = GetChildCount(strMatNo,ds.Tables[1]);
                    strRet    += string.Format("{0},{1},{2}",strDetialPKID,strMatNo,childCount);
                }
            }

            return strRet;
        }

        [WebMethod]
        public string getVersionByMat(string MaterialNo)
        {
            string strRet = "";
            string strSQLMat = string.Format(" Select PKID FROM TBL_StockMaterial Where MaterialNo = \'{0}\'  ",MaterialNo);
            string strSQLBom = string.Format(" Select BomVersion FROM TBL_Bom Where MaterialNo = \'{0}\' And IsDelete = 0  ",MaterialNo);
            string strSQL = string.Format("{0} ; {1}  ",strSQLMat,strSQLBom);


            DataSet ds =  DataProvider.RunSelect(strSQL);

            if (ds==null || ds.Tables.Count <= 1 || ds.Tables[0].Rows.Count ==0)
            {
            }
            else
            {
                int iMatCount = ds.Tables[0].Rows.Count ;
                int iVerCount = ds.Tables[1].Rows.Count ;
                string strMatVersion  = "";
                if (ds.Tables[1].Rows.Count > 0)
                    strMatVersion = ds.Tables[1].Rows[0]["BomVersion"].ToString();

                strRet    = string.Format("{0}|_|{1}|_|{2}",iMatCount,iVerCount,strMatVersion);
            }
            return strRet;
        }



        [WebMethod]
        public int getDefaultVersion(string MaterialNo)
        {
            int retBomVersion = 0;
            int intCurMaxVersion = 0;
            string strSQL = string.Format(" Select Max(BomVersion) As MaxVersion FROM TBL_Bom Where MaterialNo = \'{0}\'  ",MaterialNo);
            DataSet ds =  DataProvider.RunSelect(strSQL);

            if (ds==null || ds.Tables.Count <= 1 || ds.Tables[0].Rows.Count ==0)
            {
            }
            else
            {
                    if (!ds.Tables[0].Rows[0].IsNull("MaxVersion"))
                        intCurMaxVersion = (int)ds.Tables[1].Rows[0]["BomVersion"];
            }

            string strYear = DateTime.Today.Year.ToString().Substring(2);
            string strMonth = DateTime.Today.Month.ToString("00");
            int iNewBomVer = Convert.ToInt32(strYear + strMonth + "00"); 

            if (iNewBomVer > intCurMaxVersion)
            {
                retBomVersion = iNewBomVer;
            }
            else
                retBomVersion = intCurMaxVersion;


            return retBomVersion + 1;
        }
        
    

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

        private void RegisterFlushLeftTree()
        {
            string strValue = "";
            if (H_ProductNo == H_FatherMat)
            {
                strValue = string.Format("{0}|_|{1}",H_FatherMat,1);
            }
            else
            {
                int ipPkid = getParentPKID();
                if (ipPkid == 0)
                    return;

                strValue = string.Format("{0}|_|{1}",ipPkid,2);
            }

            string strScript = string.Format("<Script Language = javascript>OnFlushLeftTree('{0}');</Script>",strValue);
            Page.RegisterClientScriptBlock(Guid.NewGuid().ToString(),strScript);

        }

        private int getParentPKID()
        {
            int iret = 0;
            string strSQL = string.Format(" Select PKID From TBL_BomDetail Where  IsDelete = 0  And  MaterialNo = '{0}' AND  ProductNo = '{1}' And BomVersion = '{2}' And BomLevel = '{3}' ",H_FatherMat,H_ProductNo,H_BomVersion,M_BomLevel-1);
        
            DataSet ds = DataProvider.RunSelect(strSQL);

            if (ds == null  || ds.Tables.Count == 0 || ds.Tables[0].Rows.Count == 0)
            {
            }
            else
            {
                iret = (int)ds.Tables[0].Rows[0][0];
            }

            return iret;        
        }

对应Javascript

//now not completed
function OnFlushLeftTree(strValue)
{
    var obj = document.parentWindow.parent.frames.item(0).document.getElementById('txtCurrenSaveValue');
    obj.value = strValue;        
    obj.click();
}

（2）父件删除和保存的

        private void SetLeftTreeBomVerSion(int intBomVersion)
        {
            string strScript = string.Format("<script language=javascript>OnSetLeftBomVersion('{0}');</script>",intBomVersion);
            Page.RegisterClientScriptBlock("SetLeftBomVersion",strScript);
        }


        private void OnDelLeftTree()
        {
            string strScript = string.Format("<script language=javascript>OnDelTree();</script>");
            Page.RegisterClientScriptBlock("OnDelLeftTree",strScript);
        }

对应Javascript

function OnSetLeftBomVersion(strBomVersion)
{
    var obj = document.parentWindow.parent.frames.item(0).document.getElementById('txtVersion');
    obj.value = strBomVersion;    
}


function OnDelTree()
{
    var txtproduct = document.parentWindow.parent.frames.item(0).document.getElementById('txtproduct');
    txtproduct.innerHTML =  '';    
}