C#递归算法-遍历XML文件,以UL列表显示树形结构目录
最近,公司有个新项目-用WEB做一个财报阅读器供客户使用。项目经理用Gmail给组员下发需求文档,我一看,功能需求很详细,但UI设计却只有支言片语。
于是我回复询问下UI需求,得到的回复是:UI设计要看起来大方,美观,不能和一般的阅读器那样古板枯燥,在不改变客户的阅读习惯下,提高整体的用户体验等之类的话。
这让我想起了之前看到的一个QQ表情:
这样的UI需求,想必大家应该遇到过吧。
话题扯远了,言归正题。阅读器主要的设计是,文章目录和内容之间的交互。目录是比较有层次感的,所以想到了用递归来动态生成目录。
目录可以用一个XML文件来保存:
<?xml version="1.0" encoding="utf-8" ?>
<sectionvalue="审计报告及合并财务报表">
<chapter value="审计报告及合并财务报表B0001A"></chapter>
<chapter value="审计报告B0101A"></chapter>
<chapter value="财务报表B0102A">
<node value="(一)合并资产负债表B0201C"></node>
<node value="(二)资产负债表B0202C"></node>
<node value="(四)利润表B0204C"></node>
<node value="(五)合并现金流量B0205C"></node>
<node value="(六)现金流量表B0206C"></node>
<node value="(七)合并所有者权益变动表B0207C"></node>
<node value="(八)所有者权益变动表B0208C"></node>
</chapter>
<chapter value="财务报表附注B0103A">
<node value="一、公司基本情况B0201C"></node>
<node value="二、公司主要会计政策、会计估计和前期差错更正B0202A">
<knobble value="(一)财务报表的编制基础B0301C"></knobble>
<knobble value="(二)遵循企业会计准则的声明B0302C"></knobble>
<knobble value="(三)财务报告的批准报出B0303C"></knobble>
<knobble value="(四)会计期间B0304C"></knobble>
<knobble value="(五)记账本位币 B0305C"></knobble>
<knobble value="(六)同一控制下和非同一控制下企业合并的会计处理方法B0306A"></knobble>
<knobble value="(七)合并财务报表的编制方法B0307A"></knobble>
<knobble value="(八)现金及现金等价物的确定标准B0308C"></knobble>
<knobble value="(九)外币业务和外币报表折算B0309A"></knobble>
</node>
</chapter>
</section>
然后在后台用递归读取XML结点,生成HTML显示到页面即可,实现如下:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 | protected void Page_Load( object sender, EventArgs e) { //XDocument doc = XDocument.Load(Server.MapPath("html5Reader/ReaderData.xml")); StringBuilder sb = new StringBuilder(); XmlDocument dc = new XmlDocument(); string path = Server.MapPath( "~/html5Reader/ReaderData.xml" ); dc.Load(path); XmlNodeList xnl = dc.SelectNodes( "section/chapter" ); sb.Append( "<ul>" ); readxml(xnl, sb); sb.Append( "</ul>" ); this .html.InnerHtml = sb.ToString(); } private void readxml(XmlNodeList xmlnl,StringBuilder sb_) { foreach (XmlNode xl in xmlnl) { if (xl.ChildNodes.Count == 0) { sb_.Append( "<li><a>" + xl.Attributes[ "value" ].Value + "</a></li>" ); } else { sb_.Append( "<li><a>" + xl.Attributes[ "value" ].Value + "</a><ul>" ); readxml(xl.ChildNodes, sb_); sb_.Append( "</ul></li>" ); } } } |
前台很页面:
< html xmlns="http://www.w3.org/1999/xhtml"> < head runat="server"> < title ></ title > </ head > < body > < form id="form1" runat="server"> < div id="html" runat="server"> </ div > </ form > </ body > </ html > |
运行后
然后再写下样式表,即可生成美观的目录!
PS:不怎么写博客,发现写博客真不容易,花了差不多一个钟,写得不好大家见谅,本文对大家有用的就推荐下!
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· SQL Server 2025 AI相关能力初探
· Linux系列:如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列(二):开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 阿里最新开源QwQ-32B,效果媲美deepseek-r1满血版,部署成本又又又降低了!
· SQL Server 2025 AI相关能力初探
· AI编程工具终极对决:字节Trae VS Cursor,谁才是开发者新宠?
· 开源Multi-agent AI智能体框架aevatar.ai,欢迎大家贡献代码
· Manus重磅发布:全球首款通用AI代理技术深度解析与实战指南