table伪动态数据绑定

2024-03-17 13:32
文章标签 绑定 table 动态数据

本文主要是介绍table伪动态数据绑定，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

要实现如下图的效果

                   

 

前台FormView控件的项模板用table来简单布局下：

     <asp:FormView ID="FormView1" runat="server" DataKeyNames="ID"  Width="100%">
             <ItemTemplate> 

                    <table width="100%" cellpadding="0" cellspacing="0">
                            <tr>
                                <td colspan="2" style="background-color: #D7E8F8">
                                    <asp:Image ImageUrl="~/AQJDGL/Security/jzyx.jpg" runat="server" ID="Image1" />
                                </td>
                                <td align="center" style="width: 20%" id="tbsj1" runat="server">
                                 &nbsp;   //这里加&nbsp;的作用是即使从数据库中取出的不够四个,table的cell之间还是可以看见是有线分割着的
                                </td>
                                <td align="center" style="width: 20%" id="tbsj2" runat="server">
                                    &nbsp;
                                </td>
                                <td align="center" style="width: 20%" id="tbsj3" runat="server">
                                    &nbsp;
                                </td>
                                <td align="center" style="width: 20%" id="tbsj4" runat="server">
                                    &nbsp;
                                </td>
                            </tr>
                            <tr>
                                <td align="center" style="font-weight: bold; height: 30px; width: 5%">
                                    <asp:Label ID="Label27" runat="server" Text="主机组"></asp:Label>
                                </td>
                                <td align="center" style="font-weight: bold; height: 30px; width: 15%">
                                    <asp:Label ID="Label1" runat="server" Text="油位、气味、声音、震动、温度"></asp:Label>
                                </td>
                                <td align="center" style="width: 20%" id="tbzjz1" runat="server">
                                    &nbsp;
                                </td>
                                <td align="center" style="width: 20%" id="tbzjz2" runat="server">
                                    &nbsp;
                                </td>
                                <td align="center" style="width: 20%" id="tbzjz3" runat="server">
                                    &nbsp;
                                </td>
                                <td align="center" style="width: 20%" id="tbzjz4" runat="server">
                                    &nbsp;
                                </td>
                            </tr>
                            <tr>
                                <td align="center" style="font-weight: bold; height: 30px; width: 5%">
                                    <asp:Label ID="Label2" runat="server" Text="供水系统"></asp:Label>
                                </td>
                                <td align="center" style="font-weight: bold; height: 30px; width: 15%">
                                    <asp:Label ID="Label3" runat="server" Text="压力、声音、滴漏、震动"></asp:Label>
                                </td>
                                <td align="center" style="width: 20%" id="tbgsxt1" runat="server">
                                    &nbsp;
                                </td>
                                <td align="center" style="width: 20%" id="tbgsxt2" runat="server">
                                    &nbsp;
                                </td>
                                <td align="center" style="width: 20%" id="tbgsxt3" runat="server">
                                    &nbsp;
                                </td>
                                <td align="center" style="width: 20%" id="tbgsxt4" runat="server">
                                    &nbsp;
                                </td>
                            </tr>
                            <tr>
                                <td align="center" style="font-weight: bold; height: 30px; width: 5%">
                                    <asp:Label ID="Label4" runat="server" Text="供气系统"></asp:Label>
                                </td>
                                <td align="center" style="font-weight: bold; height: 30px; width: 15%">
                                    <asp:Label ID="Label5" runat="server" Text="压力、声音、泄漏"></asp:Label>
                                </td>
                                <td align="center" style="width: 20%" id="tbgqxt1" runat="server">
                                    &nbsp;
                                </td>
                                <td align="center" style="width: 20%" id="tbgqxt2" runat="server">
                                    &nbsp;
                                </td>
                                <td align="center" style="width: 20%" id="tbgqxt3" runat="server">
                                    &nbsp;
                                </td>
                                <td align="center" style="width: 20%" id="tbgqxt4" runat="server">
                                    &nbsp;
                                </td>
                            </tr>
                            <tr>
                                <td align="center" style="font-weight: bold; height: 30px; width: 5%">
                                    <asp:Label ID="Label6" runat="server" Text="高低压柜"></asp:Label>
                                </td>
                                <td align="center" style="font-weight: bold; height: 30px; width: 15%">
                                    &nbsp;<asp:Label ID="Label7" runat="server" Text=""></asp:Label>
                                </td>
                                <td align="center" style="width: 20%" id="tbgdyg1" runat="server">
                                    &nbsp;
                                </td>
                                <td align="center" style="width: 20%" id="tbgdyg2" runat="server">
                                    &nbsp;
                                </td>
                                <td align="center" style="width: 20%" id="tbgdyg3" runat="server">
                                    &nbsp;
                                </td>
                                <td align="center" style="width: 20%" id="tbgdyg4" runat="server">
                                    &nbsp;
                                </td>
                            </tr>
                            <tr>
                                <td align="center" style="font-weight: bold; height: 30px; width: 5%">
                                    <asp:Label ID="Label8" runat="server" Text="上游液压门"></asp:Label>
                                </td>
                                <td align="center" style="font-weight: bold; height: 30px; width: 15%">
                                    &nbsp;<asp:Label ID="Label9" runat="server" Text=""></asp:Label>
                                </td>
                                <td align="center" style="width: 20%" id="tbsyyym1" runat="server">
                                    &nbsp;
                                </td>
                                <td align="center" style="width: 20%" id="tbsyyym2" runat="server">
                                    &nbsp;
                                </td>
                                <td align="center" style="width: 20%" id="tbsyyym3" runat="server">
                                    &nbsp;
                                </td>
                                <td align="center" style="width: 20%" id="tbsyyym4" runat="server">
                                    &nbsp;
                                </td>
                            </tr>
                            <tr>
                                <td align="center" style="font-weight: bold; height: 30px; width: 5%">
                                    <asp:Label ID="Label10" runat="server" Text="下游检修门"></asp:Label>
                                </td>
                                <td align="center" style="font-weight: bold; height: 30px; width: 15%">
                                    <asp:Label ID="Label12" runat="server" Text="吊  挂"></asp:Label>
                                </td>
                                <td align="center" style="width: 20%" id="tbxyjxm1" runat="server">
                                    &nbsp;
                                </td>
                                <td align="center" style="width: 20%" id="tbxyjxm2" runat="server">
                                    &nbsp;
                                </td>
                                <td align="center" style="width: 20%" id="tbxyjxm3" runat="server">
                                    &nbsp;
                                </td>
                                <td align="center" style="width: 20%" id="tbxyjxm4" runat="server">
                                    &nbsp;
                                </td>
                            </tr>
                            <tr>
                                <td align="center" style="font-weight: bold; height: 30px; width: 5%">
                                    <asp:Label ID="Label13" runat="server" Text="拍   门"></asp:Label>
                                </td>
                                <td align="center" style="font-weight: bold; height: 30px; width: 15%">
                                    <asp:Label ID="Label14" runat="server" Text="绞座、拐臂、销"></asp:Label>
                                </td>
                                <td align="center" style="width: 20%" id="tbpm1" runat="server">
                                    &nbsp;
                                </td>
                                <td align="center" style="width: 20%" id="tbpm2" runat="server">
                                    &nbsp;
                                </td>
                                <td align="center" style="width: 20%" id="tbpm3" runat="server">
                                    &nbsp;
                                </td>
                                <td align="center" style="width: 20%" id="tbpm4" runat="server">
                                    &nbsp;
                                </td>
                            </tr>
                            <tr>
                                <td align="center" style="font-weight: bold; height: 30px; width: 5%">
                                    <asp:Label ID="Label15" runat="server" Text="10KV 站变"></asp:Label>
                                </td>
                                <td align="center" style="font-weight: bold; height: 30px; width: 15%">
                                    <asp:Label ID="Label16" runat="server" Text="声音、温度"></asp:Label>
                                </td>
                                <td align="center" style="width: 20%" id="tbzb1" runat="server">
                                    &nbsp;
                                </td>
                                <td align="center" style="width: 20%" id="tbzb2" runat="server">
                                    &nbsp;
                                </td>
                                <td align="center" style="width: 20%" id="tbzb3" runat="server">
                                    &nbsp;
                                </td>
                                <td align="center" style="width: 20%" id="tbzb4" runat="server">
                                    &nbsp;
                                </td>
                            </tr>

                      </table>

                </ItemTemplate>
          </asp:FormView>

