|
Step 1,
这个目前实现起来比较麻烦,参考示例中的使某列居中的做法
- <style type="text/css">
- .x-grid3-hd-ct4
- {
- text-align: center;
- }
- .x-grid3-col-ct4
- {
- text-align: center;
- }
- </style>
复制代码
从这里面我们可以得知,从第0列开始的第4列文本居中,那么,由此得到的启发是我们也可以对某列的样式进行改变,Step 2,
再参考改变行背景的示例,
- <style type="text/css">
- .hightlight
- {
- background-color: lightgreen;
- }
- .hightlight .x-grid3-col
- {
- background-image: none;
- }
-
- .x-grid3-row-selected .hightlight
- {
- background-color: yellow;
- }
- .x-grid3-row-selected .hightlight .x-grid3-col
- {
- background-image: none;
- }
- </style>
复制代码 从这里可以看出,对行的样式进行了设置,
前台页面中可以看出有个隐藏域,
- <ext:HiddenField ID="highlightRows" runat="server">
- </ext:HiddenField>
复制代码
后台代码中,通过条件将行索引 添加到隐藏域
- if (entranceYear >= 2006)
- {
- highlightRows.Text += e.RowIndex.ToString() + ",";
- }
复制代码
实际操作高亮的代码在这里,获取隐藏域的值,和gird的客户端id,对高亮显示的行添加css类
- <script type="text/javascript">
- function onReady() {
- var highlightRows = Ext.getCmp('<%= highlightRows.ClientID %>');
- var grid1 = Ext.getCmp('<%= Grid1.ClientID %>');
- grid1.addListener('viewready', function () {
- Ext.each(highlightRows.getValue().split(','), function (item, index) {
- if (item !== '') {
- var row = grid1.getView().getRow(parseInt(item, 10));
- Ext.get(row).first().addClass('hightlight');
- }
- });
- });
- }
- </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";
|
|