我在 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();
}
}
预期结果的图像为红色第一列
使用 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);");
}
}
首先,如何向标题添加“任何”控件。
它的工作方式非常像任何项目模板。
启动一个“项目模板”,然后在其中放入标题模板。
所以,我们现在有这个:
<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();
}
}
}