准备做一个签名墙,效果如下:http://comment.news.sohu.com/comment/wall.jsp?page=1
与它的一样,是从数据库里读出数据,行有错位[奇数行显示5个单元格,偶数行显示6个单元格(最左边与最右边单元格各半个单元格宽),以达到移位效果]与它不同的是,我的不分页面,所以表格要动态生成.现在的问题是:
1 由于数据会不断增加,则表格不能静态编辑好,必须动态生成,用HtmlTable还是Table好;
2 怎样达到上述的错位效果;
3 单元格背景图片(也可以直接插图片,上面再放数据)怎么动态加入,注意:偶数行的最左边与最右边单元格背景是由普通单元平分得到的.
4 单元格中的文字准备用SqlDataReader读出,然后写入到单元格中,如果是这种动态表格,可不可以用tablecell.innertext=dr["列名"]
5 如果加入了,怎么将后加入的数据放到最上面,而且是有数据的时候才显示背景图片,以及从右边往左边添砖.
6 如果页面很高很高,怎么用查询定位到该签名的地方. 原来用datalist,但是不能达到效果.
还请各大虾指点,分数不多,还望见谅
与它的一样,是从数据库里读出数据,行有错位[奇数行显示5个单元格,偶数行显示6个单元格(最左边与最右边单元格各半个单元格宽),以达到移位效果]与它不同的是,我的不分页面,所以表格要动态生成.现在的问题是:
1 由于数据会不断增加,则表格不能静态编辑好,必须动态生成,用HtmlTable还是Table好;
2 怎样达到上述的错位效果;
3 单元格背景图片(也可以直接插图片,上面再放数据)怎么动态加入,注意:偶数行的最左边与最右边单元格背景是由普通单元平分得到的.
4 单元格中的文字准备用SqlDataReader读出,然后写入到单元格中,如果是这种动态表格,可不可以用tablecell.innertext=dr["列名"]
5 如果加入了,怎么将后加入的数据放到最上面,而且是有数据的时候才显示背景图片,以及从右边往左边添砖.
6 如果页面很高很高,怎么用查询定位到该签名的地方. 原来用datalist,但是不能达到效果.
还请各大虾指点,分数不多,还望见谅
算出一共要多少行最开始有一个一行一列的表格做容器
例如:
<table>
<tr>
<td id="ground" runat="sever"></td>
</tr>
</table>然后根据所算出的数据
定表格大小
利用ground.InnerHtml="<table>.....</table>":
将表格嵌入你第2问所说的,应该就是用表格来实现吧,在偶数行加一个半长的单元格。
此外,在嵌入表格时你还可以一起把背景色之类的东西统统写进去了
总之你要的东西全应在这张你根据库中信息所计算得到的表中
先给出代码,再分点说明:
private void Page_Load(object sender, System.EventArgs e)
{
SqlConnection myconn=new SqlConnection("server=localhost;database=zijing;uid=sa;pwd=sa");
myconn.Open();
SqlCommand cm=new SqlCommand("Select count(*) from Sign",myconn);
int signCount=(int)cm.ExecuteScalar();
int rowsCount=(signCount-1)/9+1;
cm.CommandText="Select signContent from Sign order by ID desc";
SqlDataReader dr=cm.ExecuteReader();
HtmlTable tb=new HtmlTable();
for(int i=1;i<=signCount;i++)
{
while(dr.Read())
{
HtmlTableCell td=new HtmlTableCell();//1 用htmltable
td.InnerText=dr["signContent"].ToString();//4 单元格读取数据
td.Attributes.Add("background","zhuan.gif");//3 单元格背景图片加入-判断i加入不同背景图即可
HtmlTableRow tr=new HtmlTableRow();
tr.Cells.Add(td);
tb.Rows.Add(tr);
}
}
Page.Controls[1].Controls.Add(tb);
}只需判断i,即可选择何时换行,何时加入半块砖背景,何时加入正快转背景,何时加入数据,稍微做修改既可以.
using System.Collections;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Web;
using System.Web.SessionState;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.HtmlControls;
using System.Data.SqlClient;namespace dtable
{
/// <summary>
/// WebForm1 的摘要说明。
/// </summary>
public class WebForm1 : System.Web.UI.Page
{
private void Page_Load(object sender, System.EventArgs e)
{
//取出数据
SqlConnection myconn=new SqlConnection("server=localhost;database=zijing;uid=sa;pwd=sa");
myconn.Open();
SqlCommand cm=new SqlCommand("Select count(*) from Sign",myconn);
int signCount=(int)cm.ExecuteScalar();//记录签名记录数
int m=(signCount)%9;//用以判断加入什么行什么单元格
byte k=1;//k=1表示共有奇数行,k=2表示共有偶数行,用以判断第一行的格式
int i=0;//用以记录当前已取出多少记录,signCount-i就是还剩下多少记录
int rowsCount=(signCount-1)/9;//重复单元格对的的数目
Response.Write("共有"+signCount.ToString()+" 条记录数");
cm.CommandText="Select signContent from Sign order by ID desc";
SqlDataReader dr=cm.ExecuteReader(); //定义表格基本元素-表格,行,单元格
HtmlTable tb=new HtmlTable();
tb.Width="930";
tb.Border=0;
tb.CellPadding=0;
tb.CellSpacing=0;
tb.Align="Center";
tb.Attributes.Add("frame","void");
tb.Attributes.Add("cols","10");
HtmlTableRow tr1=new HtmlTableRow();
tr1.Height="60";
tr1.Align="Center";
tr1.VAlign="Middle";
//处理第一行
if(signCount==0)
{
}
else
{
//共有奇数行的处理--此时第一行为5个数据格
if(m>0&&m<6)
{
k=1;
for(int j=0;j<5-m;j++)
{
HtmlTableCell td2=new HtmlTableCell();
td2.ColSpan=2;
td2.Width="186";
tr1.Cells.Add(td2);
}
while(i<m)
{
if(dr.Read())
{
HtmlTableCell td3=new HtmlTableCell();
td3.ColSpan=2;
td3.Width="186";
td3.Attributes.Add("background","zhuan.jpg");
td3.InnerText=dr[0].ToString();
tr1.Cells.Add(td3);
}
i++;
}
}
//共有偶数行--此时第一行为4个数据格,加左右各一个空白半格
else
{
k=2;
HtmlTableCell td1=new HtmlTableCell();
td1.Width="93";
tr1.Cells.Add(td1);
if(m==0)
{
while(i<4)
{
if(dr.Read())
{
HtmlTableCell td3=new HtmlTableCell(); ;
td3.ColSpan=2;
td3.Width="186";
td3.Attributes.Add("background","zhuan.jpg");
td3.InnerText=dr[0].ToString();
tr1.Cells.Add(td3);
}
i++;
}
}
else
{
for(int j=0;j<9-m;j++)
{
HtmlTableCell td2=new HtmlTableCell();
td2.ColSpan=2;
td2.Width="186";
tr1.Cells.Add(td2);
}
while(i<m-5)
{
if(dr.Read())
{
HtmlTableCell td3=new HtmlTableCell();
td3.ColSpan=2;
td3.Width="186";
td3.Attributes.Add("background","zhuan.jpg");
td3.InnerText=dr[0].ToString();
tr1.Cells.Add(td3);
}
i++;
}
}
HtmlTableCell td4=new HtmlTableCell();
td4.Width="93";
td4.Attributes.Add("background","right_zhuan.jpg");
tr1.Cells.Add(td4);
}
tb.Rows.Add(tr1); //第二行处理-共有偶数行时在下面先增加一行5格数据的行,以便剩下来的都是完整的两行的重复
if(k==2)
{
HtmlTableRow tr2=new HtmlTableRow();
tr2.Height="60";
tr2.Align="Center";
tr2.VAlign="Middle";
for(int u=0;u<5;u++)
{
if(dr.Read())
{
HtmlTableCell td5=new HtmlTableCell();
td5.ColSpan=2;
td5.Width="186";
td5.Attributes.Add("background","zhuan.jpg");
td5.InnerText=dr[0].ToString();
tr2.Cells.Add(td5);
}
i++;
}
tb.Rows.Add(tr2);
} //剩下行的处理
for(int j=0;j<rowsCount;j++)
{
//增加一行--4格数据格2格空白半格的
HtmlTableRow tr3=new HtmlTableRow();
tr3.Height="60";
tr3.Align="Center";
tr3.VAlign="Middle";
HtmlTableCell td6=new HtmlTableCell();
td6.Width="93";
td6.Attributes.Add("background","left_zhuan.jpg");
tr3.Cells.Add(td6);
for(int u=0;u<4;u++)
{
if(dr.Read())
{
HtmlTableCell td7=new HtmlTableCell();
td7.ColSpan=2;
td7.Width="186";
td7.Attributes.Add("background","zhuan.jpg");
td7.InnerText=dr[0].ToString();
tr3.Cells.Add(td7);
}
i++;
}
HtmlTableCell td8=new HtmlTableCell();
td8.Width="93";
td8.Attributes.Add("background","right_zhuan.jpg");
tr3.Cells.Add(td8);
tb.Rows.Add(tr3); //增加一行--5格数据格
HtmlTableRow tr4=new HtmlTableRow();
tr4.Height="60";
tr4.Align="Center";
tr4.VAlign="Middle";
for(int v=0;v<5;v++)
{
if(dr.Read())
{
HtmlTableCell td9=new HtmlTableCell();
td9.ColSpan=2;
td9.Width="186";
td9.Attributes.Add("background","zhuan.jpg");
td9.InnerText=dr[0].ToString();
tr4.Cells.Add(td9);
}
i++;
}
tb.Rows.Add(tr4);
}
}
Page.Controls[1].Controls.Add(tb);
dr.Close();
} #region Web 窗体设计器生成的代码
override protected void OnInit(EventArgs e)
{
//
// CODEGEN: 该调用是 ASP.NET Web 窗体设计器所必需的。
//
InitializeComponent();
base.OnInit(e);
}
/// <summary>
/// 设计器支持所需的方法 - 不要使用代码编辑器修改
/// 此方法的内容。
/// </summary>
private void InitializeComponent()
{
this.Load += new System.EventHandler(this.Page_Load);
}
#endregion
}
}