FineUI v4.0.5 grid单元格颜色设定与单元格合并
最近有个小项目初次使用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;
}
};
如果大家有更好的方法可以分享出来一起学习，先谢过了。
注：以上实现方法非我的原创，参考了网上很多资料。
评论