欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Gridview使用CheckBox全選與單選采用js實(shí)現(xiàn)同時(shí)高亮顯示選擇行

 更新時(shí)間：2013年01月23日 10:18:00   作者：  
Gridview使用CheckBox單選與全選功能再次進(jìn)行簡單演示，選中的行，使用高亮顯示，讓用戶一目了然看到哪一行被選擇了,在項(xiàng)目中很實(shí)用的，開發(fā)中的朋友們可要考慮一下哦
Insus.NET對(duì)Gridview使用CheckBox單選與全選功能再次進(jìn)行簡單演示，選中的行，使用高亮顯示，讓用戶一目了然看到哪一行被選擇了。本例中，使用前端腳本Javascript來實(shí)現(xiàn)。還是先看看Insus.NET做出來的效果：

Insus.NET原本是從數(shù)據(jù)庫獲取數(shù)據(jù)并綁定至GridView控件的，為了在學(xué)asp.net的網(wǎng)友，也能輕易操作，因此這個(gè)想法，采用對(duì)象存儲(chǔ)數(shù)據(jù)。
首先創(chuàng)建一個(gè)對(duì)象，[對(duì)聯(lián)]的對(duì)象:
Couplets.cs
復(fù)制代碼 代碼如下:

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;
}
}
}

對(duì)象準(zhǔn)備好，它是的空的對(duì)象，所以還得為剛才創(chuàng)建好的對(duì)象，填充數(shù)據(jù)，讓它成為真正的實(shí)體。
復(fù)制代碼 代碼如下:

public List<Couplets> GetData()
{
List<Couplets> couplets = new List<Couplets>();
Couplets c = new Couplets(1, "四字聯(lián)", "一元復(fù)始；萬象更新。");
couplets.Add(c);
c = new Couplets(2, "四字聯(lián)", "風(fēng)調(diào)雨順；國盛人和。");
couplets.Add(c);
c = new Couplets(3, "四字聯(lián)", "風(fēng)調(diào)雨順；國盛人和。");
couplets.Add(c);
c = new Couplets(4, "五字聯(lián)", "金蛇含瑞草；紫燕報(bào)新春。");
couplets.Add(c);
c = new Couplets(5, "五字聯(lián)", "龍年留勝績；蛇歲展宏猷。");
couplets.Add(c);
c = new Couplets(6, "七字聯(lián)", "壬辰傳捷龍辭舊；癸巳報(bào)春蛇迎新。");
couplets.Add(c);
c = new Couplets(7, "七字聯(lián)", "山高水遠(yuǎn)人增志；蛇接龍年地滿春。");
couplets.Add(c);
c = new Couplets(8, "七字聯(lián)", "小龍起舞神州地；祖國騰飛大治年。");
couplets.Add(c);
c = new Couplets(9, "七字聯(lián)", "金山水漫雙蛇舞；綠野春歸百鳥鳴。");
couplets.Add(c);
return couplets;
}

在Default.aspx網(wǎng)頁上拉一個(gè)GridView控件。
復(fù)制代碼 代碼如下:

<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綁定數(shù)據(jù)。
復(fù)制代碼 代碼如下:

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代碼中，可以看有兩個(gè)CheckBhox，一個(gè)是放在GridView的HeaderTemplate模版上為了全選，另一個(gè)是放在ItemTemplate模版上為了單選。

每一個(gè)CheckBox都有一個(gè)OnClick事件，可參考如下Javascript代碼：

復(fù)制代碼 代碼如下:

<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>

相關(guān)文章

  • asp.net獲取服務(wù)器基本信息的方法代碼

    asp.net獲取服務(wù)器基本信息的方法代碼

    在做網(wǎng)站開發(fā)的時(shí)候，常常需要獲取，服務(wù)器的一些基本信息，怎么獲取呢，請(qǐng)參閱下面的簡單介紹：
    2013-07-07
  • ASP.NET 固定標(biāo)題列與欄位的具體實(shí)現(xiàn)

    ASP.NET 固定標(biāo)題列與欄位的具體實(shí)現(xiàn)

    客戶提這個(gè)要求很久了，最近才時(shí)間弄，但是看到百度中要沒有很多詳細(xì)的代碼。廢話不多說直接貼代碼。
    2013-06-06
  • 淺談.Net中的序列化和反序列化

    淺談.Net中的序列化和反序列化

    這篇文章主要介紹了.Net中的序列化和反序列化的相關(guān)資料,文中講解非常細(xì)致，代碼幫助大家更好的理解和學(xué)習(xí)，感興趣的朋友可以了解下
    2020-07-07
  • asp.net的公共變量聲明問題（解決）

    asp.net的公共變量聲明問題（解決）

    前段時(shí)間有個(gè)項(xiàng)目中登錄的時(shí)候碰到了聲明公共變量的情況，用戶類型分為二種類型，所以不同類型用戶登錄的時(shí)候所走的情況不一樣，目前用AB分別代表二類用戶。
    2013-03-03
  • ynamic LINQ創(chuàng)建高級(jí)查詢服務(wù)

    ynamic LINQ創(chuàng)建高級(jí)查詢服務(wù)

    這篇文章主要介紹了ynamic LINQ創(chuàng)建高級(jí)查詢服務(wù)，如何使用Dynamic LINQ輕松實(shí)現(xiàn)更強(qiáng)大的高級(jí)查詢服務(wù)，下面文章內(nèi)容具有一的的參考價(jià)值，需要的小伙伴可以參考一下
    2022-03-03
  • C# 通用文件上傳類

    C# 通用文件上傳類

    C# 通用上傳文件類，需要的朋友可以參考下。
    2009-12-12
  • asp.net圖片上傳實(shí)例

    asp.net圖片上傳實(shí)例

    網(wǎng)站后臺(tái)都需要有上傳圖片的功能，下面的例子就是實(shí)現(xiàn)有關(guān)圖片上傳。缺點(diǎn)：圖片上傳到本服務(wù)器上，不適合大量圖片上傳
    2013-12-12
  • asp.net 圖片的讀寫入庫實(shí)現(xiàn)代碼

    asp.net 圖片的讀寫入庫實(shí)現(xiàn)代碼

    asp.net對(duì)圖片的讀寫，實(shí)現(xiàn)將圖片保存到數(shù)據(jù)庫中，然后再讀取顯示的實(shí)現(xiàn)代碼。
    2009-11-11
  • C#.NET發(fā)送郵件的實(shí)例代碼

    C#.NET發(fā)送郵件的實(shí)例代碼

    這篇文章介紹了C#.NET發(fā)送郵件的實(shí)例代碼，有需要的朋友可以參考一下，希望對(duì)你有所幫助
    2013-07-07
  • asp.net中url字符串編碼亂碼的原因與解決方法

    asp.net中url字符串編碼亂碼的原因與解決方法

    這篇文章來給大家總結(jié)一下關(guān)于asp.net中url字符串編碼亂碼的原因與解決方法，有需要了解的朋友可以參考一下
    2013-08-08

最新評(píng)論