- $.extend(FR,{
- setGroupColors : function(wgt,options){
- var $gps = $('.fr-group-span',wgt.element);
- var $txts = $('.x-text',$gps);
- var dftclr = options[options.length-1].clr;
- var getColor = function(text){
- var clr = dftclr;
- for(var i=0; i<options.length;i++){
- var item = options[i];
- if( text == item.text ){
- clr = item.clr;
- break;
- }
- }
- return clr;
- }
- $txts.each(function(idx,item){
- var clr = getColor( $(item).html() );
- var $pgit = $($gps[idx]);
- var width = $pgit.width()+5;
- var height = $pgit.height()+2;
- $($gps[idx]).css({
- background : clr,
- width : width + 'px',
- height : height + 'px',
- margin : '0px'
- });
- });
- }
- });
复制代码
本质上有两种方法:
第一种是不要用按钮组,用单个的按钮,然后通过JS来实现组的功能,就可以给每个格子单独配置背景色,这样好处是可以导出和打印时保留颜色,缺陷就是当数据源为数据集时比较麻烦。
第二种就是用上面的JS,然后在控件初始化调用:
- setTimeout(function(){
- FR.setGroupColors(this,[
- { text:'A' , clr:'#f00' },
- { text:'B' , clr:'#0F0' },
- { text:'dft', clr:'#FF0' }
- ]);
- },50);
复制代码 缺陷就是只能预览,不能打印和导出。
说明一下:
- [
- { text:'A' , clr:'#f00' },
- { text:'B' , clr:'#0F0' },
- { text:'dft', clr:'#FF0' }
- ]
复制代码 这个数组里面的最后一个元素为默认颜色,其他项为你想单独设置的选项的颜色
|