The following is the source code:
Add JS and CSS first
<SCRIPT type = "text/JavaScript" Language = "JavaScript">
Function docheck (FLAG) // select all flag = 1 invert flag = 0
{
VaR inputs = Document. Forms [0]. elements;
For (VAR I = 0; I <inputs. length; I ++)
If (inputs [I]. type = 'checkbox ')
{
If (FLAG)
Inputs [I]. Checked = true;
Else
Inputs [I]. Checked =! Inputs [I]. checked;
}
}
</SCRIPT>
CSS:
. Ellipsis_row {overflow: hidden; width: 300px; white-space: nowrap; text-overflow: ellipsis ;}
. Caseweight {overflow: hidden; width: 20px; white-space: nowrap; color: red; text-align: center; padding-left: 10px ;}
-----------------------------------------
The settings of the gridview control are as follows: In the onrowdatabound = "gvcaselist_rowdatabound" event, the light bar effect is added:
<Asp: gridview id = "gvcaselist" runat = "server" autogeneratecolumns = "false" onrowdatabound = "gvcaselist_rowdatabound">
<Columns>
<Asp: boundfield headertext = "type" datafield = "type">
<Controlstyle width = "80px"/>
</ASP: boundfield>
<Asp: templatefield headertext = "name"> <! -- Convert this column to a template column -->
<Controlstyle width = "300px"/>
<Itemtemplate>
<Div class = "ellipsis_row"> <% # databinder. eval (container. dataitem, "name") %> </div> <! -- A div is used here, and CSS is used to control the width of the column. Extra characters are represented by... -->
</Itemtemplate>
</ASP: templatefield>
<Asp: templatefield headertext = ""> <! -- Convert this column to a template column -->
<Controlstyle width = "20px"/>
<Itemtemplate>
<Div class = "caseweight"> <% # databinder. eval (container. dataitem, "identifier") %> </div> <! -- Display the data of this column in red and change the text style -->
</Itemtemplate>
</ASP: templatefield>
<Asp: templatefield> <! -- Convert this column to a template column -->
<Controlstyle width = "20px"/>
<Headertemplate> <! -- Note that this headertemplate adds two links here for full selection and inverse selection -->
<A onclick = "docheck (0);" href = "#"> invert selection </a> <! -- Invert -->
<A onclick = "docheck (1);" href = "#"> select all </a> <! -- Select all -->
</Headertemplate>
<Itemtemplate>
<Div style = "text-align: center;">
<Asp: checkbox id = "checkbox1" runat = "server"/>
</Div>
</Itemtemplate>
</ASP: templatefield>
</Columns>
</ASP: gridview>
Background beam EffectCode(Note: to add the onrowdatabound = "gvcaselist_rowdatabound" Event)
Protected void gvcaselist_rowdatabound (Object sender, gridviewroweventargs E)
{
If (E. Row. rowtype = datacontrolrowtype. datarow)
{
E. Row. Attributes. Add ("onmouseover", "c = This. style. backgroundcolor; this. style. backgroundcolor = '# ffff80 '");
E. Row. Attributes. Add ("onmouseout", "This. style. backgroundcolor = C ;");
}
}