最近，公司有個新項目－用WEB做一個財報閱讀器供客戶使用。項目經理用Gmail給組員下發需求文檔，我一看，功能需求很詳細，但UI設計卻只有支言片語。
於是我回復詢問下UI需求，得到的回復是：UI設計要看起來大方，美觀，不能和一般的閱讀器那樣古板枯燥，在不改變客戶的閱讀習慣下，提高整體的用戶體驗等之類的話。
這讓我想起了之前看到的一個QQ表情：
這樣的UI需求，想必大家應該遇到過吧。
話題扯遠了，言歸正題。閱讀器主要的設計是，文章目錄和內容之間的交互。目錄是比較有層次感的，所以想到了用遞歸來動態生成目錄。
目錄可以用一個XML文件來保存：
<?xml version="1.0" encoding="utf-8" ?><rool value="審計報告及合並財務報表"> <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></root>然後在後台用遞歸讀取XML結點，生成HTML顯示到頁面即可，實現如下：
show sourceview sourceprint?01 protected void Page_Load(object sender, EventArgs e)
02 {
03 //XDocument doc = XDocument.Load(Server.MapPath("html5Reader/ReaderData.xml"));
04 StringBuilder sb = new StringBuilder();
05 XmlDocument dc = new XmlDocument();
06 string path = Server.MapPath("~/html5Reader/ReaderData.xml");
07 dc.Load(path);
08 XmlNodeList xnl = dc.SelectNodes("section/chapter");
09 sb.Append("<ul>");
10 readxml(xnl, sb);
11 sb.Append("</ul>");
12 this.html.InnerHtml = sb.ToString();
13 }
14
15 private void readxml(XmlNodeList xmlnl,StringBuilder sb_)
16 {
17 foreach (XmlNode xl in xmlnl)
18 {
19 if (xl.ChildNodes.Count == 0)
20 {
21 sb_.Append("<li><a>" + xl.Attributes["value"].Value + "</a></li>");
22 }
23 else
24 {
25 sb_.Append("<li><a>" + xl.Attributes["value"].Value + "</a><ul>");
26 readxml(xl.ChildNodes, sb_);
27 sb_.Append("</ul></li>");
28 }
29 }
30 }
前台很頁面：
view sourceprint?<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：不怎麼寫博客，發現寫博客真不容易，花了差不多一個鐘，寫得不好大家見諒，本文對大家有用的就推薦下！
作者 §與狼共舞
