1、实现鼠标点击的行变色
创建报表
1.1、鼠标点击某行时该行高亮显示
JavaScript 代码如下：
_g().addEffect('highlightRow', {color: 'red',trigger: 'mousedown',
});
结果
1.2、鼠标悬浮某行时该行变色，离开时恢复
其他一样，就改代码
JavaScript 代码如下：
_g().addEffect('highlightRow', {color: 'red',trigger: 'mouseover',
});
结果
1.3、鼠标点击某行时该行变色，再次点击恢复
其他一样，就改代码
JavaScript 代码如下：
_g().addEffect('highlightRow',{color: 'red',trigger: 'mousedown',single:false
});
结果
2、实现鼠标点击的列变色
2.1、鼠标点击某列时该列高亮显示
其他一样，就改代码
JavaScript 代码如下：
_g().addEffect('highlightCol', {color: 'red',trigger: 'mousedown',
});
结果
2.2、鼠标悬浮某列时该列变色，离开时恢复
其他一样，就改代码
JavaScript 代码如下：
_g().addEffect('highlightCol', {color: 'red',trigger: 'mouseover',
});
结果
2.3、鼠标点击某列时该列变色，再次点击恢复
其他一样，就改代码
JavaScript 代码如下：
_g().addEffect('highlightCol',{color: 'red',trigger: 'mousedown',single:false
});
结果
3、实现鼠标悬浮同时改变多行背景色
报表预览时，希望鼠标悬浮在表格上时，可以实现同时改变多行背景色，即以多行为一组来改变背景色
其他一样，就改代码和参数
JavaScript 代码如下：
setTimeout(function() {
var move_color='#f0e229';//鼠标悬浮的颜色
var out_color='#FFFFFF';//鼠标离开的颜色
// .x-table td 为 cpt 模板格式
$(".x-table td").mousemove(function() {
//alert('212');var titlecount = title_count; //标题行var rowcount = row_count; //变色行数var id = $(this).attr("id"); //单元格idvar num=id.search("-"); //获取id中“-”符号第一次出现的索引 var id1=id.substr(0,num).replace(/[^0-9]+/ig,""); //截取id值中的行号 var id2=id.substr(num,id.length-num); //截取id var flag = Math.ceil((id1-titlecount) / rowcount); //判断所指行第几组
//计算起始行var rowstart = (flag-1)*rowcount + 1+titlecount;
//计算结尾行var rowend = flag * rowcount + titlecount;
//标题行不变色和所指行第几组判定if(id1>titlecount){
for(var i = rowstart;i<=rowend;i++){
var col1 = "A"+i+id2;
$('td[id^='+col1+']').parent('tr').find("td").css('background-color',move_color);
}
}
});
//下同上
$(".x-table td").mouseout(function() { var rowcount = row_count;var titlecount = title_count;var id = $(this).attr("id"); var num=id.search("-"); //获取id中“-”符号第一次出现的索引 var id1=id.substr(0,num).replace(/[^0-9]+/ig,""); //截取id值中的行号 var id2=id.substr(num,id.length-num); //截取id var b = "A";// alert(b);var flag = Math.ceil((id1-titlecount) / rowcount);
//计算起始行var rowstart = (flag-1)*rowcount + 1 + titlecount;
//计算结尾行var rowend = flag * rowcount + titlecount;
if(id1>titlecount){
for(var i = rowstart;i<=rowend;i++){
var col1 = "A"+i+id2;
$('td[id^='+col1+']').parent('tr').find("td").css('background-color',out_color);
}
}
});
}, 100);
结果
4、实现鼠标点击行与列同时变色
4.1、鼠标点击/悬浮行和列变色离开时恢复
其他一样，就改代码
JavaScript 代码如下：
_g().addEffect('highlightCross', {color: 'red',trigger: 'mouseover',//点击则为mousedown
});
结果
4.2、鼠标点击/悬浮行和列变色，再次点击/悬浮时恢复
其他一样，就改代码
JavaScript 代码如下：
_g().addEffect('highlightCross',{color: 'red',trigger: 'mousedown',//悬浮则为mouseoversingle:false
});
结果
5、实现鼠标点击单元格背景变色
5.1、鼠标点击时单元格变色高亮显示
其他一样，就改代码
JavaScript 代码如下：
_g().addEffect('highlightCell', {color: 'red',trigger: 'mousedown',
});
结果
5.2、鼠标悬浮时单元格变色，离开时恢复
其他一样，就改代码
JavaScript 代码如下：
_g().addEffect('highlightCell',{color: 'red',trigger: 'mouseover'
});
结果
5.3、鼠标点击时单元格变色，再次点击时恢复
其他一样，就改代码
JavaScript 代码如下：
_g().addEffect('highlightCell',{color: 'red',trigger: 'mousedown',single:false
});
结果
6、实现单元格背景圆角
6.1、单元格圆角-整行
其他一样，就改代码
JavaScript 代码如下：
_g().setRadius(35, {row: [1,1],
}, false);
结果
6.2、单元格圆角-整列.
其他一样，就改代码
JavaScript 代码如下：
_g().setRadius(35, {column: [1,1],
}, false);
结果
