|
最近有个小项目初次使用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;
}
};
如果大家有更好的方法可以分享出来一起学习,先谢过了。
注:以上实现方法非我的原创,参考了网上很多资料。
|
本帖子中包含更多资源
您需要 登录 才可以下载或查看,没有帐号?立即注册
x
|