asp.net 我想输出表一样-前三个字段的值应显示在表中的三列和下三个值在下一行的表

8qgya5xd  于 5个月前  发布在  .NET
关注(0)|答案(1)|浏览(48)

我有table
| ID|描述|
| --|--|
| 1 |一|
| 2 |两|
| 3 |三|
| 4 |四|
| 5 |五|
| 6 |六|
希望输出类似
| D1| D2| D3|
| --|--|--|
| 一|两|三|
| 四|五|六|

我想创建一个按钮-动态使用表值为同一字段的每个值。
3个按钮应该在一排,等等。

kkbh8khc

kkbh8khc1#

对于这种类型的代码,在大多数情况下使用repeater是有意义的。但是,让我们尝试使用GridView。
所以,说这个标记:

<div style="float:left">

        <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false"
            CssClass="table table-hover" Width="500px"
            >
            <Columns>

                <asp:TemplateField HeaderText="D1">
                    <ItemTemplate>
                        <asp:Button ID="B1" runat="server" Text='<%# Eval("B1") %>' 
                            CssClass="btn myshadow"
                            OnClick="B1_Click"  />
                    </ItemTemplate>
                </asp:TemplateField>

                <asp:TemplateField HeaderText="D2">
                    <ItemTemplate>
                        <asp:Button ID="B2" runat="server" Text='<%# Eval("B2") %>' 
                            CssClass="btn myshadow"
                            OnClick="B1_Click"  />
                    </ItemTemplate>
                </asp:TemplateField>

                <asp:TemplateField HeaderText="D3">
                    <ItemTemplate>
                        <asp:Button ID="B3" runat="server" Text='<%# Eval("B3") %>' 
                            CssClass="btn myshadow"
                            OnClick="B1_Click"  />
                    </ItemTemplate>
                </asp:TemplateField>

            </Columns>
        </asp:GridView>
        </div>

        <div style="float:left;margin-left:35px">
            <asp:Label ID="Label1" runat="server" Text=""></asp:Label>
            <br />
            <asp:Label ID="Label2" runat="server" Text=""></asp:Label>

        </div>

字符串
然后要填充的代码是这样的:

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load

    If Not IsPostBack Then
        LoadGrid
    End If

End Sub

Sub LoadGrid()

    Dim rstData As DataTable =
        MyRst("SELECT ID, Description FROM tblBut ORDER BY ID")

    Dim rstFlatTable As New DataTable

    rstFlatTable.Columns.Add("B1")
    rstFlatTable.Columns.Add("B2")
    rstFlatTable.Columns.Add("B3")

    Dim iColumns As Integer = 3     ' number of columns
    Dim iColPtr As Integer = 0      ' our colum ptr

    Dim NewRow As DataRow = rstFlatTable.NewRow

    For Each OneRow As DataRow In rstData.Rows

        If iColPtr < iColumns Then
            NewRow(iColPtr) = OneRow("Description")
        Else ' start a new row
            rstFlatTable.Rows.Add(NewRow)
            iColPtr = 0
            NewRow = rstFlatTable.NewRow
            NewRow(iColPtr) = OneRow("Description")
        End If
        iColPtr += 1
    Next

    ' add last row straggler
    rstFlatTable.Rows.Add(NewRow)

    GridView1.DataSource = rstFlatTable
    GridView1.DataBind()

End Sub


按钮单击事件代码如下:

Protected Sub B1_Click(sender As Object, e As EventArgs)

    Dim btn As Button = sender
    Label1.Text = $"button click value = {btn.Text}"

    Dim gRow As GridViewRow = btn.NamingContainer
    Label2.Text = $"Row index click = {gRow.RowIndex}"

End Sub


所以,运行时的结果是这样的:


的数据
使用中继器也会相当不错。
对上面的唯一添加是行数据绑定事件中的一小段代码,以隐藏最后一行上的额外按钮。
在上面,我使用了一个“helper”例程,因为我很快就厌倦了输入代码来基于给定的SQL创建一个表。所以,这个helper例程是这样的:

Public Function MyRst(strSQL As String) As DataTable
    ' general get any data from SQL

    Dim rstData As New DataTable
    Using conn As New SqlConnection(My.Settings.TEST4)
        Using cmdSQL As New SqlCommand(strSQL, conn)
            conn.Open()
            rstData.Load(cmdSQL.ExecuteReader)
            rstData.TableName = strSQL
        End Using
    End Using
    Return rstData
End Function


可爱按钮的样式是这样的:

<style>
        .myshadow {
            box-shadow: 8px 8px 8px 0px gray;
            border-radius: 10px;
            border: solid;
            border-color: lightgray;
            border-width: .1em;
            padding: 8px;
        }
        .myshadow:hover {background-color:#789eca;transition: 0.5s;}
    </style>

相关问题