当前位置： 移动技术网 > IT编程>开发语言>.net > Gridview使用CheckBox全选与单选采用js实现同时高亮显示选择行

Gridview使用CheckBox全选与单选采用js实现同时高亮显示选择行

2017年12月12日  | 移动技术网IT编程  | 我要评论

谭文颖年龄,魁北克移民,十分爱钢琴谱

insus.net对gridview使用checkbox单选与全选功能再次进行简单演示，选中的行，使用高亮显示，让用户一目了然看到哪一行被选择了。本例中，使用前端脚本javascript来实现。还是先看看insus.net做出来的效果：

insus.net原本是从数据库获取数据并绑定至gridview控件的，为了在学asp.net的网友，也能轻易操作，因此这个想法，采用对象存储数据。
首先创建一个对象，[对联]的对象:
couplets.cs
复制代码 代码如下:

using system;
using system.collections.generic;
using system.linq;
using system.web;
/// <summary>
/// summary description for couplets
/// </summary>
namespace insus.net
{
public class couplets
{
private int _id;
private string _type;
private string _content;
public int id
{
get { return _id; }
set { _id = value; }
}
public string type
{
get { return _type; }
set { _type = value; }
}
public string content
{
get { return _content; }
set { _content = value; }
}
public couplets()
{
//
// todo: add constructor logic here
//
}
public couplets(int id, string type, string content)
{
this._id = id;
this._type = type;
this._content = content;
}
}
}

对象准备好，它是的空的对象，所以还得为刚才创建好的对象，填充数据，让它成为真正的实体。
复制代码 代码如下:

public list<couplets> getdata()
{
list<couplets> couplets = new list<couplets>();
couplets c = new couplets(1, "四字联", "一元复始；万象更新。");
couplets.add(c);
c = new couplets(2, "四字联", "风调雨顺；国盛人和。");
couplets.add(c);
c = new couplets(3, "四字联", "风调雨顺；国盛人和。");
couplets.add(c);
c = new couplets(4, "五字联", "金蛇含瑞草；紫燕报新春。");
couplets.add(c);
c = new couplets(5, "五字联", "龙年留胜绩；蛇岁展宏猷。");
couplets.add(c);
c = new couplets(6, "七字联", "壬辰传捷龙辞旧；癸巳报春蛇迎新。");
couplets.add(c);
c = new couplets(7, "七字联", "山高水远人增志；蛇接龙年地满春。");
couplets.add(c);
c = new couplets(8, "七字联", "小龙起舞神州地；祖国腾飞大治年。");
couplets.add(c);
c = new couplets(9, "七字联", "金山水漫双蛇舞；绿野春归百鸟鸣。");
couplets.add(c);
return couplets;
}

在default.aspx网页上拉一个gridview控件。
复制代码 代码如下:

<asp:gridview id="gridviewcouplets" runat="server" autogeneratecolumns="false">
<columns>
<asp:templatefield>
<headertemplate>
<asp:checkbox id="checkbox1" runat="server" tooltip="全选" onclick="selectedall(this);" />
</headertemplate>
<itemtemplate>
<asp:checkbox id="checkbox2" runat="server" onclick="selectedsingle(this);" />
</itemtemplate>
</asp:templatefield>
<asp:templatefield>
<headertemplate>
id
</headertemplate>
<itemstyle horizontalalign="right" />
<itemtemplate>
<%# eval("id") %>
</itemtemplate>
</asp:templatefield>
<asp:templatefield>
<headertemplate>
type
</headertemplate>
<itemtemplate>
<%# eval("type") %>
</itemtemplate>
</asp:templatefield>
<asp:templatefield>
<headertemplate>
content
</headertemplate>
<itemtemplate>
<%# eval("content") %>
</itemtemplate>
</asp:templatefield>
</columns>
</asp:gridview>

接下来，还得通过default.aspx.cs页面为gridview绑定数据。
复制代码 代码如下:

using system;
using system.collections.generic;
using system.linq;
using system.web;
using system.web.ui;
using system.web.ui.webcontrols;
using insus.net;
public partial class _default : system.web.ui.page
{
protected void page_load(object sender, eventargs e)
{
if (!ispostback)
data_binding();
}
private void data_binding()
{
this.gridviewcouplets.datasource = getdata();
this.gridviewcouplets.databind();
}
}

在上面的html代码中，可以看有两个checkbhox，一个是放在gridview的headertemplate模版上为了全选，另一个是放在itemtemplate模版上为了单选。

每一个checkbox都有一个onclick事件，可参考如下javascript代码：

复制代码 代码如下:

<script type="text/javascript">
function selectedall(cb) {
cb.checked = cb.checked ? false : true;
var gv = document.getelementbyid('<%=gridviewcouplets.clientid %>');
var rc = gv.rows.length;
for (var i = 1; i < rc; i++) {
var input = gv.rows[i].cells[0].getelementsbytagname("input");
if (input[0].type == "checkbox" && input[0].checked) {
input[0].checked = false;
gv.rows[i].style.backgroundcolor = "";
}
else {
input[0].checked = true;
gv.rows[i].style.backgroundcolor = "#66ff33;";
}
}
}
function selectedsingle(cb) {
var row = cb.parentnode.parentnode;
if (cb.checked) {
row.style.backgroundcolor = "#66ff33;";
}
else {
row.style.backgroundcolor = "";
}
}
</script>

您可能感兴趣的文章:

如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网