[测试:动态生成表格]

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="[测试:动态生成表格]" οnclick="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>




  • 0
    点赞
  • 0
    收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:大白 设计师:CSDN官方博客 返回首页
评论

打赏作者

鬏飨籁褶伱

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值