Insus.net to the GridView using CheckBox radio and the full selection function again for a simple demonstration, the selected row, using highlighting, so that users can see at a glance which line was selected. In this case, the front-end scripting JavaScript is used for implementation. Or first look at the effect of Insus.net:
Insus.net was originally obtained from the database and bound to the GridView control, in order to learn asp.net users can easily operate, so the idea of using objects to store data.
First create an object, [Couplet] object:
Couplets.cs
Copy Code code 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;
}
}
}
object is ready, it is an empty object, so you have to populate the data for the object you just created to make it a real entity.
Copy Code code as follows:
Public list<couplets> GetData ()
{
list<couplets> Couplets = new list<couplets> ();
Couplets C = new Couplets (1, "four word)", "The beginning of a single yuan; ");
Couplets. ADD (c);
c = New Couplets (2, "Four word", "favorable weather; Chengshing and.") ");
Couplets. ADD (c);
c = New Couplets (3, "Four word", "favorable weather; Chengshing and.") ");
Couplets. ADD (c);
c = New Couplets (4, "five words)," "Golden Snake with Rui Cao, Purple Yan newspaper spring." ");
Couplets. ADD (c);
c = New Couplets (5, "five words)", "The Year of the Dragon stays victorious; ");
Couplets. ADD (c);
c = New Couplets (6, "seven words)," "Chen Chuan Ceron old; ");
Couplets. ADD (c);
c = New Couplets (7, "seven word)", "Mountain high water far people increase ambition; snakes connect the spring of the dragon. ");
Couplets. ADD (c);
c = New Couplets (8, "seven words)," "Dragon Dance Shenzhou, the Motherland Take-off Dazhi years." ");
Couplets. ADD (c);
c = New Couplets (9, "seven words)," "Jinshan water diffuse double snake dance, green spring to hundred birds." ");
Couplets. ADD (c);
return couplets;
}
Pull a GridView control on the Default.aspx Web page.
Copy Code code as follows:
<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>
Next, you have to bind the data to the GridView through the Default.aspx.cs page.
Copy Code code 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 above HTML code, you can see that there are two Checkbhox, one is placed on the HeaderTemplate template of the GridView in order to select all, the other is placed on the ItemTemplate template for radio.
Each checkbox has an OnClick event, reference to the following JavaScript code:
Copy Code code 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>
