FineUI 官方论坛

标题: [分享]FineUI v4.0.5 grid单元格颜色设定与单元格合并 [打印本页]

作者: tarcyshu    时间: 2014-3-31 00:40
标题: [分享]FineUI v4.0.5 grid单元格颜色设定与单元格合并
最近有个小项目初次使用FineUI,感觉灰常强大,一边研究一边学习。
在论坛中及度娘、GG的帮助下,参考FineUI的在线示例,经过多次实验解决了如下两个问题,希望能帮到大伙:
1. grid单元格颜色设定
我是想实现当表格中的“是否年检”列的值为“未年检”时将字体标红色。
[attach]4894[/attach]

<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. 单元格合并 (实际使用时需要根据情况判断是否需要执行该函数,否则多刷新几次后面的单元格都删除没了)
[attach]4895[/attach]

// 页面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;
            }
        };


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

作者: 小兵    时间: 2014-3-31 10:08
感谢分享,向楼主学习,致敬。
作者: 甘桂    时间: 2014-3-31 10:34
加上颜色有这么复杂吗?
作者: 甘桂    时间: 2014-3-31 10:36
判断字段的值,进行格式化就行了。
作者: tarcyshu    时间: 2014-3-31 10:52
甘桂 发表于 2014-3-31 10:34
加上颜色有这么复杂吗?

呵呵,刚刚开始学习,还有好多不明白的。
作者: tarcyshu    时间: 2014-3-31 10:54
甘桂 发表于 2014-3-31 10:36
判断字段的值,进行格式化就行了。

查以前的帖子似乎可以用getCell(),在extjs4里面好像消失了,不知道有没有替代的函数。
作者: tarcyshu    时间: 2014-3-31 11:00
getCell( Ext.data.Model record, Ext.grid.column.Column column ) 不知道怎么在fineui里使用,等待指点.
作者: tarcyshu    时间: 2014-3-31 11:40
果然分享出来才知道自己的不足。
测试了如下代码也可以:
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');
            });
        }
作者: sanshi    时间: 2014-3-31 15:11
多谢分享,已颁发“代码共享”勋章
作者: 被放逐    时间: 2014-4-1 14:58
为什么我的record.get('')始终是undefined?
作者: tarcyshu    时间: 2014-4-1 20:07
被放逐 发表于 2014-4-1 14:58
为什么我的record.get('')始终是undefined?

get()里面是字段的ID。
作者: 被放逐    时间: 2014-4-2 14:08
tarcyshu 发表于 2014-4-1 20:07
get()里面是字段的ID。

知道,可就是undefined,结果我用了record.raw[index]倒是可以
作者: erp8@live.cn    时间: 2014-4-14 20:49
衷心感觉谢!!
作者: zhaochunyu0104    时间: 2014-9-25 16:06
http://www.fineui.com/bbs/forum. ... 5461&highlight=颜色
作者: zbsago    时间: 2015-3-3 01:42
被放逐 发表于 2014-4-2 14:08
知道,可就是undefined,结果我用了record.raw倒是可以

这里用列的clientid
作者: dongyi945    时间: 2015-3-3 09:24
不错,支持撸主分享更多经验
作者: iaimg    时间: 2015-7-14 19:44
此方法碰到BUG有谁使用的吗?
作者: tarcyshu    时间: 2015-7-20 13:55
iaimg 发表于 2015-7-14 19:44
此方法碰到BUG有谁使用的吗?

出现什么问题?
作者: shihahayue    时间: 2015-7-31 17:48
我也要勋章

作者: 幻之达    时间: 2015-10-23 14:11
感谢分享,向楼主学习,致敬。
作者: ☆_雪枫_☆    时间: 2017-3-17 15:46
RowDataBound事件中通过格式化字符串的形式也能赋颜色啊
  1. protected void dgvReport_RowDataBound(object sender, GridRowEventArgs e)
  2.         {
  3.             DataRowView row = e.DataItem as DataRowView;
  4.             if (row != null)
  5.             {
  6.                 e.Values[4] = String.Format(" <span><font color='red'>{0}</font></span>", e.Values[4]);
  7.             }
  8.         }
复制代码





欢迎光临 FineUI 官方论坛 (https://fineui.com/BBS/) Powered by Discuz! X3.4