【已答复】Grid改变行样式失败，急需找到原因

小羊羊呀 · 发表于 2017-1-18 09:35:16

有一项目需要改变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">
<f

ageManager 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() +",";
            }
         }
      }

}
}

sanshi · 发表于 2017-1-18 12:49:49

请上传可重现问题完整项目工程

小羊羊呀 · 发表于 2017-1-18 13:40:20

sanshi 发表于 2017-1-18 12:49
请上传可重现问题完整项目工程

附件只能1M内，项目太大，上传不了，还有什么办法吗

小羊羊呀 · 发表于 2017-1-18 14:16:23

sanshi 发表于 2017-1-18 12:49
请上传可重现问题完整项目工程

我拷贝的demo中的代码，实在想不通问题出在哪，你觉得这种情况会是什么造成的，心急啊！！！

sanshi · 发表于 2017-1-18 15:40:57

小羊羊呀发表于 2017-1-18 13:40
附件只能1M内，项目太大，上传不了，还有什么办法吗

可以上传到百度云，然后这里给出下载地址

小羊羊呀 · 发表于 2017-1-18 16:34:54

sanshi 发表于 2017-1-18 15:40
可以上传到百度云，然后这里给出下载地址

非常感谢您关注我的问题，盼望解决
http://pan.baidu.com/s/1dE6UAlV

sanshi · 发表于 2017-1-19 12:18:43

你的页面中，把 x-grid-item 改为 x-grid-row 即可。这个和DOM的层次结构有关：

可能不同的extjs版本生成的css class名称不同，效果：

修改的代码：

<style type="text/css">
.x-grid-row.highlight td
{
background-color: lightblue;
background-image: none;
}
.x-grid-row-selected.highlight td
{
background-color: yellow;
background-image: none;
}
</style>

复制代码

function highlightRows() {
// 增加延迟，等待HiddenField更新完毕
window.setTimeout(function () {
var highlightRows = F(highlightRowsClientID);
var grid = F(gridClientID);
$(grid.el.dom).find('.x-grid-row.highlight').removeClass('highlight');
$.each(highlightRows.getValue().split(','), function (index, item) {
if (item !== '') {
var row = grid.getView().getNode(parseInt(item, 10));
$(row).addClass('highlight');
}
});
}, 100);
}

复制代码

小羊羊呀 · 发表于 2017-1-19 13:32:27

sanshi 发表于 2017-1-19 12:18
你的页面中，把 x-grid-item 改为 x-grid-row 即可。这个和DOM的层次结构有关：

非常感谢！终于知道问题出哪了

		自动登录	找回密码
密码			立即注册

【已答复】Grid改变行样式失败，急需找到原因

本帖子中包含更多资源

本帖子中包含更多资源