如何让Kendo网格变色

时间:2016-05-03 15:07:20

标签: javascript css kendo-ui kendo-grid

我希望此网格列字段中的所有负值显示为红色,所有正值显示为绿色。此代码用于列对象数组:

.negative_field {
    color: red;
}

.positive_field {
    color: green;
}

CSS

columns

2 个答案:

答案 0 :(得分:2)

模板中存在语法错误:

template: "<font class='#if(Amount < 0) {# negative_field #} else {# positive_field #}'></font>"
                                                        Hash(#) should be closes here ^ 

font标记内,您应该显示您的媒体资源:

<font...>#= Acount #</font>

但是,不是使用font,而是使用div并从列中删除format属性,以便在模板中使用kendo.toString(Acount, 'c')

template: "<div class='currency # if(Amount < 0) {#negative_field# } else { #positive_field# } #'>#=kendo.toString(Amount, 'c') #</div>"

您也可以从列中删除attributes并仅使用css:

.currency {
  text-align: right;
}

Demo

答案 1 :(得分:1)

你是这样做的:

Kendo grid { field: "Amount", title: "Balance", attributes: { style: "text-align: right;" }, template: function (e) { return format_currency(e, "Amount"); } },

var currency = new Intl.NumberFormat('en-US', {
    style: 'currency',
    currency: 'USD',
    minimumFractionDigits: 2,
});

function format_currency(e, property) {
    if (e[property] < 0) {
        return "<span class='negative_field'>" + currency.format(e[property]) + "</span>";
    }
    else if (e[property] === 0) {
        return "<span class='include_spaces'>$    -    </span>";
     }
     else {
        return "<span class='positive_field'>" + currency.format(e[property]) + "</span>";
    }
};

使用Javascript:

.negative_field {
    color: red;
}
.positive_field {
    color: green;
}
.include_spaces {
    white-space: pre;
}

CSS:

.custom