后台cs文件中给这些td赋值：

 首先需要添加引用：

using System.Web.UI.HtmlControls;

        DM dm = new DM();
        string strSQL = "SELECT top 4 * FROM [机组运行巡视检查记录附表] WHERE 主表ID=" + int.Parse(id.ToString()) + " order by ID";
        DataSet ds = dm.getsql(strSQL);

        //获取数据集中数据个数
        int summ = ds.Tables[0].Rows.Count;
        for (int i = 1; i < summ + 1; i++)
        {

             //通过循环遍历给td单元格赋值
            ((HtmlTableCell)FormView1.FindControl("tbsj" + i.ToString())).InnerText = ds.Tables[0].Rows[i - 1]["检查时段"].ToString();
            ((HtmlTableCell)FormView1.FindControl("tbzjz" + i.ToString())).InnerText = ds.Tables[0].Rows[i-1]["主机组情况"].ToString();
            ((HtmlTableCell)FormView1.FindControl("tbgsxt" + i.ToString())).InnerText = ds.Tables[0].Rows[i-1]["供水系统情况"].ToString();
            ((HtmlTableCell)FormView1.FindControl("tbgqxt" + i.ToString())).InnerText = ds.Tables[0].Rows[i-1]["供气系统情况"].ToString();
            ((HtmlTableCell)FormView1.FindControl("tbgdyg" + i.ToString())).InnerText = ds.Tables[0].Rows[i-1]["高低压柜情况"].ToString();
            ((HtmlTableCell)FormView1.FindControl("tbsyyym" + i.ToString())).InnerText = ds.Tables[0].Rows[i-1]["上游液压门情况"].ToString();
            ((HtmlTableCell)FormView1.FindControl("tbxyjxm" + i.ToString())).InnerText = ds.Tables[0].Rows[i - 1]["下游检修门情况"].ToString();
            ((HtmlTableCell)FormView1.FindControl("tbpm" + i.ToString())).InnerText = ds.Tables[0].Rows[i - 1]["拍门情况"].ToString();
            ((HtmlTableCell)FormView1.FindControl("tbzb" + i.ToString())).InnerText = ds.Tables[0].Rows[i - 1]["站变情况"].ToString();
        }

 

 

