最近有朋友想让我给他做个手机上页面，页面功能是显示省--市--区--门店信息，这种层级关系的数据，首先来看看效果；
我想现在的手机都是智能机了对于普通的asp.net页面开发应该没什么两样，不过最终开发下来还是有点区别：
1：首先是Safari浏览器对js的支持，和IE下面的区别。
2：页面数据的显示以及缩放等效果。
介于以上要求，我考虑使用Repeater多层嵌套来实现，下面是页面代码：
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Tree.aspx.cs" Inherits="Tree" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>无标题页</title> <style> <!-- .datalist{ width:100%; /*border:1px dashed #0058a3; 表格边框 */ border-width :0px 0px 0px 1px; border-style : dotted; border-color : #0058a3; font-family:Arial; border-collapse:collapse; /* 边框重叠 */ background-color:#c7e5ff; /* 表格背景色 eaf5ff 0058a3*/ font-size:14px; } .datalistChild{ width:100%; padding:0px; margin:0px; width:100%; /*border:1px dashed #0058a3; 表格边框 */ border-width :0px 0px 0px 1px; border-style : dotted; border-color : #0058a3; } .datalist th{ border:1px dashed #0058a3; /* 行名称边框 */ background-color:#4bacff; /* 行名称背景色 */ color:#FFFFFF; /* 行名称颜色 */ font-weight:bold; padding:0px; text-align:center; } .datalist td{ border-width :1px 1px 0px 0px; border-style : dotted ; border-color : #0058a3; /* 单元格边框 */ border-left-style:dashed; text-align:left ; padding:0px; line-height:26px; /* padding-top:0px; padding-bottom:0px; padding-left:0px; padding-right:0px; */ } .datalist tr.altrow{ background-color:#c7e5ff; /* 隔行变色 */ } --> </style> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" /> <script> //document.body.style.zoom = window.screen.width / 400;//此句只能放到body内，不然无法找到对象 function $(obj) { return document.getElementById(obj); } function showHid(id,self) { var obj=$(id); var disp=obj.style.display; var trs = document.getElementsByTagName("tr"); for(i=0;i<trs.length;i++) { if(trs[i].style.display==""&&trs[i].getAttribute("level")==obj.getAttribute("level")) trs[i].style.display="none"; } obj.style.display=disp; //alert(self.childNodes[0].innerHTML); if(obj.style.display=="none") { obj.style.display=""; self.childNodes[0].innerText="-"; } else { obj.style.display="none"; self.childNodes[0].innerText="+"; } } </script> </head> <body> <form id="form1" runat="server"> <div> <table class="datalist"> <tr> <th scope="col"> </th> <th scope="col"> 省份</th> </tr> <asp:Repeater ID="rp_sheng" runat="server" OnItemDataBound="rp_sheng_ItemDataBound"> <ItemTemplate> <tr onclick="showHid(‘sheng<%# DataBinder.Eval(Container.DataItem, "smc")%>‘,this)"> <td style="width: 12px; text-align: center;">+</td> <td><%# DataBinder.Eval(Container.DataItem, "smc")%></td> </tr> <tr id="sheng<%# DataBinder.Eval(Container.DataItem, "smc")%>" style="display: none;" level=1> <td> </td> <td> <table class="datalist" style="padding:0px; margin:0px; width:100%; border-width:0px 0px 0px 0px;"> <asp:Repeater ID=rp_shi runat=server OnItemDataBound="rp_shi_ItemDataBound"> <ItemTemplate> <tr class="altrow" style="border-left-width:0px;" onclick=showHid(‘shi<%# DataBinder.Eval(Container.DataItem, "csmc")%>‘,this)> <td style="width:12px;text-align:center;">+</td> <td><%# DataBinder.Eval(Container.DataItem, "csmc")%></td> </tr> <tr id="shi<%# DataBinder.Eval(Container.DataItem, "csmc")%>" style="display:none;" level=2> <td></td> <td style="padding-left:0px;"> <table class="datalist" style="padding:0px; margin:0px; width:100%; border-width:0px 0px 0px 0px;"> <asp:Repeater ID=rp_qu runat=server OnItemDataBound="rp_qu_ItemDataBound"> <ItemTemplate> <tr class="altrow" style="border-left-width:0px;" onclick=showHid(‘qu<%# Convert.ToString( DataBinder.Eval(Container.DataItem, "qmc")).Trim() %>‘,this)> <td style="width:12px;text-align:center;">+</td> <td><%# Convert.ToString(DataBinder.Eval(Container.DataItem, "qmc")).Trim() %></td> </tr> <tr id="qu<%# Convert.ToString(DataBinder.Eval(Container.DataItem, "qmc")).Trim() %>" style="display:none;" level=3> <td></td> <td style="padding-left:0px;"> <table class="datalist" style="padding:0px; margin:0px; width:100%; border-width:0px 0px 0px 0px;"> <asp:Repeater ID=rp_dian runat=server> <ItemTemplate> <tr class="altrow" style="border-left-width:0px;"> <td width=70px><%# DataBinder.Eval(Container.DataItem, "mdmc")%></td> <td style="border-right-width:0px;"> <%# DataBinder.Eval(Container.DataItem, "xxdz")%><br /> <%# DataBinder.Eval(Container.DataItem, "mdbh")%> </td> </tr> </ItemTemplate> </asp:Repeater> </table> </td> </tr> </ItemTemplate> </asp:Repeater> </table> </td> </tr> </ItemTemplate> </asp:Repeater> </table> </td> </tr> </ItemTemplate> </asp:Repeater> </table> </div> </form> </body> </html>
后台代码主要是查询数据库，并且多层绑定数据到Repeater对象上，下面是给出的后台代码：
using System; using System.Data; using System.Configuration; using System.Collections; using System.Web; using System.Web.Security; using System.Web.UI; using System.Web.UI.WebControls; using System.Web.UI.WebControls.WebParts; using System.Web.UI.HtmlControls; public partial class Tree : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { string sql = " SELECT distinct smc FROM dt1 "; if (!IsPostBack) { DataTable dt_sheng = getData(sql).Tables[0]; rp_sheng.DataSource = dt_sheng; rp_sheng.DataBind(); } } public DataSet getData( string sql) { string connection = "Provider=Microsoft.Jet.OLEDB.4.0;Server=MyMDB.mdb"; string dbConn = "Provider=Microsoft.Jet.OLEDB.4.0;Data Source=C:/Inetpub/wwwroot/WebSite/App_Data/fu.mdb"; System.Data.OleDb.OleDbConnection oleDbConnection = new System.Data.OleDb.OleDbConnection(dbConn); DataSet ds = new DataSet(); System.Data.OleDb.OleDbDataAdapter oleDataAdapter = new System.Data.OleDb.OleDbDataAdapter(sql, oleDbConnection); oleDbConnection.Open(); oleDataAdapter.Fill(ds); oleDataAdapter.Dispose(); oleDbConnection.Close(); return ds; } protected void rp_sheng_ItemDataBound(object sender, RepeaterItemEventArgs e) { if (e.Item.ItemType == ListItemType.Item || e.Item.ItemType == ListItemType.AlternatingItem) { Repeater rep = e.Item.FindControl("rp_shi") as Repeater;//找到里层的repeater对象 DataRowView rowv = (DataRowView)e.Item.DataItem;//找到分类Repeater关联的数据项 //int typeid = Convert.ToInt32(rowv["smc"]); //获取填充子类的id string sql = "SELECT distinct csmc FROM dt1 where smc=‘" + rowv["smc"] + "‘"; rep.DataSource = getData(sql).Tables[0]; rep.DataBind(); } } protected void rp_shi_ItemDataBound(object sender, RepeaterItemEventArgs e) { if (e.Item.ItemType == ListItemType.Item || e.Item.ItemType == ListItemType.AlternatingItem) { Repeater rep = e.Item.FindControl("rp_qu") as Repeater;//找到里层的repeater对象 DataRowView rowv = (DataRowView)e.Item.DataItem;//找到分类Repeater关联的数据项 string sql = "SELECT distinct qmc FROM dt1 where csmc=‘" + rowv["csmc"] + "‘"; rep.DataSource = getData(sql).Tables[0]; rep.DataBind(); } } protected void rp_qu_ItemDataBound(object sender, RepeaterItemEventArgs e) { if (e.Item.ItemType == ListItemType.Item || e.Item.ItemType == ListItemType.AlternatingItem) { Repeater rep = e.Item.FindControl("rp_dian") as Repeater;//找到里层的repeater对象 DataRowView rowv = (DataRowView)e.Item.DataItem;//找到分类Repeater关联的数据项 string sql = "SELECT mdmc,mdbh,xxdz FROM dt1 where qmc=‘" + rowv["qmc"] + "‘"; rep.DataSource = getData(sql).Tables[0]; rep.DataBind(); } } }