Gridview uses both the CheckBox option and the single-choice option. js is used to simultaneously highlight the selected row.

Insus. NET uses the CheckBox single-choice and full-selection functions to demonstrate the selected row in a simple way. The selected row is highlighted to show the row that has been selected at a glance. In this example, the front-end script Javascript is used. Let's take a look at the effects of Insus. NET:

Insus. NET was originally used to obtain data from the database and bind the data to the GridView control. In order to learn the Internet users of asp.net, the idea is to use Object Storage Data.
First, create an object for the [couplet:
Couplets. cs
Copy codeThe Code is as follows:
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;
}
}
}

The object is empty, so you have to fill in the data for the object you just created to make it a real object.
Copy codeThe Code is as follows:
Public List <Couplets> GetData ()
{
List <Couplets> couplets = new List <Couplets> ();
Couplets c = new Couplets (1, "four-character Association", "one-dollar resumption; Vientiane update. ");
Couplets. Add (c );
C = new Couplets (2, "four-character Association", "Wind, rain, and fortune. ");
Couplets. Add (c );
C = new Couplets (3, "four-character Association", "Wind, rain, fortune, and fortune. ");
Couplets. Add (c );
C = new Couplets (4, "Five-character Association", "golden snake with red grass; Ziyan newspaper Spring Festival. ");
Couplets. Add (c );
C = new Couplets. ");
Couplets. Add (c );
C = new Couplets (6, "", ";. ");
Couplets. Add (c );
C = new Couplets. ");
Couplets. Add (c );
C = new Couplets (8, "Seven-character Association", "Xiaolong danced to the Chinese land, and the motherland took off the great governance year. ");
Couplets. Add (c );
C = new Couplets. ");
Couplets. Add (c );
Return couplets;
}

Pull a GridView control on the Default. aspx webpage.
Copy codeThe Code is as follows:
<Asp: GridView ID = "GridViewCouplets" runat = "server" AutoGenerateColumns = "false">
<Columns>
<Asp: TemplateField>
<HeaderTemplate>
<Asp: CheckBox ID = "CheckBox1" runat = "server" ToolTip = "select all" 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>

Next, bind data to the GridView through the Default. aspx. cs page.
Copy codeThe Code is as follows:
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 ();
}
}

In the preceding html code, we can see that there are two CheckBhox, one is placed on the HeaderTemplate template of the GridView for full selection, and the other is placed on the ItemTemplate template for single choice.

Each CheckBox has an OnClick event. You can refer to the following Javascript code:
Copy codeThe Code is as follows:
<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>