聚合物,纸数据表的行样式 [英] Polymer, paper-datatable styling of rows
问题描述
我正在尝试为paper-datatable的行着色 使用属性 customRowStyle
I'm trying to colour the rows of paper-datatable using the attribute customRowStyle
此工作表数据表的数据正在工作,行已着色,但行未着色作为单独的聚合物元素封装.
This Plunk of paper-datatable is working, rows are colored, but it's not enclosed as separate Polymer element.
我需要将纸数据表放在单独的元素中.
I need to enclose paper-datatable in separate element.
需要一些帮助来解决此问题:
如何使customRowStyle(item)
在表渲染上被调用并传递item
?
Need some help to fix this:
how to make customRowStyle(item)
to get called on table render and pass the item
?
<paper-datatable data="{{data}}"
custom-row-style="{{generateRowCss}}"
on-row-tap="row_tap">
<paper-datatable-column header="title" property="title"></paper-datatable-column>
<paper-datatable-column header="Calories" property="calories"></paper-datatable-column>
<paper-datatable-column header="Fat (g)" property="fat" ></paper-datatable-column>
</paper-datatable>
...
generateRowCss: function (item) {
console.log('theming_2 generateRowCss:');
var levels = ['#FFFFFF', '#FFEBEE', '#FFCDD2', '#EF9A9A'];
var min = 150;
var max = 450;
var level = Math.floor((item.calories - min) / (max - min) * levels.length);
return 'background:' + levels[level] + ';';
},
朋克(使用@ a1626解决方案).
Plunk with @a1626 solution.
推荐答案
由于传递给customRowStyle
的generateRowCss
是函数,而不是函数的返回值(这是您的代码正在传递的值),因此,我将不得不做这样的事情.不用创建函数generateRowCss
创建具有相同名称的属性,而是将其初始化为Object并将其值返回为整个函数
As generateRowCss
that is passed to customRowStyle
is a function rather than the return value of the function(which is what your code is passing) you'll have to do something like this. Instead of creating a function generateRowCss
create a property with the same name, initialize it as Object and return its value as whole function
properties: {
data: {
type: Array,
notify: true,
value: [
{id: 0, title: 'Frozen yogurt', calories: 159, fat: 6},
{id: 1, title: 'Ice cream sandwich', calories: 237, fat: 9},
{id: 2, title: 'Eclair', calories: 262, fat: 16},
{id: 3, title: 'Cupcake', calories: 305, fat: 3.7},
],
},
generateRowCss:{
type:Object, //this is optional you can skip this also
value:function(){
return function(item){
console.log('app.generateRowCss');
console.log(item);
var levels = ['#FFFFFF', '#FFEBEE', '#FFCDD2', '#EF9A9A'];
var min = 150;
var max = 450;
var level = Math.floor((item.calories - min)/(max-min)*levels.length);
console.log(level);
console.log('background:'+levels[level]+';');
return 'background:'+levels[level]+';';
}
}
}
},
上面粘贴的是自定义元素的properties
.这是有效的 plunkr
Pasted above are the properties
of your custom element. Here is the working plunkr
这篇关于聚合物,纸数据表的行样式的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!