JS修改单选组各个选项背景色【仅限预览】

我是社区第55902位番薯,欢迎点我头像关注我哦~
  1. $.extend(FR,{
  2.         setGroupColors : function(wgt,options){
  3.                 var $gps = $('.fr-group-span',wgt.element);
  4.                 var $txts = $('.x-text',$gps);
  5.                 var dftclr = options[options.length-1].clr;
  6.                 var getColor = function(text){
  7.                         var clr = dftclr;
  8.                         for(var i=0; i<options.length;i++){
  9.                                 var item = options[i];
  10.                                 if( text == item.text ){
  11.                                         clr = item.clr;
  12.                                         break;
  13.                                 }
  14.                         }
  15.                         return clr;
  16.                 }
  17.                 $txts.each(function(idx,item){
  18.                         var clr = getColor( $(item).html() );
  19.                         var $pgit = $($gps[idx]);
  20.                         var width = $pgit.width()+5;
  21.                         var height = $pgit.height()+2;
  22.                         $($gps[idx]).css({
  23.                                 background : clr,
  24.                                 width : width + 'px',
  25.                                 height : height + 'px',
  26.                                 margin : '0px'
  27.                         });
  28.                 });
  29.         }
  30. });
复制代码
1.jpg
本质上有两种方法:
第一种是不要用按钮组,用单个的按钮,然后通过JS来实现组的功能,就可以给每个格子单独配置背景色,这样好处是可以导出和打印时保留颜色,缺陷就是当数据源为数据集时比较麻烦。
第二种就是用上面的JS,然后在控件初始化调用:
  1. setTimeout(function(){
  2.         FR.setGroupColors(this,[
  3.         { text:'A'  , clr:'#f00' },
  4.         { text:'B'  , clr:'#0F0' },
  5.         { text:'dft', clr:'#FF0' }
  6. ]);
  7. },50);
复制代码
缺陷就是只能预览,不能打印和导出。
2.jpg
说明一下:
  1. [
  2. { text:'A' , clr:'#f00' },
  3. { text:'B' , clr:'#0F0' },
  4. { text:'dft', clr:'#FF0' }
  5. ]
复制代码
这个数组里面的最后一个元素为默认颜色,其他项为你想单独设置的选项的颜色






发表于 2017-7-26 12:46:26
测试回复
发表于 2017-7-26 13:50:33
不愧是迈大师
发表于 2017-7-28 09:13:46
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

3回帖数 1关注人数 6512浏览人数
最后回复于:2017-7-28 09:13

返回顶部 返回列表