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('<div style="padding:0px;" title="' + n.text
                             + '" data-options="border:false,iconCls:\''
                             + cssIcon
                             
 
+ '\'"><ul id="nt'
                             + i
                             + '"></ul></div>');
        });
        $("#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程式碼如下： 　　

　　　   /// <summary>
        /// 根據DataTable生成AccordionTree Json樹結構
        /// </summary>
        /// <param name="tabel">資料來源</param>
        /// <param name="idCol">ID列</param>
        /// <param name="txtCol">Text列</param>
        /// <param name="rela">關係欄位</param>
        /// <param name="pId">父ID</param>
        /// <returns>返回json資料</returns>
        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”，相應的呼叫它的地方也要同步修改下即可。