RDIFramework.NET V2.7 Web版本升手風(fēng)琴+樹型目錄(2級(jí)+)方法
RDIFramework.NET V2.7 Web版本升手風(fēng)琴+樹型目錄(2級(jí)+)方法
手風(fēng)琴風(fēng)格在Web應(yīng)用非常的普遍,越來(lái)越多的Web應(yīng)用都是采用這種方式來(lái)體現(xiàn)各個(gè)功能模塊,傳統(tǒng)的手風(fēng)琴風(fēng)格只支持兩級(jí)模塊,當(dāng)我們的功能模塊多于兩級(jí)時(shí),我們一般采用樹來(lái)構(gòu)造功能菜單(我們的框架也提供了這種方式),但這種方式?jīng)]有手風(fēng)琴效果美觀,因此我們采用了手風(fēng)琴+樹的形式來(lái)構(gòu)造“手風(fēng)琴+樹型目錄(2級(jí)+)”界面風(fēng)格,以展示多級(jí)功能菜單,滿足用戶的要求。Web展示效果如下:

要以“手風(fēng)琴+樹型目錄(2級(jí)+)”的風(fēng)格來(lái)展示功能模塊,我們需要在“系統(tǒng)配置”的“個(gè)性化”設(shè)置中進(jìn)行個(gè)性化設(shè)置,這兒的設(shè)置可針對(duì)不同人的愛好進(jìn)行各自的設(shè)置。如下圖所示:

具體實(shí)現(xiàn)方式為以下幾個(gè)步驟:
一、設(shè)置SysConfig.js,增加一個(gè)展示方式,如下圖所示:

二、在newlayout.js中增加一個(gè)展現(xiàn)形式的判斷,單獨(dú)判斷我們新增的“AccordionTree”展示樣式,如下圖所示:

其中的AccordionTree.init();代碼如下:
//手風(fēng)琴 + tree var AccordionTree = { init: function () { $.each(_menus, function (i, n) { var cssIcon = 'icon icon-application_osx'; //沒有設(shè)置圖標(biāo),則取一個(gè)默認(rèn)圖標(biāo) 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> /// 根據(jù)DataTable生成AccordionTree Json樹結(jié)構(gòu) /// </summary> /// <param name="tabel">數(shù)據(jù)源</param> /// <param name="idCol">ID列</param> /// <param name="txtCol">Text列</param> /// <param name="rela">關(guān)系字段</param> /// <param name="pId">父ID</param> /// <returns>返回json數(shù)據(jù)</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; }
至此,我們“手風(fēng)琴+樹型目錄(2級(jí)+)”界面風(fēng)格整理開發(fā)完成。
附注:在Default.aspx.cs代碼中,我們最初的代碼已經(jīng)有一個(gè)名為“GetAccordionTreeJsonByTable”的方法,請(qǐng)將其改名為“GetAccordionJsonByTable”,相應(yīng)的調(diào)用它的地方也要同步修改下即可。
作者:
RDIF
出處:
http://www.rzrgm.cn/huyong/
Email:
406590790@qq.com
QQ:
406590790
微信:
13005007127(同手機(jī)號(hào))
框架官網(wǎng):
http://www.guosisoft.com/
http://www.rdiframework.net/
框架其他博客:
http://blog.csdn.net/chinahuyong
http://www.rzrgm.cn/huyong
國(guó)思RDIF開發(fā)框架
,
給用戶和開發(fā)者最佳的.Net框架平臺(tái)方案,為企業(yè)快速構(gòu)建跨平臺(tái)、企業(yè)級(jí)的應(yīng)用提供強(qiáng)大支持。
關(guān)于作者:系統(tǒng)架構(gòu)師、信息系統(tǒng)項(xiàng)目管理師、DBA。專注于微軟平臺(tái)項(xiàng)目架構(gòu)、管理和企業(yè)解決方案,多年項(xiàng)目開發(fā)與管理經(jīng)驗(yàn),曾多次組織并開發(fā)多個(gè)大型項(xiàng)目,在面向?qū)ο蟆⒚嫦蚍?wù)以及數(shù)據(jù)庫(kù)領(lǐng)域有一定的造詣。現(xiàn)主要從事基于
RDIF
框架的技術(shù)開發(fā)、咨詢工作,主要服務(wù)于金融、醫(yī)療衛(wèi)生、鐵路、電信、物流、物聯(lián)網(wǎng)、制造、零售等行業(yè)。
如有問題或建議,請(qǐng)多多賜教!
本文版權(quán)歸作者和CNBLOGS博客共有,歡迎轉(zhuǎn)載,但未經(jīng)作者同意必須保留此段聲明,且在文章頁(yè)面明顯位置給出原文連接,如有問題,可以通過微信、郵箱、QQ等聯(lián)系我,非常感謝。

浙公網(wǎng)安備 33010602011771號(hào)