[测试：动态生成表格]
2015-06-08 16:16
627 查看
C#动态生成数据篇
第一篇：测试动态生成数据（测试篇）：TODO：
关于测试篇：主要讲解理清业务思路，下一篇：动态生成数据（依据业务需求）：
TODO：
1，输入生成数据
2，两种方式生成动态数据（1，服务器端应用程序生成数据2，javascript生成数据）
讲解篇
服务端aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="DynamicCreationForm.aspx.cs" Inherits="BF.Web.pages.BackSystem.FHR.DynamicCreationForm" %> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>测试：动态生成表格</title> <script src="../../../script/jquery-1.4.2.min.js" type="text/javascript"></script> </head> <body> <form id="form1" runat="server"> <div runat="server"> <div style="text-align: center; padding-top: 20px"> <asp:TextBox ID="txtDynamicCount" runat="server"></asp:TextBox> <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ForeColor="Red" ErrorMessage="*必填" ControlToValidate="txtDynamicCount"></asp:RequiredFieldValidator> <asp:Button ID="btnDynamicCreation" runat="server" Text="[测试：动态生成表格]" OnClick="btnDynamicCreation_Click" /> <input type="button" id="btnTempDynamicCreation" value="[测试：动态生成表格]" onclick="DynamicCreation(); return false;" /> </div> <asp:Literal ID="ltrdynamicCreation" runat="server"></asp:Literal> <div id="dynamicCreation"> </div> </div> </form> </body> </html>
服务端后台
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
namespace BF.Web.pages.BackSystem.FHR
{
public partial class DynamicCreationForm : BasePage
{
private Int32 DynamicCount { get; set; }
protected void Page_Load(object sender, EventArgs e)
{
}
/*[新增]动态生成表格：接收一参数，实现查询数据库<获取数量> 按照现有风格排序 2015/03/10 [方]*/
/*
Tips:
1、在后台写C#程序,取得当前要操作的键值,然后根据键值查询数量[填充数据项]
2、JS打印，AJAX读取数据库数据[填充数据项]
* */
#region [测试：动态生成表格]
public void DynamicCreation()
{
/*[测试：数据项来自于自定义] 后期根据传入条件查询指定数据项*/
StringBuilder sb = new StringBuilder();
/*[新增]标题项：[测试：动态生成表格] 2015/03/10 [方]*/
sb.Append("<h1 align=\"center\" >[测试：动态生成表格]</h1>");
sb.Append("<table id=\"tbList\" width=\"100%\" border=\"1\" align=\"center\" cellpadding=\"0\" cellspacing=\"0\">");
if (DynamicCount > 0)
{
int numberOfRows = DynamicCount / 20;//行数
int remainderRows = DynamicCount % 20;//行数余数
/*20 40 60，... 行数处理：行数减一，以便打印重复行*/
if (remainderRows == 0)
{
numberOfRows = numberOfRows - 1;
}
int multiple = DynamicCount / 2;//倍数
int remainder = DynamicCount % 2;//余数
/*
TODO:左边是2的奇数倍 右边是2的偶数倍[依据：倍数，余数]
20为一行[单位：行数(20一行)]，
逐次计算[依据第一行]，
[特殊处理]补空td
[特殊处理]合并多行一起遍历
*/
/*[编辑]动态生成表格：合并行(第一行和其它行合并) 2015/03/10 [方]*/
for (int i = 0; i <= numberOfRows; i++)//遍历行数
{
/*[编辑]动态生成表格：10行间隔一行(<tr></tr>) 2015/03/11 [方]*/
int lineSpacing = i % 10;//间隔行：10行添加一空行，去除第一行
if (lineSpacing == 0 && i != 0)
{
sb.Append("<tr><td colspan='21'> </td></tr>");
}
sb.Append("<tr>");
/*[编辑]动态生成表格：每一行第一列[新增]行编号 2015/03/11 [方]*/
sb.Append("<td>第 " + (i + 1) + " 排</td>");
for (int j = 1; j <= 20; j++)
{
/*[特殊处理]：判断当前行，当前列是否有值：有，打印td 没有，补空td*/
/*[思路]：左边，以19为单位，逐次累加20 与 当前数量比对*/
int tempOdd = 19 + (20 * i);//左边计算单位：19+20的倍数
if (j <= 10)
{
if (DynamicCount < (tempOdd - (2 * (j - 1))))
{
sb.Append("<td>");
sb.Append("</td>");
}
else
{
sb.Append("<td>");
sb.Append((tempOdd - (2 * (j - 1))));
sb.Append("</td>");
}
}
else
{
/*[思路]：右边，以2的倍数为单位，逐次累加20 20 18 16 与 当前数量比对*/
int rewrite = j - 10;
int tempEven = (2 * rewrite) + (20 * i);//右边计算单位：2的倍数+20的倍数
if (DynamicCount < (tempEven))
{
sb.Append("<td>");
sb.Append("</td>");
}
else
{
sb.Append("<td>");
sb.Append(tempEven);
sb.Append("</td>");
}
}
}
}
}
else
{
/*[新增]提示信息：无墓碑信息 2015/03/10 [方] */
sb.Append("<div>");
sb.Append("<span style=\"color:red;font-size:24px;font:'华文彩云,楷体，宋体'\">暂无墓碑信息...</span>");
sb.Append("<div>");
}
this.ltrdynamicCreation.Text = sb.ToString();
}
#endregion
protected void btnDynamicCreation_Click(object sender, EventArgs e)
{
/*[测试：数据数量来自于自定义]*/
string strDynamicCount = txtDynamicCount.Text;
if (!string.IsNullOrEmpty(strDynamicCount))
{
DynamicCount = Convert.ToInt32(strDynamicCount);
}
DynamicCreation();
}
}
}前端javascript
<script type="text/javascript">
var DynamicCount = "";
var noDataMes = "<div><span style=\"color: red;font:'华文彩云,楷体，宋体';font-size:24px; \">暂无墓碑信息...</span></div>";
/*[新增]动态生成表格：接收一参数，实现查询数据库<获取数量> 按照现有风格排序 2015/03/10 [方]*/
/*
Tips:
1、在后台写C#程序,取得当前要操作的键值,然后根据键值查询数量[填充数据项]
2、JS打印，AJAX读取数据库数据[填充数据项]
3、[测试：数据数量来自于自定义]
* */
$(function () {
$("[id=btnTempDynamicCreation]").hide();//隐藏btn(aspx)
});
function DynamicCreation() {
$("#dynamicCreation").empty();//清空墓碑信息
var strDynamicCount = $("[id=txtDynamicCount]").val();//墓碑数量
if (strDynamicCount != '' && strDynamicCount != null && strDynamicCount != undefined) {
DynamicCount = parseInt(strDynamicCount);
}
/*[测试：数据项来自于自定义] 后期根据传入条件查询指定数据项*/
var result = '';
/*[新增]标题项：[测试：动态生成表格] 2015/03/10 [方]*/
result += "<h1 align=\"center\" >[测试：动态生成表格]</h1>";
result += "<table id=\"tbList\" width=\"100%\" border=\"0\" align=\"center\" cellpadding=\"0\" cellspacing=\"0\">";
if (DynamicCount > 0) {
var numberOfRows = DynamicCount / 20;//行数
var remainderRows = DynamicCount % 20;//行数余数
/*20 40 60，... 行数处理：行数减一，以便打印重复行*/
if (remainderRows == 0) {
numberOfRows = numberOfRows - 1;
}
var multiple = DynamicCount / 2;//倍数
var remainder = DynamicCount % 2;//余数
/*
TODO:左边是2的奇数倍 右边是2的偶数倍[依据：倍数，余数]
20为一行[单位：行数(20一行)]，
逐次计算[依据第一行]，
[特殊处理]补空td
[特殊处理]合并多行一起遍历
*/
/*[编辑]动态生成表格：合并行(第一行和其它行合并) 2015/03/10 [方]*/
for (var i = 0; i <= numberOfRows; i++)//遍历行数
{
result += "<tr>";
for (var j = 1; j <= 20; j++) {
/*[特殊处理]：判断当前行，当前列是否有值：有，打印td 没有，补空td*/
/*[思路]：左边，以19为单位，逐次累加20 与 当前数量比对*/
var tempOdd = 19 + (20 * i);//左边计算单位：19+20的倍数
if (j <= 10) {
if (DynamicCount < (tempOdd - (2 * (j - 1)))) {
result += "<td>";
result += "</td>";
}
else {
result += "<td>";
result += tempOdd - (2 * (j - 1));
result += "</td>";
}
}
else {
/*[思路]：右边，以2的倍数为单位，逐次累加20 20 18 16 与 当前数量比对*/
var rewrite = j - 10;
var tempEven = (2 * rewrite) + (20 * i);//右边计算单位：2的倍数+20的倍数
if (DynamicCount < (tempEven)) {
result += "<td>";
result += "</td>";
}
else {
result += "<td>";
result += tempEven;
result += "</td>";
}
}
}
result += "<tr>";
result += "</tr>";
}
$("[id=dynamicCreation]").append(result);
} else {
/*[新增]提示信息：无墓碑信息 2015/03/10 [方] */
$("[id=dynamicCreation]").append(noDataMes);
}
}
</script>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 动态生成数据--零散烈士陵园【广宁县】
- c# winform 获取当前程序运行根目录
- c#中的定时器的使用
- 【C#】字符串格式化
- C#基础知识
- c#读取excel
- C#播放简单语音
- C# 判断系统空闲（键盘、鼠标不操作一段时间）
- c#中委托的使用
- 关于C#编程中引用与值类型赋值的一些容易犯错的地方
- c# socket 判断端口是否被占用
- c#中const与readonly区别
- [Solution] Microsoft Windows 服务(1) C#创建Windows服务
- c#中const与readonly区别
- C#二进制与字符串之间的相互转换
- C#中的反射原理及应用
- C# datatable to list
- C#中struct和class的区别
- C#基础-----面向对象（一）
- C# 类型基础