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事件中通过格式化字符串的形式也能赋颜色啊

protected void dgvReport_RowDataBound(object sender, GridRowEventArgs e)

      {

         DataRowView row = e.DataItem as DataRowView;

         if (row != null)

         {

            e.Values[4] = String.Format(" <span><font color='red'>{0}</font></span>", e.Values[4]);

         }

      }
复制代码

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