本节内容：
gridview样式设置
gridview在生成html代码时会自动加上style="border-collapse:collapse;"
以及border=1，rules="all"这些属性，这些在ie下都没什么影响，但是在ff下就会影响显示，style="border-collapse:collapse;"；
是由于设置了cellspacing="0"产生的，当设置cellspacing="1"后就没有，可以去掉style="border-collapse:collapse;"；
默认情况下cellspacing="0"，所以默认情况下会有style="border-collapse:collapse;"这个属性生成。
gridlines="both"会带来border=1，rules=all这两个属性，设置gridlines="none"后border=0，rules属性则不会出现。
ms默认的gridview生成html代码的方式本身就没有去兼容各种浏览器，只是特别照顾了自己的ie，其实ms已经给出了解决办法，那就是自己定义控件如何生成html代码，css 控件适配器工具包新版发布 介绍如何配置自己的浏览器定义文件。
如何设置gridview让它在ie和ff下都能正常显示？
1.单元格都有边框线，效果如下：
复制代码 代码示例:
<asp:gridview id="gridview1" runat="server" cellpadding="3" gridlines="none" backcolor="black" cellspacing="1">
<footerstyle backcolor="#c6c3c6" forecolor="black" />
<rowstyle backcolor="#ecf5ff" forecolor="black" />
<selectedrowstyle backcolor="#9471de" font-bold="true" forecolor="white" />
<pagerstyle backcolor="#c6c3c6" forecolor="black" horizontalalign="right" />
<headerstyle backcolor="#a6cbef" font-bold="true" forecolor="#404040" bordercolor="#a6cbef" />
</asp:gridview>
说明：gridlines="all"，cellspacing="0"是造成ff和ie下显示不同的一个很大的原因；其实不进行设置border也是可以达到单元格表现出边框的样式。cellspacing="1"就控制了单元格之间的间隔是1px，通过设置table的背景和tr的背景来表现出单元格td的border，实际上td的border为0，这个看起来很像的border是table的背景，tr的背景仅仅是改变了td的背景，td之间的space则是根据table的背景显示的，这就是cellspacing="1"带来的border效果。这样在ie和ff下都能正常显示了。
2.只有横线，没有竖线的效果：
gridview样式如下设置：需要借助额外的css，gridview自带的类似样式不兼容ff
复制代码 代码示例:
<style type="text/css">
.table{border:solid 1px black}
.table th{border-bottom:solid 1px black;}
.table td{border-bottom:solid 1px black;}
</style>
<asp:gridview id="gridview1" cssclass="table" runat="server" cellpadding="3" gridlines="none" backcolor="#ecf5ff" cellspacing="0">
<footerstyle backcolor="#c6c3c6" forecolor="black" />
<rowstyle backcolor="#ecf5ff" forecolor="black" />
<selectedrowstyle backcolor="#9471de" font-bold="true" forecolor="white" />
<pagerstyle backcolor="#c6c3c6" forecolor="black" horizontalalign="right" />
<headerstyle backcolor="#a6cbef" font-bold="true" forecolor="#404040" bordercolor="#a6cbef" />
</asp:gridview>
3.只有竖线的效果：
更改上面的
复制代码 代码示例:
<style type="text/css">
.table{border:solid 1px black}
.table th{border-right:solid 1px black;}
.table td{border-right:solid 1px black;}
</style>
即可。
更改table样式为：
复制代码 代码示例:
table{border:solid 1px black}
.table th{border:solid 1px black;}
.table td{border:solid 1px black;}
可以实现第一种的显示效果，这才是真的
用css解决asp.net中gridview边框样式问题
html标签中的bordercolor属性指定表格边框颜色之后,无论是表格的四个边框还是表格内部的单元格边框颜色便都设置好了.但是在asp.net的gridview控件中,设置bordercolor之后,在生成的html代码
中是这样表示的:
复制代码 代码示例:
<table class="gridview_m" cellspacing="0" rules="all" border="1" id="ctl00_content_gv_1"
style="border-color:#93c2f1;border-collapse:collapse;">
原来gridview中设置的bordercolor属性是css中的属性,其结果就是gridview的四个边框的颜色变了,但是内部单元格的颜色却是灰色,而不是你指定的颜色.
网上有不少朋友讨论过这个问题,有一种解决方法是用代码给gridview添加真正的bordercolor属性
例如:
this.gridview1.attributes.add("bordercolor", "red");
这样的缺点是不太灵活,如果需要用主题来控制界面样式
而代码中又有这样的语句的话,就不是很合适
利用css提供的机制,可以比较好的解决这个问题
举个例子
在主题中,将gridview的cssclass设置为gridview_m
复制代码 代码示例:
<asp:gridview runat="server" cssclass="gridview_m" >
<headerstyle cssclass="girdview_head" />
<rowstyle cssclass="gridview_row" />
<pagerstyle horizontalalign="center" />
</asp:gridview>
然后在css样式表中设置:
复制代码 代码示例:
table.gridview_m
{
border-collapse: collapse;
border:solid 1px #93c2f1;
width:98%;
font-size:10pt;
}
table.gridview_m td,th
{
border-collapse: collapse;
border:solid 1px #93c2f1;
font-size:10pt;
}
以上css样式中还有其他样式,主要就是这一句:table.gridview_m td,th
将会给class="gridview"的table中的th和td标签应用样式
这样就解决了gridview的边框问题
在gridview中实现隔行样式转换的方法
复制代码 代码示例:
protected void gridview1_rowdatabound(object sender, gridviewroweventargs e)
{
//先设置当鼠标上去时他的背景色改变
e.row.attributes.add("onmouseover", "c=this.style.backgroundcolor;this.style.backgroundcolor='#ff6699'");
//下面再设置当鼠标离开后背景色再还原
e.row.attributes.add("onmouseout", "this.style.backgroundcolor=c;");
/为特定的数改变行样式这也是在这个事件里面，因为这个事件是在数据被绑定时执行的
for (int i = 0; i < gridview1.rows.count; i++)
{
//为了对全部数据行都有用，我们使用循环 //
string lbl = convert.tostring(databinder.eval_r(e.row.dataitem,"state"));
//我们得取出行中state字段绑定的值，用他作为判断条件 //
if (lbl == "bb") if (e.row.rowindex % 2 == 1)
{
//如果他的值等于bb，那么
e.row.backcolor = color.limegreen;
//给当前行的背景色赋值
}
}
}
gridview根据值的变化改变行列样式
根据某列的值改变其样式最好的方法是在gridview的datarowbound事件中想办法。在gridview中的行绑定数据后将立即执行 datarowbound事件。datarowbound事件使用gridviewroweventargs类作为事件变量。通过事件变量你能够利用 gridviewroweventargs属性操作已经绑定数据的行。
复制代码 代码示例:
protected void gridview1_rowdatabound(object sender, gridviewroweventargs e)
{
gridviewrow row = e.row;
}
row将返回tablerow类中的一个gridviewrow对象。
绑定的row有几种不同的类型。例如：datarow, emptydatarow, footer, header, pager 和 separator。通过gridview的rowtype属性可以得到当前行的行类型。rowtype是一组datacontrolrow枚举。
看下面的代码示例，检测gridview列出的行是否为一个标准类型的行。
protected void gridview1_rowdatabound(object sender, gridviewroweventargs e)
{
if (e.row.rowtype == datacontrolrowtype.datarow)
{
//do something!
}
}
可以使用row的cells属性得到其cells，它将返回一个tablecellcollection对象。然后通过 tablecellcollection索引得到特定的cells。tablecellcollection索引将返回一个tabelcell对象，对应于row中的一个cell：
复制代码 代码示例:
protected void gridview1_rowdatabound(object sender, gridviewroweventargs e)
{
if (e.row.rowtype == datacontrolrowtype.datarow)
{
string value = e.row.cells[0].text;
}
}
现在你已经明白了如何得到gridview中某行某列的值,那么根据值的变化改变其样式就比较容易了。以下示例使用 northwind 数据库，通过检测第四列（unitprice）的值是否大于10将其颜色改变为红色。
复制代码 代码示例:
<%@ page language="c#"%>
<%@ import namespace="system.drawing" %>
<!doctype html public "-//w3c//dtd xhtml 1.1//en" "http://www.w3.org/tr/xhtml11/dtd/xhtml11.dtd">
<script runat="server">
protected void gridview1_rowdatabound(object sender, gridviewroweventargs e)
{
if (e.row.rowtype == datacontrolrowtype.datarow)
{
if (decimal.parse(e.row.cells[3].text) > 10)
e.row.cells[3].backcolor = color.red;
}
}
</script>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>untitled page</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:gridview id="gridview1" runat="server" datasourceid="sqldatasource1"
datakeynames="productid" onrowdatabound="gridview1_rowdatabound">
<columns>
<asp:boundfield
readonly="true" headertext="productid" insertvisible="false" datafield="productid"
sortexpression="productid" />
<asp:boundfield headertext="productname" datafield="productname" sortexpression="productname" />
<asp:boundfield headertext="quantityperunit" datafield="quantityperunit" sortexpression="quantityperunit" />
<asp:boundfield headertext="unitprice" datafield="unitprice" sortexpression="unitprice" />
</columns>
</asp:gridview>
<asp:sqldatasource id="sqldatasource1" runat="server" selectcommand="select [productid], [productname], [quantityperunit], [unitprice] from [alphabetical list of products]"
connectionstring="<%$ connectionstrings:appconnectionstring1 %>" />
</div>
</form>
</body>
</html>
