Question

我在gridivew上使用了bootstrap和jquery数据表。它可以工作，但列非常大且彼此分开，看起来不太好。我想使它小一些并且彼此靠近，但是不能。

Gridview代码：

<div class="table-responsive table-sm DIV">
  <asp:GridView ID="dgvEmployees" runat="server" CssClass="table table-borderless table-striped">
     <Columns>
       <asp:CommandField ButtonType="Image" SelectImageUrl="~/assets/img/icons/view.png" ShowSelectButton="true" SelectText="View" />
       <asp:CommandField ButtonType="Image" ShowEditButton="true" EditImageUrl="~/assets/img/icons/pencil.png" />
       <asp:CommandField ButtonType="Image" DeleteImageUrl="~/assets/img/icons/trashbin.png" ShowDeleteButton="true" />
     </Columns>
 </asp:GridView>
</div>

代码

  Protected Sub dgvEmployees_RowCommand(sender As Object, e As GridViewCommandEventArgs) Handles dgvEmployees.RowCommand
        If e.CommandName = "Select" Then
            Dim RowIndex As Int16 = Convert.ToInt16(e.CommandArgument)
            Dim EmpID As String = dgvEmployees.Rows(RowIndex).Cells(3).Text
            Response.Redirect(String.Format("EmployeeDetails.aspx?EId={0}&Action={1}", Server.UrlEncode(EmpID), Server.UrlEncode("View")))
        ElseIf e.CommandName = "Edit" Then
            Dim RowIndex As Int16 = Convert.ToInt16(e.CommandArgument)
            Dim EmpID As String = dgvEmployees.Rows(RowIndex).Cells(3).Text
            Response.Redirect(String.Format("EmployeeDetails.aspx?EId={0}&Action={1}", Server.UrlEncode(EmpID), Server.UrlEncode("Edit")))
        ElseIf e.CommandName = "Delete" Then
            'Dim RowIndex As Int16 = Convert.ToInt16(e.CommandArgument)
            'Dim EmpID As String = dgvEmployees.Rows(RowIndex).Cells(3).Text
            'Dim EmployeeBLL = New EmployeeBLL()
            'EmployeeBLL.DeleteEmployeeID(Convert.ToInt16(EmpID))
            'GetAllEmployees()
        End If
    End Sub

脚本：

   <script src="assets/js/core/jquery.3.2.1.min.js"></script>
    <script src="assets/js/plugin/datatables/datatables.min.js"></script>

<script type="text/javascript">
    $(document).ready(function () {


                  $('#ContentPlaceHolder1_dgvEmployees').prepend($("<thead></thead>").append($(this).find("tr:first"))).DataTable({
                      "responsive": true,
                      "sPaginationType": "full_numbers"
                  });

        $('#ContentPlaceHolder1_dgvEmployees').DataTable();
    });

Answer 1

对于vb.net

使用DataGridView1.AutoSizeColumnsMode查看可用选项，然后选择适合您的选项，希望对您有帮助

有一个选项可以自动增长列以适应数据

对于asp.net

将其他列的ItemStyle宽度设置为固定宽度。并将GridView宽度设置为100％

希望有帮助

在gridview上应用jquery datatable和bootstrap之后，为什么它的列相距很远？

1 个答案: