对CollapablePanel控件的改进

　　此改进是从Microsoft IE Web Controls中得到的启示。
　　在“自己写的web自定义控件”提到的web控件中，CollapablePanel控件在客户端页面中生成了相当大部分的Html代码，这影响了页面的整体美观性，也加大了页面的体积。今天，我将写的是如何使用Xml来改进此控件的显示。

　　首先，我们来作下对比：
　　原来控件在客户端生成的Html代码如下：

<div id="CollapablePanel1" PanelCssClass="panel" class="tt" style="175px;background-color:#FFE0C0;border-style:Solid;border-1px;border-color:#404000;">
    <table id="CollapablePanel1_container" width="100%" height="100%" border="0" cellpadding="0" cellspacing="0">
        <tr style="height:22px;background-color:;">
            <td class="panel" onclick="CollapablePanel_Expand(0, 'CollapablePanel1');"><table style="100%;cursor:default;">
                <tr>
                    <td id="CollapablePanel1_text_0" style="color:Yellow;">系统菜单</td><td id="CollapablePanel1_button_0" style="20;"><font style='text-align:center;100%;font-family:Marlett;color:Yellow'>5</font></td>
                </tr>
            </table></td>
        </tr><tr>
            <td valign="top"><table cellpadding="2" border="0" style="100%;">
                <tr>
                    <td width="1"><img src="save.gif" align="absmiddle" /></td><td><a href="javascript:__doPostBack('CollapablePanel1','0:0')">我的资料</a></td>
                </tr><tr>
                    <td width="1"><img src="save.gif" align="absmiddle" /></td><td><a href="javascript:__doPostBack('CollapablePanel1','0:1')">修改密码</a></td>
                </tr><tr>
                    <td width="1"><img src="save.gif" align="absmiddle" /></td><td><a href="javascript:__doPostBack('CollapablePanel1','0:2')">退出登录</a></td>
                </tr>
            </table></td><tr>
                <td height="1"></td>
            </tr>
        </tr><tr style="height:22px;background-color:;">
            <td class="panel" onclick="CollapablePanel_Expand(3, 'CollapablePanel1');"><table style="100%;cursor:default;">
                <tr>
                    <td id="CollapablePanel1_text_3" style="color:Yellow;">会员管理</td><td id="CollapablePanel1_button_3" style="20;"><font style='text-align:center;100%;font-family:Marlett;color:Yellow'>6</font></td>
                </tr>
            </table></td>
        </tr><tr style="display:none;">
            <td valign="top"><table cellpadding="2" border="0" style="100%;">
                <tr>
                    <td width="1"><img src="save.gif" align="absmiddle" /></td><td><a href="javascript:__doPostBack('CollapablePanel1','1:0')">新增会员</a></td>
                </tr><tr>
                    <td width="1"><img src="save.gif" align="absmiddle" /></td><td><a href="javascript:__doPostBack('CollapablePanel1','1:1')">会员管理</a></td>
                </tr><tr>
                    <td width="1"><img src="save.gif" align="absmiddle" /></td><td><a href="javascript:__doPostBack('CollapablePanel1','1:2')">会员续费</a></td>
                </tr>
            </table></td><tr>
                <td height="1"></td>
            </tr>
        </tr><tr style="height:22px;background-color:;">
            <td class="panel" onclick="CollapablePanel_Expand(6, 'CollapablePanel1');"><table style="100%;cursor:default;">
                <tr>
                    <td id="CollapablePanel1_text_6" style="color:Yellow;">其他管理</td><td id="CollapablePanel1_button_6" style="20;"><font style='text-align:center;100%;font-family:Marlett;color:Yellow'>6</font></td>
                </tr>
            </table></td>
        </tr><tr style="display:none;">
            <td valign="top"><table cellpadding="2" border="0" style="100%;">
                <tr>
                    <td width="1"><img src="save.gif" align="absmiddle" /></td><td><a href="javascript:__doPostBack('CollapablePanel1','2:0')">档案录入</a></td>
                </tr>
            </table></td><tr>
                <td height="1"></td>
            </tr>
        </tr>
    </table>
</div>

　　改进后，所生成的代码如下：

<?XML:NAMESPACE PREFIX="fsc" /><fsc:CollapablePanel id="CollapablePanel1" class="tt" PanelColor="Yellow" PanelBackColor="#804000" PanelCssClass="panel" PanelHeight="22" AutoPostBack="True" style="150px;background-color:#FFE0C0;border-style:Solid;border-1px;border-color:#404000;">
    <fsc:CollPanel Text="系统菜单" Expanded="False" i_Expanded="False" Locked="False">
        <fsc:CollItem Text="我的资料" ImageUrl="save.gif">

        </fsc:CollItem><fsc:CollItem Text="修改密码" ImageUrl="save.gif">

        </fsc:CollItem><fsc:CollItem Text="退出登录" ImageUrl="save.gif">

        </fsc:CollItem>
    </fsc:CollPanel><fsc:CollPanel Text="会员管理" Expanded="True" i_Expanded="True" Locked="False">
        <fsc:CollItem Text="新增会员" ImageUrl="save.gif">

        </fsc:CollItem><fsc:CollItem Text="会员管理">

        </fsc:CollItem><fsc:CollItem Text="会员续费" ImageUrl="save.gif">

        </fsc:CollItem>
    </fsc:CollPanel><fsc:CollPanel Text="其他管理" Expanded="False" i_Expanded="False" Locked="False">
        <fsc:CollItem Text="档案录入" ImageUrl="save.gif">

        </fsc:CollItem>
    </fsc:CollPanel>
</fsc:CollapablePanel>

　　当然，在文档的末尾入多了一行：

<script>
CollapablePanel_Create(document.getElementById("CollapablePanel1"));
</script>

　　这是根据控件的节点来创建相应的DOM对象，显示到文档中。
　　函数CollapablePanel_Create的代码如下：

function CollapablePanel_Create(element)
{
    var oTable = document.createElement("TABLE");
    oTable.style.width = "100%";
    oTable.cellPadding = "0px";
    oTable.cellSpacing = "0px";
    oTable.border = "0px";
    if(element.style.height != null)
    {
        oTable.style.height = "100%";
    }
    for(var i = 0; i < element.childNodes.length; i++)
    {
        var panel = element.childNodes[i];
        if(i != 0)
        {
            var oTr = oTable.insertRow(oTable.rows.length);
            var oTd = oTr.insertCell(0);
            oTd.style.height = "1px";
        }
        if(panel != undefined)
        {
            var oTr = oTable.insertRow(oTable.rows.length);
            var oTd = oTr.insertCell(0);
            var tTable = document.createElement("TABLE");
            oTr.style.height = element.PanelHeight;
            oTr.id = element.id + "_title_" + i;
            if(element.PanelBackColor != undefined)
            {
                oTr.style.bgColor = element.PanelBackColor;
            }
            if(panel.i_Expanded == "True")
            {
                if(element.PanelCssClass != undefined)
                {
                    oTr.className = element.PanelCssClass;
                }
            }
            else
            {
                if(element.PanelCollapsedCssClas != undefined)
                {
                    oTr.className = element.PanelCollapsedCssClas;
                }
                else if(element.PanelCssClass != undefined)
                {
                    oTr.className = element.PanelCssClass;
                }
            }
            if(panel.Locked == "False")
            {
                oTr.onclick = function ()
                {
                    CollapablePanel_Expand(this.id.split("_")[2], element.id);
                }
            }
            
            tTable.style.width = "100%";
            tTable.cellPadding = "0px";
            tTable.cellSpacing = "0px";
            tTable.border = "0px";
            tTable.style.cursor = "default";
            var tTr = tTable.insertRow(0);
            var tTd = tTr.insertCell(0);
            tTd.innerText = panel.Text;
            tTd.style.color = element.PanelColor;
            var tTd1 = tTr.insertCell(1);
            tTd1.id = element.id + "_button_" + i;
            tTd1.style.width = "20px";
            if(element.ExpandImageUrl != undefined && element.CollapseImageUrl != undefined)
            {
                tTd1.innerHTML = "<img src='" + (panel.i_Expanded == "True" ? element.CollapseImageUrl : element.ExpandImageUrl) + "' align=absmiddle>";
            }
            else
            {
                tTd1.innerHTML = "<font style='text-align:center;100%;font-family:Marlett;color:" + element.PanelColor + "'>" + (panel.i_Expanded == "True" ? "5" : "6") + "</font>";
            }
            oTd.appendChild(tTable);
            oTr = oTable.insertRow(oTable.rows.length);
            oTd = oTr.insertCell(0);
            oTr.id = element.id + "_items_" + i;
            if(panel.i_Expanded == "False" || (element.ExpandSolePanel == "True" && panel.i_Expanded == "False"))
            {
                oTr.style.display = "none";
            }
            //oTd.style.valign = "top";
            var iTable = document.createElement("TABLE");
            iTable.style.width = "100%";
            iTable.border = "0px";
            iTable.cellPadding = "2px";
            iTable.cellSpacing= "0px";
            for(var j = 0; j < panel.childNodes.length; j++)
            {
                var item = panel.childNodes[j];
                var iTr = iTable.insertRow(iTable.rows.length);
                var iTd = iTr.insertCell(0);
                iTd.style.width = "1px";
                var iTd1 = iTr.insertCell(1);
                var pTable = document.createElement("TABLE");
                pTable.style.width = "100%";
                pTable.border = "0px";
                if(item.ImageUrl != undefined)
                {
                    var img = document.createElement("IMG");
                    img.src = item.ImageUrl;
                    img.style.align = "absmiddle";
                    iTd.appendChild(img);
                }
                var a = document.createElement("A");
                a.innerText = item.Text;
                if(element.AutoPostBack == "True")
                {
                    a.href = "javascript:__doPostBack('" + element.id + "','" +  i + ":" + j + "');";
                }
                else if(item.Url != undefined)
                {
                    a.href = item.Url;
                    if(item.Target != undefined)
                    {
                        a.target = item.Target;
                    }
                }
                iTd1.appendChild(a);
            }
            oTd.appendChild(iTable);
        }
    }
    element.appendChild(oTable);
}

　　此函数中，根据传入的控件对象，获得它的子节点对象及相应的属性值来生成Html对象，即所得到的效果与之前的完全一致。