FineUI 官方论坛

标题: 又有一个关于grid 的问题 [打印本页]
作者: dim_$lift    时间: 2012-4-11 17:46
标题: 又有一个关于grid 的问题

就是怎样动态设置 grid 每一个格的字体或背景样式？

protected void Grid1_PreRowDataBound(object sender, ExtAspNet.GridPreRowEventArgs e)
        {
            for (int i = 2; i <= Grid1.Columns.Count; i++)
            {
                if (Grid1.Rows[e.RowIndex].Values[i] != "正")
                {
                    //Grid1.DataKeys[e.RowIndex].to
                }
            }
        }



代码这样，然后里面怎样写？请指教，谢谢。
作者: Landroid    时间: 2012-4-11 22:16
Step 1,
这个目前实现起来比较麻烦，参考示例中的使某列居中的做法

  1.      <style type="text/css">
  2.         .x-grid3-hd-ct4
  3.         {
  4.             text-align: center;
  5.         }
  6.         .x-grid3-col-ct4
  7.         {
  8.             text-align: center;
  9.         }
  10.     </style>
复制代码

从这里面我们可以得知，从第0列开始的第4列文本居中，那么，由此得到的启发是我们也可以对某列的样式进行改变，Step 2,
再参考改变行背景的示例，
  1. <style type="text/css">
  2.         .hightlight
  3.         {
  4.             background-color: lightgreen;
  5.         }
  6.         .hightlight .x-grid3-col
  7.         {
  8.             background-image: none;
  9.         }
  10.         
  11.         .x-grid3-row-selected .hightlight
  12.         {
  13.             background-color: yellow;
  14.         }
  15.         .x-grid3-row-selected .hightlight .x-grid3-col
  16.         {
  17.             background-image: none;
  18.         }
  19.     </style>
复制代码
从这里可以看出，对行的样式进行了设置，
前台页面中可以看出有个隐藏域，
  1. <ext:HiddenField ID="highlightRows" runat="server">
  2.     </ext:HiddenField>
复制代码


后台代码中，通过条件将行索引 添加到隐藏域
  1. if (entranceYear >= 2006)
  2.                 {
  3.                     highlightRows.Text += e.RowIndex.ToString() + ",";
  4.                 }
复制代码

实际操作高亮的代码在这里，获取隐藏域的值，和gird的客户端id，对高亮显示的行添加css类
  1. <script type="text/javascript">
  2.         function onReady() {
  3.             var highlightRows = Ext.getCmp('<%= highlightRows.ClientID %>');

  5.             var grid1 = Ext.getCmp('<%= Grid1.ClientID %>');
  6.             grid1.addListener('viewready', function () {
  7.                 Ext.each(highlightRows.getValue().split(','), function (item, index) {
  8.                     if (item !== '') {
  9.                         var row = grid1.getView().getRow(parseInt(item, 10));
  10.                         Ext.get(row).first().addClass('hightlight');
  11.                     }
  12.                 });
  13.             });
  14.         }
  15.     </script>
复制代码
Step 3,
那么，怎样才能对grid中某一个单元的样式进行设置呢？
查看生成的页面中的元素，可以发现，ExtJs将grid转换成html标签，大致结构如下：
<div class="x-grid3">
.....中间一些div省略
<table class="x-grid3-row-table">
      <tbody>
          <tr>
                <td class="x-grid3-col x-grid3-cell x-grid3-td-ct0">
                       <div class="x-grid3-cell-inner x-grid3-col-ct0">文本内容</div>
                </td>
          </tr>
      </tbody>
</table>
</div>

是我们熟悉的html标签和css，影响文本内容的css class就是x-grid3-cell-inner ！

那么，综合前面三步的分析，设置某一单元格的样式似乎就有了一些思路

我们只要知道某行某列，然后再重新设置 x-grid3-cell-inner 的属性 不就可以了吗？

行可以通过e.RowIndex获取，列我们应该是事先就知道我们要进行修改的那一列的，

然后通过js代码，给某行某列追加 x-grid3-cell-inner

我只提供思路，具体怎么实现，还是要靠你自己了~

要不，我们只能再麻烦 sanshi 给我们添加个这样的属性
Grid1.DataKeys[e.RowIndex][0].CssClass = "XXXXX";

作者: dim_$lift    时间: 2012-4-11 23:18
本帖最后由 dim_$lift 于 2012-4-11 23:27 编辑
要不，我们只能再麻烦 sanshi 给我们添加个这样的属性
Grid1.DataKeys[e.RowIndex][0].CssClass = "XXXXX";
首先多谢 Landroid  兄的悉心指导
但由于本人比较懒，看来只能这样了。。{:soso_e120:}
研究这些太浪费时间了，实现业务逻辑才是我要做的！




作者: Landroid    时间: 2012-4-12 11:05
dim_$lift 发表于 2012-4-11 23:18
首先多谢 Landroid  兄的悉心指导
但由于本人比较懒，看来只能这样了。。
研究这 ...

  其实我也这么觉得



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