业务系统设计之三：系统主控设计（下）-阿里云开发者社区

关于业务系统设计之系统主控设计，前一篇文章里已经将整个流程走了一便，最终开发出来的案例运行效果如下图：

本文将深入到系统主控的开发实现上，层层分析系统主控的各部分。首先从创建选项标签开始，通过点击菜单项来创建或选择一个已存在的选项标签，RadMenu和RadTabstrip控件对客户端事件的支持很强大，我们可以通过他的客户端事件去创建一个选项标签、选中一个存在的标签和关闭标签等等。

* 程序功能：RadMenu客户端单击事件
* 开发日期： 2008 - 11 - 08 Beniao
* 参数说明：
*           sender:执行请求的当前对象
*           eventArgs:当前对象的事件
*------------------------------------------------
*>>>>> 直接使用硬参数,Url值为相对路径(不加任何前缀修饰)
*/
function OnClientClick(sender, eventArgs)
{
     var value = eventArgs.Item.Value;   // 隐藏Url
     var text = eventArgs.Item.Text;      // 显示文本

     // 设置容器高度
    SetContentHeight();
     // 关闭菜单项
    CloseItem(sender, eventArgs);

     // 是否为首节点
     if (IsFirstTab(value))
    {
         // 显示当前页签
        DisplayCurrentTab(text);
         return ;
    }

     if (value != ' # ' )
    {
         // 存在则直接显示(即实现选中)
         if (IsExsitTab(value))
        {
            DisplayCurrentTab(text);
            eventArgs.Item.Blur();
        }
         else
        {
             // 是否为动态创建的第一个Tab

             // 不存在,创建新的
            CreateTabPage(value,text);
            eventArgs.Item.Blur();
        }
    }
}

首先通过RadMenu控件的客户端事件参数获取到菜单项的文本和隐藏的URL值，因为系统主控一般有一个默认的首页，当在创建或选择的时候都需要判断下当前是否为默认的首页。

/*
*程序功能：是否为首节点
*开发日期：2008-11-08 20:15
*参数说明：
*          requestUrl:请求的Url
*/
function IsFirstTab(requestUrl)
{
     var flag = false ;
     if (requestUrl == "" )
         return flag;

     if (requestUrl.toLowerCase() == " First.aspx " .toLowerCase())
    {
        flag = true ;
    }

     return flag;
}

如果当前页不是首页，则需要判断当前所选的菜单项的隐藏URL值是不是为“#”，数据库中的设计为如果是"#"则代表是顶层菜单项，否则则创建新的选项标签。这里又需要注意，如果将要创建的选项已经存在则选中就OK，如果不存在则创建。

/*
*程序功能：判断当前页签是否存在
*开发日期：2008-11-08 10:20
*参数说明：
*          requestUrl:请求的Url
*/
function IsExsitTab(requestUrl)
{
     var flag = false ;
     var tabStrip = <%= RadTabStripMain.ClientID %> ;

     var ofrms = divMain.childNodes;
     var count = ofrms.length;

     for ( var i = 0 ; i < count; i ++ )
    {
         // if(i == 1) continue;

         var frmID = ofrms[i].id;
         var index = GetIndex(frmID);

         var value = tabStrip.Tabs[index].Value;

         if (value.toLowerCase() == requestUrl.toLowerCase())
        {
            flag = true ;
             break ;
        }
    }

     return flag;
}

/*
*程序功能：显示当前页签
*开发日期：2008-11-08 10:20
*参数说明：
*          text:Tab上显示的文本内容
*/
function DisplayCurrentTab(text)
{
     var tab = <%= RadTabStripMain.ClientID %> .FindTabByText(text);

     if (tab)
    {
        tab.SelectParents();
    }
}

按照上面的代码则实现了判断是否为默认页---当前项是否存在---显示已经存在的选项标签。那要创建新的该怎么实现呢？这里首先需要弄清楚一个规则，实现多选项标签是利用的RadTabstrip控件的标签功能，而其下是通过iframe嵌入的一个页面，这个页面通过动态创建iframe包含到主控台上。其中每一个iframe的命名为：frm+一个数字(从0开始)，如果要创建新的iframe则首先将现在的最大“frm数字”中的数字取出来然后加1，来作为新的选项标签的iframe的ID。

/*
*程序功能：创建一个新的页签
*开发日期：2008-11-08 10:45
*参数说明：
*          value:请求的Url
*          text:显示的文本
*/
function CreateTabPage(requestUrl,text)
{
     var tabStrip = <%= RadTabStripMain.ClientID %> ;
     var number = GetMaxNumber(tabStrip);

     // 动态创建选项卡
     var li = document.createElement( " li " );
    li.id = ' tab ' + number;
     var a = document.createElement( ' a ' );
    a.id = ' Id ' + number;
    li.appendChild(a);

     var span = document.createElement( ' span ' );
    span.className = " wrap " ;
    a.appendChild(span);

     var span1 = document.createElement( ' span ' );
    span1.className = " innerWrap " ;

     var image = document.createElement( ' img ' );
    image.src = " Images/close.gif " ;
    image.attachEvent( " onclick " ,OnCloseTab);
    image.attachEvent( " onmouseover " , function (){HightLight(image);});   // 鼠标移入
    image.attachEvent( " onmouseout " , function (){Normal(image);});        // 鼠标移出
    image.alt = " 关闭 " ;

    span1.appendChild(image);
    span1.appendChild(document.createTextNode(text));
    a.firstChild.appendChild(span1);

    tabStrip.ChildStripDomElement.appendChild(li);

     var tabObject = tabStrip.CreateTabObject(tabStrip,li.firstChild,number);
    tabObject.Value = requestUrl;   // Modify by Beniao at 2008-11-07 14:10

    tabObject.Text = text;
    tabObject.Initialize();

     // 为当前页签选项创建一个iframe并添加到界面上
    CreateDivAppend(requestUrl,number);

     // 选中当前页签选项
     var sid = " Id " + number;
     var stab = tabStrip.FindTabById(sid);
    stab.Select();

    SetIndex(tabStrip, number);
    SetImage(tabStrip, tabObject);
}

