选中时如何添加复选框标题列以检查所有内容?

问题描述 投票:0回答:2

我在 sp.net web 表单上工作。我面临无法将列复选框添加到网格视图作为标题列的问题。

所以当标题列被选中时,网格视图中的所有行都被选中

当标题列未选中时,所有行均未在网格视图中选中。

意味着所有行网格视图将取决于是否选中列标题。

所以如何使用 jQuery 或 java 脚本或 CSS 来做到这一点。

<div class="row">
    <div class="table-responsive">
        <asp:GridView ID="GridViewSearchData" runat="server"  AutoGenerateColumns="False"
        DataKeyNames="ID" CssClass="table" HeaderStyle-BackColor="#172b4d" ForeColor="White" OnDataBound="GridViewSearchData_OnDataBound" AllowPaging="true" OnPageIndexChanging="OnPageIndexChanging" PageSize="1">
            <Columns>
                    <asp:TemplateField HeaderText="Select" ItemStyle-HorizontalAlign="Center">
                    <ItemTemplate>
                        <asp:CheckBox ID="chkSel" runat="server" />
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:BoundField DataField="BranchCode" HeaderText="BranchCode" />
                <asp:BoundField DataField="Status" HeaderText="Status" />
                <asp:BoundField DataField="OrderNo" HeaderText="OrderNo" ItemStyle-Width="120px" />
                <asp:BoundField DataField="OrderType" HeaderText="OrderType" />
                <asp:BoundField DataField="Printer_name" HeaderText="Printer_name" />
                <asp:BoundField DataField="EntredDatetime" HeaderText="EntredDatetime" />                            
                <asp:BoundField DataField="Id" HeaderText="Id" />
            </Columns>
        </asp:GridView>
    </div>
</div>

对于网格视图数据源

protected void Search_Click(object sender, EventArgs e)
{
    DataTable dt;
    dt = busiObj.DisplayAllSearchData();
               
    if (dt != null && dt.Rows.Count > 0)
    {
        GridViewSearchData.DataSource = dt;
        GridViewSearchData.DataBind();
    }
}

预期结果的图像为红色第一列

c# jquery css asp.net webforms
2个回答
0
投票

使用 jquery 的例子:

<asp:GridView ID="GridViewSearchData" runat="server" AutoGenerateColumns="False" DataKeyNames="ID" CssClass="table" HeaderStyle-BackColor="#172b4d" ForeColor="White" OnDataBound="GridViewSearchData_OnDataBound" AllowPaging="true" OnPageIndexChanging="OnPageIndexChanging" PageSize="1">
<Columns>
    <asp:TemplateField HeaderText="Select All" ItemStyle-HorizontalAlign="Center">
        <ItemTemplate>
            <asp:CheckBox ID="chkSel" runat="server" CssClass="chkSelectRow" />
        </ItemTemplate>
    </asp:TemplateField>
    <asp:BoundField DataField="BranchCode" HeaderText="BranchCode" />
    <asp:BoundField DataField="Status" HeaderText="Status" />
    <asp:BoundField DataField="OrderNo" HeaderText="OrderNo" ItemStyle-Width="120px" />
    <asp:BoundField DataField="OrderType" HeaderText="OrderType" />
    <asp:BoundField DataField="Printer_name" HeaderText="Printer_name" />
    <asp:BoundField DataField="EntredDatetime" HeaderText="EntredDatetime" />                            
    <asp:BoundField DataField="Id" HeaderText="Id" />
</Columns>
</asp:GridView>

JavaScript:

<script type="text/javascript">
$(document).ready(function () {
    // Add click event to header checkbox
    $(".chkSelectAll").click(function () {
        $(".chkSelectRow").prop('checked', $(this).prop('checked'));
    });

    // Add click event to row checkboxes
    $(".chkSelectRow").click(function () {
        if ($(".chkSelectRow:checked").length == $(".chkSelectRow").length) {
            $(".chkSelectAll").prop('checked', true);
        }
        else {
            $(".chkSelectAll").prop('checked', false);
        }
    });
});
protected void GridViewSearchData_RowDataBound(object sender, GridViewRowEventArgs e)
{
    if (e.Row.RowType == DataControlRowType.Header)
    {
        CheckBox chkSelectAll = (CheckBox)e.Row.FindControl("chkSelectAll");
        chkSelectAll.Attributes.Add("onclick", "jQuery('.chkSelectRow').prop('checked', this.checked);");
    }
}

