有一项目需要改变Grid行背景颜色,按照示例代码写的,怎么都不成功。后来把这一功能做到一空项目中,也是不成功,现上传代码,求各位帮忙看看问题出在哪
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="GridTest.aspx.cs" Inherits="Web.GridTest" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css">
.highlight222
{ background-color: black;
}
.x-grid-item.highlight td
{
background-color: black;
background-image: none;
}
.x-grid-item-selected.highlight td
{
background-color: yellow;
background-image: none;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<fageManager ID="ageManager1" runat="server" />
<f:Grid ID="Grid1" Title="表格" EnableCollapse="true" ShowBorder="true" ShowHeader="true"
Width="800px" runat="server" EnableCheckBoxSelect="true" DataKeyNames="Id,Name"
>
<Columns>
<f:RowNumberField />
<f:BoundField Width="100px" DataField="Name" DataFormatString="{0}" HeaderText="姓名" />
<f:BoundField Width="80px" DataField="EntranceYear" HeaderText="入学年份" />
</Columns>
</f:Grid>
<f:HiddenField ID="highlightRows" runat="server">
</f:HiddenField>
</form>
<script src="../Scripts/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
var highlightRowsClientID = '<%= highlightRows.ClientID %>';
var gridClientID = '<%= Grid1.ClientID %>';
function highlightRows() {
// 增加延迟,等待HiddenField更新完毕
window.setTimeout(function () {
var highlightRows = F(highlightRowsClientID);
var grid = F(gridClientID);
$(grid.el.dom).find('.x-grid-item.highlight').removeClass('highlight');
$.each(highlightRows.getValue().split(','), function (index, item) {
if (item !== '') {
var row = grid.getView().getNode(parseInt(item, 10));
$(row).addClass('background-color','black');
}
});
}, 100);
}
// 页面第一个加载完毕后执行的函数
F.ready(function () {
var grid = F(gridClientID);
grid.on('columnhide', function () {
highlightRows();
});
grid.on('columnshow', function () {
highlightRows();
});
grid.getStore().on('refresh', function () {
highlightRows();
});
highlightRows();
});
//// 页面AJAX回发后执行的函数
//F.ajaxReady(function () {
// highlightRows();
//});
</script>
</body>
</html>
namespace Web
{
public partial class GridTest : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
DataBinds();
}
}
private void DataBinds()
{
DataTable dt = new DataTable();
dt.Columns.Add("Name", typeof(string));
dt.Columns.Add("EntranceYear", typeof(string));
DataRow dr = dt.NewRow();
dr[0] = "张三";
dr[1] = "2007";
dt.Rows.Add(dr);
dr = dt.NewRow();
dr[0] = "张四";
dr[1] = "2003";
dt.Rows.Add(dr);
highlightRows.Text = "";
Grid1.DataSource = dt;
Grid1.DataBind();
}
protected void Grid1_RowDataBound(object sender, GridRowEventArgs e)
{
DataRowView row = e.DataItem as DataRowView;
if (row != null)
{
int entranceYear = Convert.ToInt32(row["EntranceYear"]);
if (entranceYear >= 2006)
{
highlightRows.Text += e.RowIndex.ToString() +",";
}
}
}
}
}
|