EasyUI Forum

Hi.

Have problems finding a solution on this.

Populating datagrid with columns from database. The columns has individual colors depending on the type.

ajax call:
           success: function(data){
            data.forEach(col => {
               if (col.styler){
                  col.styler = eval(col.styler)
               }
            });
            $('#dgList').datagrid({
               columns:[data],
               title: data.titleName
            })
           }

Columns:

    {
        "field": "number",
        "align": "center",
        "styler": "colColor",
        "colorValue": "#ffcccc",
        "title": "Number 1",
        "formatter": "formatTooltip"
    },
    {
        "field": "number",
        "align": "center",
        "styler": "colColor",
        "colorValue": "#c1ffc1",
        "title": "Number 2",
        "formatter": "formatTooltip"
    }

But how to cell style the column based on this individual color

Solution.

Columns: from db (added opacity)

    {
        "field": "number",
        "styler": "columnColorStyler('ffcccc','0.5')",
        "title": "Number 1"
    },
    {
        "field": "number",
        "styler": "colColor",
        "styler": "columnColorStyler('c1ffc1','0.5')",
        "title": "Number 2"
    }


Then these 2 functions.

   function columnColorStyler(color,colorOpacity){
      return function(value){
            return 'background-color:'+hexToRGBA(color, colorOpacity)
      }
   }

   function hexToRGBA(hex, opacity) {
       return 'rgba(' + (hex).match(new RegExp('(.{' + hex.length/3 + '})', 'g')).map(function(l) { return parseInt(hex.length%2 ? l+l : l, 16) }).concat(isFinite(opacity) ? opacity : 1).join(',') + ')';
   }


With this, save an hex color and opacity to db for each column data

If you don't want opacity, use this only

   function columnColorStyler(color){
      return function(value){
            return 'background-color:'+color)
      }
   }