失眠网,内容丰富有趣,生活中的好帮手!
失眠网 > asp.net 中GridView控件实现全选及反选的功能

asp.net 中GridView控件实现全选及反选的功能

时间:2024-01-21 10:41:04

相关推荐

asp.net 中GridView控件实现全选及反选的功能

大家都知道邮箱里面有全部删除邮件的复选按钮,其实还是比较简单哈!

废话嘛!就不说那么多了,我先给大家讲哈功能的实现。

首先,拖一个GridView控件和SqlDataSource控件,配置数据源。

然后,进行GridView控件的配置,点击‘编辑模板’添加2个CheckBox控件,分别放在ItemTemplate里面和HeaderTemplate,

下面再添加 javascript脚本代码

<script language="javascript" type="text/javascript">

function myclick(checkAll) {

var item = document.getElementsByName("checkUsers");

for (var i = 0; i < item.length; i++) {

item[i].checked = checkAll.checked;

}

}

function myclick1() {

var item = document.getElementsByName("checkUsers");

var ischeck = true;

for (var i = 0; i < item.length; i++) {

if (item[i].checked == false) {

ischeck = false;

break;

}

}

var mycheck = document.getElementById("checkAll");

if (ischeck) {

mycheck.checked = true;

} else {

mycheck.checked = false;

}

}

</script>

这是GridView控件中的列

<asp:GridView ID="GridView1" runat="server"

AutoGenerateColumns="False" BackColor="White" BorderColor="#CC9966"

BorderStyle="None" BorderWidth="1px" CellPadding="4" Height="137px"

PageSize="3" Width="100%" style="margin-bottom: 0px"

onrowcommand="GridView1_RowCommand"

onrowdatabound="GridView1_RowDataBound">

<Columns>

<asp:TemplateField ItemStyle-HorizontalAlign="Center">

<HeaderTemplate>

全选<br /><input type="checkbox" id="cboAll" οnclick="myclick(this)" />

</HeaderTemplate>

<ItemTemplate>

<input type="checkbox" id="checkUsers" οnclick="myclick1()" />

</ItemTemplate>

</Cloumns>

</asp:GridView>

好了,功能实现!点击全选,所有复选框选中,如果把所有项目的复选框选中,全选的也会自动选中,否则反之

如果觉得《asp.net 中GridView控件实现全选及反选的功能》对你有帮助,请点赞、收藏,并留下你的观点哦!

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。