这篇关于table伪动态数据绑定的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/819110。

相关文章

SpringMVC入参绑定特别注意

SpringMVC入参绑定特别注意

1.直接在controller中定义一个变量，但是此种传输方式有一个限制就是参数名和请求中的参数名必须保持一致，否则失效。 @RequestMapping("test2")@ResponseBodypublic DBHackResponse<UserInfoVo> test2(String id , String name){UserInfoVo userInfoVo = new UserInf
阅读更多...
Maven(插件配置和生命周期的绑定)

Maven(插件配置和生命周期的绑定)

1.这篇文章很好，介绍的maven插件的。 2.maven的source插件为例，可以把源代码打成包。 Goals Overview就可以查看该插件下面所有的目标。 这里我们要使用的是source:jar-no-fork。 3.查看source插件的example，然后配置到riil-collect.xml中。  <build>   <plugins>    <pl
阅读更多...
vue2实践：el-table实现由用户自己控制行数的动态表格

vue2实践：el-table实现由用户自己控制行数的动态表格

需求 项目中需要提供一个动态表单，如图： 当我点击添加时，便添加一行；点击右边的删除时，便删除这一行。 至少要有一行数据，但是没有上限。 思路 这种每一行的数据固定，但是不定行数的，很容易想到使用el-table来实现，它可以循环读取:data所绑定的数组，来生成行数据，不同的是： 1、table里面的每一个cell，需要放置一个input来支持用户编辑。 2、最后一列放置两个b
阅读更多...
react笔记 8-19 事件对象、获取dom元素、双向绑定

react笔记 8-19 事件对象、获取dom元素、双向绑定

1、事件对象event 通过事件的event对象获取它的dom元素 run=(event)=>{event.target.style="background:yellowgreen" //event的父级为他本身event.target.getAttribute("aid") //这样便获取到了它的自定义属性aid}render() {return (<div><h2>{
阅读更多...
react笔记 8-17 属性绑定 class绑定 引入图片 循环遍历

react笔记 8-17 属性绑定 class绑定 引入图片 循环遍历

1、绑定属性 constructor(){super()this.state={name:"张三",title:'我是一个title'}}render() {return (<div><div>aaaaaaa{this.state.name}<div title={this.state.title}>我是一个title</div></div></div>)} 绑定属性直接使用花括号{}   注
阅读更多...
react笔记 8-16 JSX语法 定义数据 数据绑定

react笔记 8-16 JSX语法 定义数据 数据绑定

1、jsx语法 和vue一样  只能有一个根标签 一行代码写法 return <div>hello world</div> 多行代码返回必须加括号 return (<div><div>hello world</div><div>aaaaaaa</div></div>) 2、定义数据 数据绑定 constructor(){super()this.state={na
阅读更多...
微信小程序(一)数据流与数据绑定

微信小程序(一)数据流与数据绑定

一、单向数据流和双向数据流 1、单项数据流：指的是我们先把模板写好，然后把模板和数据（数据可能来自后台）整合到一起形成HTML代码，然后把这段HTML代码插入到文档流里面 优点：数据跟踪方便，流向单一，追寻问题比较方便【主要体现：微信小程序】。 缺点：就是写起来不太方便，如果修改UI界面数据需要维护对应的model对象 2、双向数据流：值和UI是双向绑定的,大家都知道，只要UI里面的值发生
阅读更多...
使用http-request 属性替代action绑定上传URL

使用http-request 属性替代action绑定上传URL

在 Element UI 的 <el-upload> 组件中，如果你需要为上传的 HTTP 请求添加自定义的请求头（例如，为了通过身份验证或满足服务器端的特定要求），你不能直接在 <el-upload> 组件的属性中设置这些请求头。但是，你可以通过 http-request 属性来自定义上传的行为，包括设置请求头。 http-request 属性允许你完全控制上传的行为，包括如何构建请求、发送请
阅读更多...
通过Ajax请求后台数据，返回JSONArray（JsonObject），页面（Jquery）以table的形式展示

通过Ajax请求后台数据，返回JSONArray（JsonObject），页面（Jquery）以table的形式展示

点击“会商人员情况表”，弹出层，显示一个表格，如下图： 利用Ajax和Jquery和JSONArray和JsonObject来实现： 代码如下： 在hspersons.html中： <!DOCTYPE html><html><head><meta charset="UTF-8"><title>会商人员情况表</title><script type="text/javasc
阅读更多...
springMVC 参数绑定的注解

springMVC 参数绑定的注解

本文介绍了用于参数绑定的相关注解。 绑定：将请求中的字段按照名字匹配的原则填入模型对象。 SpringMVC就跟Struts2一样，通过拦截器进行参数匹配。 代码在 https://github.com/morethink/MySpringMVC URI模板变量 这里指uri template中variable(路径变量)，不含queryString部分 @PathVariable
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2