Question

我需要使用C＃ASP.NET根据我现有的表之一更改GridView外观。实际上我有一个GridView，下面有解释。

mission.aspx：

<asp:GridView ID="GridView1" runat="server" 
              CssClass="table table-striped table-bordered margin-top-zero">
</asp:GridView>

上面的GridView正在生成以下HTML输出。

<table class="table table-striped table-bordered margin-top-zero"
       cellspacing="0" rules="all" border="1" 
       id="MainContent_GridView1" style="border-collapse:collapse;">
  <tbody>
    <tr>
      <th scope="col">Mission_vision_ID</th>
      <th scope="col">Image</th>
      <th scope="col">Description</th>
      <th scope="col">Heading</th>
    </tr>
    <tr>
      <td>1</td>
      <td></td>
      <td>hello subhra</td>
      <td>Cardiology</td>
    </tr>
    <tr>
      <td>2</td>
      <td></td>
      <td>fever</td>
    </tr>
    <tr>
      <td>4</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>pathology</td>
    </tr>
    <tr>
      <td>5</td>
      <td>~\Upload\002.jpg</td>
      <td>hii</td>
      <td>pathology</td>
    </tr>
    <tr>
      <td>6</td>
      <td>1.jpg</td>
      <td>haii vision</td>
      <td>vision</td>
    </tr> 
  </tbody>
</table>

但我需要结果表格式，如下表所示。

<table class="table table-striped table-bordered margin-top-zero">
  <colgroup>
    <col class="col-md-1 col-sm-1">
    <col class="col-md-4 col-sm-4">
    <col class="col-md-2 col-sm-2">
    <col class="col-md-4 col-sm-4">
    <col class="col-md-1 col-sm-1">
  </colgroup>
  <thead>
    <tr>
      <th>Sl. No</th>
      <th>Heading</th>
      <th>Image</th>
      <th>Description</th>
      <th>Action</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Mission</td>
      <td><img src="images/resource/me.jpg" border="0" name="bannerimage" style="width:70px; height:70px;"></td>
      <td>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt...</td>
      <td>
        <a href="javascript:void(0)" data-toggle="tooltip" title="" class="btn btn-xs btn-success" data-original-title="Edit"><i class="fa fa-edit"></i></a>
        <a href="javascript:void(0)" data-toggle="tooltip" title="" class="btn btn-xs btn-danger" data-original-title="Delete"><i class="fa fa-times"></i></a>
      </td>
    </tr>
    <tr>
      <td>2</td>
      <td>Vision</td>
      <td><img src="images/resource/me.jpg" border="0" name="bannerimage" style="width:70px; height:70px;"></td>
      <td>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt...</td>
      <td>
        <a href="javascript:void(0)" data-toggle="tooltip" title="" class="btn btn-xs btn-success" data-original-title="Edit"><i class="fa fa-edit"></i></a>
        <a href="javascript:void(0)" data-toggle="tooltip" title="" class="btn btn-xs btn-danger" data-original-title="Delete"><i class="fa fa-times"></i></a>
      </td>
    </tr>
  </tbody>
</table>

Answer 1

您可以添加ItemTemplate来自定义网格视图。以下是如何自定义gridview的示例。

<asp:GridView ID="GridView1" runat="server" CssClass="table table-striped table-bordered margin-top-zero">
<Columns>
 <asp:TemplateField HeaderText="Select" HeaderStyle-CssClass="k-grid td" ItemStyle-CssClass="someClass">
    <ItemTemplate>
      <asp:Label runat="server" Text='<%# Eval("Category") %>' ></asp:Label>
    </ItemTemplate>
 </asp:TemplateField>
</Columns>
</asp:GridView>

此处每个TemplateField都是column的{{1}}。

您可以使用gridview属性将class应用于TemplateField，该属性将呈现为ItemStyle-CssClass。

此处td将从您已绑定Eval("Category")的数据源中获取“类别”列的值。

您还可以使用gridview作为您桌子的BoundField。

td

此处<asp:BoundField DataField="items" HeaderText="Meta Title" ItemStyle-Width="30" HeaderStyle-CssClass="k-grid td" ItemStyle-CssClass="someClass" />是来自数据源的列的名称。

如何自定义GridView

1 个答案: