不说废话,大牛初始亦菜鸟,成功之路贵执行,马上行动!如果想获得更优质的显示效果,请在Chrome、Firefox等现代浏览器浏览本站。

RDIFramework.NET V2.7 Web版本升手风琴+树型目录(2级+)方法

:: RDIFramework.NET EricHu 1099℃ 0评论

RDIFramework.NET V2.7 Web版本升手风琴+树型目录(2级+)方法

 

  手风琴风格在Web应用非常的普遍,越来越多的Web应用都是采用这种方式来体现各个功能模块,传统的手风琴风格只支持两级模块,当我们的功能模块多于两级时,我们一般采用树来构造功能菜单(我们的框架也提供了这种方式),但这种方式没有手风琴效果美观,因此我们采用了手风琴+树的形式来构造“手风琴+树型目录(2+)”界面风格,以展示多级功能菜单,满足用户的要求。Web展示效果如下:

  

  要以“手风琴+树型目录(2+)”的风格来展示功能模块,我们需要在“系统配置”的“个性化”设置中进行个性化设置,这儿的设置可针对不同人的爱好进行各自的设置。如下图所示:

  

  具体实现方式为以下几个步骤:

 一、设置SysConfig.js,增加一个展示方式,如下图所示:

  

 二、在newlayout.js中增加一个展现形式的判断,单独判断我们新增的“AccordionTree”展示样式,如下图所示:

  

  其中的AccordionTree.init();代码如下:   

//手风琴 + tree
var AccordionTree = {
    init: function () {
        $.each(_menus, function (i, n) {
            var cssIcon = 'icon icon-application_osx'; //没有设置图标,则取一个默认图标
            if (n.iconCls) {
                cssIcon = n.iconCls;
            }
            $('#wnav').append('
n.text + '" data-options="border:false,iconCls:\'' + cssIcon + '\'">
    i + '">
'); }); $("#wnav").accordion({ fit: true, border: false, onSelect: function (t, i) { $('#nt' + i).tree({ lines: false, animate: true, data: _menus[i].children, onClick: function (node) { if (node.attributes.url != "" && node.attributes.url != '#') { addTab(node.text, node.attributes.url + '?navid=' + node.id, node.iconCls); } else { $('#nt' + index).tree('toggle', node.target); } } }); } }); } };

 三、修改Default.aspx.cs代码,如下图所示:

  

  其中的:GetAccordionTreeJsonByTable代码如下:   

      /// 
        /// 根据DataTable生成AccordionTree Json树结构
        /// 
        /// 数据源
        /// ID列
        /// Text列
        /// 关系字段
        /// 父ID
        /// 返回json数据
        private string GetAccordionTreeJsonByTable(DataTable tabel, string idCol, string txtCol, string rela, object pId)
        {
            result += tmpStr;
            tmpStr = string.Empty;

            if (tabel.Rows.Count <= 0) return result;
            tmpStr += "[";
            var filer = string.Format("{0}='{1}'", rela, pId);
            var rows = tabel.Select(filer);
            if (rows.Length > 0)
            {
                foreach (var row in from row in rows
                                    let moduleType = BusinessLogic.ConvertToInt(row[PiModuleTable.FieldModuleType])
                                    where moduleType == null || moduleType == 2 || moduleType == 3
                                    select row)
                {
                    tmpStr += "{\"id\":\"" + row[idCol] + "\",\"text\":\"" + row[txtCol]
                              + "\",\"iconCls\":\"" + BusinessLogic.ConvertToString(row[PiModuleTable.FieldIconCss]).Replace("icon ", "")
                              + "\",\"attributes\":{"
                              + "\"url\":\"" + row[PiModuleTable.FieldNavigateUrl]
                              + "\",\"FullName\":\"" + row[PiModuleTable.FieldFullName]
                              + "\"}";
                    if (tabel.Select(string.Format("{0}='{1}'", rela, row[idCol])).Length > 0)
                    {
                        tmpStr += RDIFramework.WebCommon.PublicMethod.GetInt(row[PiModuleTable.FieldExpand]) == 1
                            ? ",\"state\":\"open\""
                            : ",\"state\":\"closed\"";
                        tmpStr += ",\"children\":";
                        GetAccordionTreeJsonByTable(tabel, idCol, txtCol, rela, row[idCol]);
                        result += tmpStr;
                        tmpStr = string.Empty;
                    }
                    result += tmpStr;
                    tmpStr = string.Empty;
                    tmpStr += "},";
                }
                tmpStr = tmpStr.Remove(tmpStr.Length - 1, 1);
            } 
            tmpStr += "]";
            result += tmpStr;
            tmpStr = string.Empty;
            return result;
        }

 

  至此,我们“手风琴+树型目录(2+)”界面风格整理开发完成。

  附注:Default.aspx.cs代码中,我们最初的代码已经有一个名为“GetAccordionTreeJsonByTable”的方法,请将其改名为“GetAccordionJsonByTable”,相应的调用它的地方也要同步修改下即可。

转载请注明:RDIFramework.NET » RDIFramework.NET V2.7 Web版本升手风琴+树型目录(2级+)方法

喜欢 (0)or分享 (0)
发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址