如何更改 shieldGrid 中 shieldProgressBar 的背景颜色

Question

我在 shieldGrid 中定义了以下列：

            { field: "coverage", title: "Coverage", width:'80px',
              columnTemplate: function (cell, item) {
                 var val = item.coverage;
                 $('<div/>').appendTo(cell)
                 .shieldProgressBar({
                            min: 0,
                            max: 100,
                            value: 25 ,
                            text: {
                                enabled: true,
                                template: '<span style="font-size:22px;color:#1E98E4;">{0:n0}%</span> '
                            } ,                    
                  });
               } // end columnTemplate
             } // end field

如何改变本栏目显示的shieldProgressBar的背景颜色，使其与主题颜色不同。在我的代码中，我需要根据网格行的内容改变颜色。

谢谢

Answer 1

在页面顶部的某处定义自定义 CSS class：

<style>
  .my-progress-style {
    /* background color of whole progressbar */
    background-color: red;
  }
  .my-progress-style .sui-progressbar-value {
    /* background color of value part */
    background-color: green;
  }
</style>

然后将此 class 设置为您从中初始化 ProgressBar 的 DIV 元素：

$('<div class="my-progress-style"/>').appendTo(cell)
    .shieldProgressBar({
        min: 0,
        max: 100,
        value: 25 ,
        text: {
            enabled: true,
            template: '<span style="font-size:22px;color:#1E98E4;">{0:n0}%</span>'
        }
    });

如何更改 shieldGrid 中 shieldProgressBar 的背景颜色

How do I change the background color of a shieldProgressBar inside a shieldGrid

shieldui