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

tarcyshu

最近有个小项目初次使用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;
            }
        };


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

小兵

感谢分享，向楼主学习，致敬。

甘桂

加上颜色有这么复杂吗？

甘桂

判断字段的值，进行格式化就行了。

tarcyshu

甘桂 发表于 2014-3-31 10:34
加上颜色有这么复杂吗？

呵呵，刚刚开始学习，还有好多不明白的。

tarcyshu

甘桂 发表于 2014-3-31 10:36
判断字段的值，进行格式化就行了。

查以前的帖子似乎可以用getCell()，在extjs4里面好像消失了，不知道有没有替代的函数。

tarcyshu

getCell( Ext.data.Model record, Ext.grid.column.Column column ) 不知道怎么在fineui里使用，等待指点.

tarcyshu

果然分享出来才知道自己的不足。
测试了如下代码也可以：
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

多谢分享，已颁发“代码共享”勋章

被放逐

为什么我的record.get('')始终是undefined？