通过JavaScript动态的创建一个RadTabstrip控件的页签选项，然后又动态的创建一个DIV和iframe并将指定的页面包含到iframe中。

/*
*程序功能：查找DIV对象(divMain),并根据参数新创建一个iframe对象追加到divMain的子节点上
*开发日期：2008-11-07 09:32
*参数说明：
*          requestUrl:请求Url
*          index:索引号
*/
function CreateDivAppend(requestUrl,index)
{
     var divObject = document.getElementById( " divMain " );

     // 根据Url创建iframe
     var oForm = CreateForm(requestUrl,index);
     // 将新创建的iframe追加到divMain的子节点中
    divObject.appendChild(oForm);
}

/*
*程序功能：创建一个特定请求Url的iframe对象
*开发日期：2008-11-08 11:05
*参数说明：
*          requestUrl:请求Url
*          index:索引号
*/
function CreateForm(requestUrl,index)
{
     var oFrom = document.getElementById( " frm0 " );

     var oFromNew = document.createElement( " iframe " );
    oFromNew.id = " frm " + index;     // 新创建的iframe的唯一id
    oFromNew.src = requestUrl;
    oFromNew.style.position = " absolute " ;
    oFromNew.style.setAttribute( " left " , " 0px " );
    oFromNew.style.setAttribute( " top " , " 0px " );
    oFromNew.style.setAttribute( " width " , " 100% " );
    oFromNew.style.setAttribute( " height " , " 100% " );
    oFromNew.style.setAttribute( " z-index " ,index);
    oFromNew.setAttribute( " frameBorder " , " 0 " );
    oFromNew.setAttribute( " marginHeight " , " 0 " );
    oFromNew.className = " tabFrm " ;

     return oFromNew;
}

创建和选择已存在的页签选项都已经完成，这一切都是通过菜单驱动完成的。用户自己选择已存在的其中一页签选项怎么实现的呢？这个功能很简单实现，RadTabstrip控件有这样的一个客户端API，只要实现这样一个方法就可以完成功能。

/*
*程序功能：页签的选择事件
*开发日期：2008-11-08 11:30
*参数说明：无参数
*修改时间：2008-11-08 17:20
*/
function OnTabSelected()
{
     // debugger;
     var tabStrip = <%= RadTabStripMain.ClientID %> ;
     // 当前所选择的页签
     var selectTab = tabStrip.SelectedTab;

     // 如:Default.aspx
     var requestUrl = selectTab.Value;

     var oForms = divMain.childNodes;
     var count = oForms.length;

     // 将第二个选项的关闭X图片处理掉
     for ( var i = 0 ; i < count; i ++ )
    {
        //

.
    }

     for ( var i = 0 ; i < count; i ++ )
    {
         // 当前选择的Tab相对应的iframe的id
         var formID = oForms[i].id;

         var index = GetIndex(formID);

         if (document.getElementById(formID) != undefined)
        {
             if (document.getElementById(formID).getAttribute( ' src ' ) != requestUrl)
            {
                document.getElementById(formID).style.display = ' none ' ;
            }
             else
            {
                document.getElementById(formID).style.display = '' ;
            }
        }
    }

    SetIndex(tabStrip, index);
    SetImage(tabStrip, selectTab);
}

当我么双击页签选项的时候可实现关闭页签，这一功能也可以通过控件提供的客户端API来实现，实现API功能的方法就OK。

/*
*程序功能：鼠标双击关闭当前页签
*          首页是不允许关闭的
*开发日期：2008-11-08 16:30
*参数说明：无参数
*/
function OnDoubleClick()
{
     if ( ! IsDoubleClickClose())
    {
        RemoveTab();
    }
}

/*
*程序功能：鼠标双击是否允许关闭当前页签(默认为不可关闭)
*          首页是不允许关闭的
*开发日期：2008-11-08 16:35
*参数说明：无参数
*/
function IsDoubleClickClose()
{
     var flag = false ;
     var selectedTab = <%= RadTabStripMain.ClientID %> .SelectedTab;
     var value = selectedTab.Value;

     if (value == ' Default.aspx ' )
    {
        flag = true ;
    }
     return flag;
}

其他的就是设置一些效果的功能开发了，这全是一些脚本的开发，主要就是利用RadMenu和RadTabstrip控件的客户端API来实现各种功能，详细也没有什么好介绍的，本文几乎全是代码短，不过我相信对大家有所帮助。

文中只是贴出了比较关键的代码以作参考，如果有什么不明白之处，请大家下载源代码了解。

本文示例代码下载

本文转自 beniao 51CTO博客，原文链接：http://blog.51cto.com/beniao/253694，如需转载请自行联系原作者