手机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[]; 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[];
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[];
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[];
rep.DataBind();
}
} }
手机web开发Repeater四层嵌套的更多相关文章
- 手机web开发
jqmobi 可以代理 jquery mobile,似乎更加小和快 http://app-framework-software.intel.com/components.php bootstrap ...
- 手机Web 开发中图片img 如何等比例缩放
如果图片本身没有设置 width.height属性的话,只需要修改 max-width:100%; 就可以了 如果图片本身设置了 width.height属性的话,需要同时修改width 和heigh ...
- HTML5+JS手机web开发之jQuery Mobile初涉
一.起始之语 我一直都是在PC上折腾网页的,这会儿怎么风向周边捣鼓起手机网页开发呢?原因是公司原先使用Java开发的产品,耗了不少人力财力,但是最后的效果却不怎么好.因为,Android系统一套东西, ...
- 微信开发之移动手机WEB页面(HTML5)Javascript实现一键拨号及短信发送功能
在做一个微信的微网站中的一个便民服务电话功能的应用,用到移动web页面中列出的电话号码,点击需要实现调用通讯录,网页一键拨号的拨打电话功能. 如果需要在移动浏览器中实现拨打电话,发送email,美国服 ...
- html5文章 -- HTML5开发实例-网易微博手机Web App开发过程
HTML5在国内外越来越受到互联网开发团队的青睐.国外,谷歌兴致勃勃地开发Chrome Web Store,微软发布了支持使用HTML5技术开发的“Irish Spring”主题网站,诺基亚斥巨资购得 ...
- 安卓手机移动端Web开发调试之Chrome远程调试(Remote Debugging)
一.让安卓打debug模式的apk包 二.将电脑中的chrome升级到最新版本,在chrome浏览器地址栏中输入chrome://inspect/#devices: 在智能手机还未普及时,移动设备的调 ...
- [HTML] 微信开发之移动手机WEB页面(HTML5)Javascript实现一键拨号及短信发送功能
在做一个微信的微网站中的一个便民服务电话功能的应用,用到移动web页面中列出的电话号码,点击需要实现调用通讯录,网页一键拨号的拨打电话功能. 如果需要在移动浏览器中实现拨打电话,发送email,美国服 ...
- 手机web app开发笔记
各位朋友好,最近自学开发了一个手机Web APP,“编程之路”,主要功能包括文章的展示,留言,注册登录,音乐播放等.为了记录学习心得,提高自己的编程水平,也许对其他朋友有点启发,特整理开发笔记如下. ...
- 【转】利用 Bootstrap 进行快速 Web 开发
原文转自:http://blog.jobbole.com/53961/ 了解如何使用 Bootstrap 快速开发网站和 Web 应用程序(包括移动友好型应用程序).Bootstrap 以 LESS ...
随机推荐
- 关于iOS APP中网络层的设计
在iOS开发中,请求网络数据,处理获得的数据是很常见的功能,但是很少有资料会讨论关于网络的处理应该放在MVC中得哪个层中. 我在网上Google了一番,记下了几个觉得比较不错的链接.现记录如下: ht ...
- ADB Offline
终极可能原因:版本太旧 http://stackoverflow.com/questions/14993855/android-adb-device-offline-cant-issue-comman ...
- $("#province").val();取不到select的值求解
MVC下的razor视图开发中无法取到select的值问题求解 cshtml 如下 <select name="province" id="province&quo ...
- Android 中像素px和dp的转化
在Android的布局文件中,往往使用dp作为控件的宽度和高度尺寸,但是在Java代码中,调用getWidth()方法获得的尺寸单位却是像素px,这两个单位有明显的区别:dp和屏幕的密度有关,而px与 ...
- Tesseract-OCR识别验证码
1. 安装Tesseract-OCR,安装后测试下是否安装成功
- python开源包提交到pypi社区
为啥要提交到pypi?因为提交成功后,你今后想用你自己写的模块,只要pip install一下就可以了. 那么如何提交?请参看本篇教程 首先要确定你的包叫啥名,比如我的包叫xlutils3,既然确定了 ...
- 【树莓派2B倒腾日志】之安装系统及配置
15号树莓派到手到现在,折腾了也有一小周,自己摸索着,装了系统,登上SSH,更新了源,连了VNC,换上wifi,亮了小灯.再到今天捣鼓了下数码管,回头想想,该写个日志记录一下这一周的所得,自己总结也方 ...
- Windows字符集的统一与转换
以前也零零散散看过一些字符编码的问题,今天看来这边博客,感觉很多东西都总结在里面,非常值得学习! 一.字符集的历史渊源 在Windows编程时经常会遇到编码转换的问题,一直以来让刚接触的人摸不着头脑. ...
- 【Python学习笔记】with语句与上下文管理器
with语句 上下文管理器 contextlib模块 参考引用 with语句 with语句时在Python2.6中出现的新语句.在Python2.6以前,要正确的处理涉及到异常的资源管理时,需要使用t ...
- MyEclipse2015对Javascript自动提示的终极支持
2015通过集成Tern.js,进入了JS自动提示的最新时代 先看看具体效果吧: 点击链接会进入: 而tern.js已经支持相当多的框架: 关键这个提示不只是纯粹的js文件,对于jsp等等 ...