FineUI 官方论坛

 找回密码
 立即注册

QQ登录

只需一步,快速开始

本论坛已关闭(禁止注册、发帖和回复)
请移步 三石和他的朋友们

FineUI首页 WebForms - MVC & Core - JavaScript 常见问题 - QQ群 - 十周年征文活动

FineUI(开源版) 下载源代码 - 下载空项目 - 获取ExtJS - 文档 在线示例 - 版本更新 - 捐赠作者 - 教程

升级到 ASP.NET Core 3.1,快、快、快! 全新ASP.NET Core,比WebForms还简单! 欢迎加入【三石和他的朋友们】(基础版下载)

搜索
查看: 4273|回复: 7
打印 上一主题 下一主题

【已答复】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">
    <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() +",";
                }
            }
        }

    }
}




本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
沙发
发表于 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中的代码,实在想不通问题出在哪,你觉得这种情况会是什么造成的,心急啊!!!
5#
发表于 2017-1-18 15:40:57 | 只看该作者
小羊羊呀 发表于 2017-1-18 13:40
附件只能1M内,项目太大,上传不了,还有什么办法吗

可以上传到百度云,然后这里给出下载地址
6#
 楼主| 发表于 2017-1-18 16:34:54 | 只看该作者
sanshi 发表于 2017-1-18 15:40
可以上传到百度云,然后这里给出下载地址

非常感谢您关注我的问题,盼望解决
http://pan.baidu.com/s/1dE6UAlV
7#
发表于 2017-1-19 12:18:43 | 只看该作者

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


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


修改的代码:
  1. <style type="text/css">
  2.       
  3.         .x-grid-row.highlight td
  4.         {
  5.             background-color: lightblue;
  6.             background-image: none;
  7.         }
  8.         
  9.         .x-grid-row-selected.highlight td
  10.         {
  11.             background-color: yellow;
  12.             background-image: none;
  13.         }
  14.     </style>
复制代码

  1. function highlightRows() {
  2.             // 增加延迟,等待HiddenField更新完毕
  3.             window.setTimeout(function () {
  4.                 var highlightRows = F(highlightRowsClientID);
  5.                 var grid = F(gridClientID);

  6.                 $(grid.el.dom).find('.x-grid-row.highlight').removeClass('highlight');

  7.                 $.each(highlightRows.getValue().split(','), function (index, item) {
  8.                     if (item !== '') {
  9.                         var row = grid.getView().getNode(parseInt(item, 10));
  10.                         $(row).addClass('highlight');
  11.                     }
  12.                 });
  13.             }, 100);
  14.         }
复制代码



本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
8#
 楼主| 发表于 2017-1-19 13:32:27 | 只看该作者
sanshi 发表于 2017-1-19 12:18
你的页面中,把 x-grid-item 改为  x-grid-row 即可。这个和DOM的层次结构有关:

非常感谢!终于知道问题出哪了
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|FineUI 官方论坛 ( 皖ICP备2021006167号-1 )

GMT+8, 2024-11-13 14:58 , Processed in 0.050350 second(s), 18 queries , Gzip On.

Powered by Discuz! X3.4

© 2001-2017 Comsenz Inc.

快速回复 返回顶部 返回列表