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

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>

(0)

相关推荐

  • asp.net GridView控件中模板列CheckBox全选、反选、取消

    复制代码 代码如下: using System; using System.Data; using System.Data.SqlClient; using System.Configuration; using System.Collections; using System.Web; using System.Web.Security; using System.Web.UI; using System.Web.UI.WebControls; using System.Web.UI.WebC

  • gridview和checkboxlist的嵌套相关应用

    复制代码 代码如下: <script type="text/javascript"> function CheckBoxList1_Click(obj) { if(obj<10) { var vv="ctl00_PageBody_gvItem_ctl0"+obj+"_CheckBox1"; } else if(obj>=10 && obj<=99) { var vv="ctl00_PageB

  • asp.net checkbox 动态绑定id GridView删除提示

    asp.net checkbox 动态绑定id 复制代码 代码如下: <input id='<%# "courseNo"+Eval("courseNo") %>' type="checkbox" onclick="return Click()"/> GridView删除提示 复制代码 代码如下: <div id="del" onClick="return confir

  • DataGridView中CheckBox实现某一列单选

    复制代码 代码如下: private void dgvChannel_CellClick(object sender, DataGridViewCellEventArgs e)        {            if (e.ColumnIndex == -1 || e.RowIndex == -1) return;            int x = dgvChannel.CurrentCell.ColumnIndex;//获取鼠标的点击列            if (x == 0)/

  • ASP.NET Gridview与checkbox全选、全不选实现代码

    1. 页面 在onclick事件中 "传自己" 复制代码 代码如下: <asp:TemplateField HeaderText="全选"> <HeaderTemplate> <input type="checkbox" id="CheckBox1" name="CheckBox1" onclick="GetAllCheckBox(this)" />

  • Asp.net 中使用GridView控件实现Checkbox单选

    在GridView控件中,第0列有放一个CheckBox控件,现想实现对CheckBox进行单选. 先看看效果: 在ASPX页面,可以这样做: 有一点注意的是需要使用OnRowCreated事件. 在ASPX.cs代码里,实现上面OnRowCreated事件: 上面有个事件委托: Ok,特简单的.全部使用服务端来实现,或许前端js也能实现. 以上所述是小编给大家介绍的Asp.net 中使用GridView控件实现Checkbox单选,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回

  • GridView中加上CheckBox 的全选功能的代码

    首先我們當然是要先做出一個有資料的GridViewGridView做好後,我們在後方新增一個樣板欄位(TemplateField)請在新增的樣板欄位中的HeaderTemplate加入一個CheckBox作為全選用,然後在ItemTemplate也加入一個CheckBox 复制代码 代码如下: <asp:TemplateField>                          <HeaderTemplate>                              <

  • GridView的CheckBox列选择及多参数传递三步搞定

    1.GridView的列设置 复制代码 代码如下: <asp:TemplateField HeaderStyle-CssClass="check" ItemStyle-CssClass="check"> <HeaderTemplate> <input type="checkbox" onclick="selectAll(this)" /> 全选 </HeaderTemplate>

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

    Insus.NET对Gridview使用CheckBox单选与全选功能再次进行简单演示,选中的行,使用高亮显示,让用户一目了然看到哪一行被选择了.本例中,使用前端脚本Javascript来实现.还是先看看Insus.NET做出来的效果: Insus.NET原本是从数据库获取数据并绑定至GridView控件的,为了在学asp.net的网友,也能轻易操作,因此这个想法,采用对象存储数据. 首先创建一个对象,[对联]的对象: Couplets.cs 复制代码 代码如下: using System; u

  • asp.net gridview中用checkbox全选的几种实现的区别

    1.ext的grid Ext.grid.CheckboxColumn = function(config){ config.id = config.id || 'ck'; config.columnId = config.id || 'ck'; return Ext.applyIf(config||{},{ init:function(grid){ grid.on('cellclick', this.onCellClick, this); grid.on('headerclick',this.o

  • Jquery CheckBox全选方法代码附js checkbox全选反选代码

    jquery方法如下: 复制代码 代码如下: function CheckAll(val) { $("input[name='chkJob']").each(function() { this.checked = val; }); $("#chkAll").attr("checked", val);//设定全选按钮状态 } val 该参数传递的是全选按钮的选择状态 name='chkJob' 这个为列表中的checkbox名称 chkAll 就为

  • GridView中checkbox"全选/取消"完美兼容IE和Firefox

    复制代码 代码如下: function selectAll(obj) { var theTable = obj.parentNode.parentNode.parentNode.parentNode; var i; var j = obj.parentNode.cellIndex; for(i=1;i<theTable.rows.length;i++) { if(theTable.rows[i].cells.length<j) continue; var objCheckBox = theTa

  • Android RecycleView使用(CheckBox全选、反选、单选)

    本文实例为大家分享了CheckBox全选.反选.单选的具体代码,供大家参考,具体内容如下 MainActiivity package com.bwie.day06; import android.support.v7.app.AppCompatActivity; import android.os.Bundle; import android.support.v7.widget.LinearLayoutManager; import android.support.v7.widget.Recyc

  • vue2.0中vue-cli实现全选、单选计算总价格的实例代码

    由于工作的需要并鉴于网上的vue2.0中vue-cli实现全选.单选方案不合适,自己写了一个简单实用的.就短短的126行代码. <template> <div> <table> <tr> <td><input type="checkbox" v-model="checkAll">全选({{checkedCount}})</td> <td>产品名称</td> &

  • jQuery实现表格与ckeckbox的全选与单选功能

    先给大家介绍下jQuery实现表格与ckeckbox的全选与单选功能. 先看看下面的效果: 用户点击头的checkbox时,所有表格数据行的checkbox全选或反选. 当数据行某一行没有选中时,头checkbox去选.当所有数据行的checkbox全选时,头的checkbox也选上. html代码示例,关注高亮部分即可: jQuery代码,可以参考如下: PS:js实现隐藏与显示铵钮功能 表格无数据行时,隐藏下面两个铵钮,反之显示它们,如下面代码示例: jQuery代码: 看看效果:

  • jQuery实现按钮的点击 全选/反选 单选框/复选框 文本框 表单验证

    jQuery实现按钮的点击 全选/反选 单选框/复选框 文本框 表单验证 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <base href="<%=basePath%>"> <title>My JSP 'index.jsp' starting page</title> &l

  • javascript中CheckBox全选终极方案

    在我们的程序开发中经常会要用到CheckBox的全选,通常情况下是在一些数据绑定控件中如Gridview等 下面以Repeater为例,在Repeater的header 和item中放入CheckBox控件 . <asp:Repeater ID="rptGroup" runat="server"> <HeaderTemplate> <table width="100%" cellspacing="1&quo

随机推荐