FineUI 官方论坛

 找回密码
 立即注册

QQ登录

只需一步,快速开始

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

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

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

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

搜索
查看: 37676|回复: 20
打印 上一主题 下一主题

[分享]FineUI v4.0.5 grid单元格颜色设定与单元格合并

[复制链接]
跳转到指定楼层
楼主
发表于 2014-3-31 00:40:08 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式
最近有个小项目初次使用FineUI,感觉灰常强大,一边研究一边学习。
在论坛中及度娘、GG的帮助下,参考FineUI的在线示例,经过多次实验解决了如下两个问题,希望能帮到大伙:
1. grid单元格颜色设定
我是想实现当表格中的“是否年检”列的值为“未年检”时将字体标红色。


<script src="../res/js/jquery-1.10.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
var gridClientID = '<%= Grid1.ClientID %>';
function setColor() {
    var grid = F(gridClientID);
    var store = grid.getStore();
    var data = store.data.items;
for (var i = 0; ln = data.length, i < ln; i++) {
        var ann = data.data.annualInspection;//annualInspection为列的ColumnID
        var row = grid.getView().getNode(i);

        if (ann.toString() == "未年检")
               $(row).find('.x-grid-cell-annualInspection').css('color','red');
}

// 页面AJAX回发后执行的函数
        F.ajaxReady(function () {
            setColor();
        });

2. 单元格合并 (实际使用时需要根据情况判断是否需要执行该函数,否则多刷新几次后面的单元格都删除没了)


// 页面AJAX回发后执行的函数
        F.ajaxReady(function () {
            merge(3, 4, 'col', 3);
            merge(0, 4, 'row', 3);
        });

function merge(row, col, type, num) {  //row指起始行数,col指起始列数,type指按行合并还是按列合并,num指要合并的单元格个数
            var grid = F(gridClientID);
            switch (type) {
                case 'row':
                    tds = Ext.get(grid.view.getNode(row)).query('td');
                    Ext.get(tds[col]).set({ rowspan: num });
                    Ext.get(Ext.get(tds[col])).setStyle({ 'vertical-align': 'middle' });
                    for (i = row + 1; i < row + num; i++) {
                        Ext.get(Ext.get(grid.view.getNode(i)).query('td')[col]).destroy();
                    }
                    break;
                case 'col':
                    tds = Ext.get(grid.view.getNode(row)).query('td');
                    Ext.get(tds[col]).set({ colspan: num });
                    Ext.get(Ext.get(tds[col])).select('.x-grid-cell-inner').setStyle({ 'text-align': 'center' });
                    for (i = col + 1; i < col + num; i++) {
                        Ext.get(Ext.get(grid.view.getNode(row)).query('td')[col+1]).destroy();
                    }
                    break;
            }
        };


如果大家有更好的方法可以分享出来一起学习,先谢过了。
注:以上实现方法非我的原创,参考了网上很多资料。

本帖子中包含更多资源

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

x
沙发
发表于 2014-3-31 10:08:56 | 只看该作者
感谢分享,向楼主学习,致敬。
板凳
发表于 2014-3-31 10:34:11 | 只看该作者
加上颜色有这么复杂吗?
地板
发表于 2014-3-31 10:36:33 | 只看该作者
判断字段的值,进行格式化就行了。
5#
 楼主| 发表于 2014-3-31 10:52:14 | 只看该作者
甘桂 发表于 2014-3-31 10:34
加上颜色有这么复杂吗?

呵呵,刚刚开始学习,还有好多不明白的。
6#
 楼主| 发表于 2014-3-31 10:54:39 | 只看该作者
甘桂 发表于 2014-3-31 10:36
判断字段的值,进行格式化就行了。

查以前的帖子似乎可以用getCell(),在extjs4里面好像消失了,不知道有没有替代的函数。
7#
 楼主| 发表于 2014-3-31 11:00:35 | 只看该作者
getCell( Ext.data.Model record, Ext.grid.column.Column column ) 不知道怎么在fineui里使用,等待指点.
8#
 楼主| 发表于 2014-3-31 11:40:31 | 只看该作者
果然分享出来才知道自己的不足。
测试了如下代码也可以:
function setColor1() {
            var grid = F(gridClientID);
            var store = grid.getStore();

            store.each(function (record) {
                if (record.get('annualInspection')=='未年检')
                grid.getView().getCell(record, grid.getView().getGridColumns()[1]).setStyle('color', 'red');
            });
        }
9#
发表于 2014-3-31 15:11:17 | 只看该作者
多谢分享,已颁发“代码共享”勋章
10#
发表于 2014-4-1 14:58:11 | 只看该作者
为什么我的record.get('')始终是undefined?
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

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

GMT+8, 2024-11-1 07:40 , Processed in 0.047948 second(s), 19 queries , Gzip On.

Powered by Discuz! X3.4

© 2001-2017 Comsenz Inc.

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