Vise sortering og hover på Gridview
Denne koden gjør følgende:
- Viser rad som er merket/pekeren er over.
- Viser kolonne som er sortert, både heading og celler
- viser sortert kolonne også ved Hover, med egen style for denne
.CSS
TR.GridHead A { DISPLAY: block; COLOR: #fff}
TH.SortAsc
{
PADDING-RIGHT: 18px;
PADDING-LEFT: 5px;
BACKGROUND: url(../master/images/sort_asc.gif) #c48356 no-repeat right center
}
TH.SortDesc
{
PADDING-RIGHT: 18px;
PADDING-LEFT: 5px;
BACKGROUND: url(../master/images/sort_desc.gif) #c48356 no-repeat right center
}
.SortertRad { BACKGROUND-COLOR:#efefef}
.SortertAltRad { BACKGROUND-COLOR: #e3e3e3}
.SortertRadHover { BACKGROUND-COLOR: #c48356; color: White;}
.SortertAltRadHover { BACKGROUND-COLOR: #c48356; color: White;}
TH.SortAsc
{
PADDING-RIGHT: 18px;
PADDING-LEFT: 5px;
BACKGROUND: url(../master/images/sort_asc.gif) #c48356 no-repeat right center
}
TH.SortDesc
{
PADDING-RIGHT: 18px;
PADDING-LEFT: 5px;
BACKGROUND: url(../master/images/sort_desc.gif) #c48356 no-repeat right center
}
.SortertRad { BACKGROUND-COLOR:#efefef}
.SortertAltRad { BACKGROUND-COLOR: #e3e3e3}
.SortertRadHover { BACKGROUND-COLOR: #c48356; color: White;}
.SortertAltRadHover { BACKGROUND-COLOR: #c48356; color: White;}
tr.oddline, td.oddline {
background-color:#fff;
}
tr.evenline, td.evenline {
background-color:#f2f2f2;
}
background-color:#fff;
}
tr.evenline, td.evenline {
background-color:#f2f2f2;
}
tr.evenlineHover
{
background-color: #f4a376;
}
tr.oddlineHover
{
background-color: #f4a376;
}
{
background-color: #f4a376;
}
tr.oddlineHover
{
background-color: #f4a376;
}
.ASCX
<script language="javascript">
function setHover(tr)
{
if(tr.className.indexOf("Hover")>0)
tr.className=tr.className.substring(0,tr.className.indexOf('Hover'))
else if(tr.className.length>0)
tr.className+="Hover";
var trs = tr.getElementsByTagName('TD');
for(var i=0; i<trs.length; i++)
{
if(trs[i].className.indexOf("Hover")>0)
trs[i].className=trs[i].className.substring(0,trs[i].className.indexOf('Hover'))
else if(trs[i].className.length>0)
trs[i].className+="Hover";
}
}
</script>
{
if(tr.className.indexOf("Hover")>0)
tr.className=tr.className.substring(0,tr.className.indexOf('Hover'))
else if(tr.className.length>0)
tr.className+="Hover";
var trs = tr.getElementsByTagName('TD');
for(var i=0; i<trs.length; i++)
{
if(trs[i].className.indexOf("Hover")>0)
trs[i].className=trs[i].className.substring(0,trs[i].className.indexOf('Hover'))
else if(trs[i].className.length>0)
trs[i].className+="Hover";
}
}
</script>
.CS
HentSortering og Kolonner[] er egne funksjoner/objekter vi har laget.
Man kan i stedet bruke gridview.SortExpression og gridview.SortDirection samt f.eks finne underliggende datafelt og indeks fra dette.
protected void gridview_RowDataBound(object sender, GridViewRowEventArgs e)
{
{
string sortfelt; string retning;
HentSorterering(out sortfelt, out retning);
HentSorterering(out sortfelt, out retning);
if (e.Row.RowType == DataControlRowType.Header)
{
e.Row.Cells[kolonner[sortfelt].Indeks].CssClass =
retning == "ASC" ? "SortAsc" : "SortDesc";
}
else if (e.Row.RowType == DataControlRowType.DataRow)
{
e.Row.Cells[kolonner[sortfelt].Indeks].CssClass = e.Row.RowIndex % 2 == 0 ? "SortertRad" : "SortertAltRad";
if (VisHoverRad)
{
e.Row.Attributes.Add("onmouseover", "this.style.cursor='hand';setHover(this);");
e.Row.Attributes.Add("onmouseout", "setHover(this);");
{
e.Row.Attributes.Add("onmouseover", "this.style.cursor='hand';setHover(this);");
e.Row.Attributes.Add("onmouseout", "setHover(this);");
}
}
Posted by email from Henris blogg (posterous)
Subscribe to:
Post Comments
(
Atom
)
Posts
great
ReplyDelete