0
投票

首先,如何向标题添加“任何”控件。

它的工作方式非常像任何项目模板。

启动一个“项目模板”,然后在其中放入标题模板。

所以,我们现在有这个:

<h3>Select Hotels</h3>
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False"
    DataKeyNames="ID" Width="50%" CssClass="table table-hover">
    <Columns>
        <asp:BoundField DataField="FirstName" HeaderText="FirstName" />
        <asp:BoundField DataField="LastName" HeaderText="LastName" />
        <asp:BoundField DataField="HotelName" HeaderText="HotelName" />
        <asp:BoundField DataField="City" HeaderText="City" />
        <asp:BoundField DataField="Description" HeaderText="Description" />

        <asp:TemplateField
            ItemStyle-HorizontalAlign="Center"
            HeaderStyle-Width="70px">
            <HeaderTemplate>
                <div style="text-align: center">
                    All<br />
                    <asp:CheckBox ID="chkAll" runat="server"
                        OnCheckedChanged="chkAll_CheckedChanged"
                        AutoPostBack="true" />
                </div>
            </HeaderTemplate>
            <ItemTemplate>
                <asp:CheckBox ID="chkSel" runat="server" />
            </ItemTemplate>
        </asp:TemplateField>
    </Columns>
</asp:GridView>

我们为复选框设置了一个点击事件。所以,现在的代码是这样的:

    protected void chkAll_CheckedChanged(object sender, EventArgs e)
    {
        CheckBox chkHeaderCheck = (CheckBox)sender;
        
        foreach (GridViewRow gRow in GridView1.Rows)
        {
            CheckBox ckRowSel = (CheckBox)gRow.FindControl("chkSel");
            ckRowSel.Checked = chkHeaderCheck.Checked;
        }
    }

现在我们得到/看到这个:

所以,上面真的很干净,非常简单。

当然,我们可以使用 JavaScript 在客户端 100% 执行此代码。

所以,现在 out 按钮(标题)没有服务器端点击,也没有回发。

所以,这个:

        <asp:TemplateField
            ItemStyle-HorizontalAlign="Center"
            HeaderStyle-Width="70px">
            <HeaderTemplate>
                <div style="text-align: center">
                    All<br />
                        <asp:CheckBox ID="chkHeader" runat="server" 
                            onclick="myheadcheck(this)" />
                </div>
            </HeaderTemplate>
            <ItemTemplate>
                <asp:CheckBox ID="chkSel" runat="server" />
            </ItemTemplate>
        </asp:TemplateField>

js代码是这样的:(jQuery)

  <script>

      function myheadcheck(btn) {

          // get the ONE check box, checked, or not???
          var bolChecked = $(btn).is(':checked')

          // now set all check boxes
          MyTable = $('#<%= GridView1.ClientID %>')    // select and get grid
          MyCheckBoxs = MyTable.find('input:checkbox') // select all check boxes in grid
          MyCheckBoxs.each(function () {
              $(this).prop('checked', bolChecked)
          })
      }
  </script>

现在结果真的一样,但是没有服务器端回发。

然而,无论哪种方式?注意Header模板的使用-

最后但并非最不重要的是?

还可以包含加载 gv 的代码。

    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            LoadGrid();
        }
    }
    protected void LoadGrid()
    {
        using (SqlConnection conn = new SqlConnection(Properties.Settings.Default.TEST4))
        {
            string strSQL = "SELECT * FROM tblHotelsA ORDER BY HotelName";
            using (SqlCommand cmdSQL = new SqlCommand(strSQL, conn))
            {
                DataTable rstData = new DataTable();
                conn.Open();
                rstData.Load(cmdSQL.ExecuteReader());
                GridView1.DataSource = rstData;
                GridView1.DataBind();
            }
        }
    }
© www.soinside.com 2019 - 2024. All rights reserved.