手机web开发Repeater四层嵌套

最近有朋友想让我给他做个手机上页面，页面功能是显示省--市--区--门店信息，这种层级关系的数据，首先来看看效果；

我想现在的手机都是智能机了对于普通的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();
        }
    }

}

posted on 2014-08-19 16:54 jack_Meng 阅读(561) 评论(0) 编辑收藏举报

刷新页面返回顶部

Jack_孟

手机web开发Repeater四层嵌套

导航

公告