如何根据条件突出显示 prime-ui 数据表中的某些行（来自 json 数据）

Question

我正在使用 prime-ui 数据table。如果条件为真，我必须突出显示某些行。此条件取决于我们传递给 table.

的 Json 数据

在这种情况下我们如何指定条件？

$('#divInWhichTableIsRendered').puidatatable({
              columns: [ 
                  {field:'f1', headerText: 'f1', sortable:true}, 
                  {field:'f2', headerText: 'f2', sortable:true},
                  {field:'f3', headerText: 'f3', sortable:true},
                  {field:'f4', headerText: 'f4', sortable:true},
                  {field:'f5', headerText: 'f5', sortable:true}
              ], 
              datasource: ourJson1,
 });

Answer 1

玩了很久，想出了这个'solution'。不幸的是，这不是您想要的确切解决方案。问题解决后我再说明。

1.) 我们需要使用列定义的属性 content。

content: A function that takes row data and expects a string or a jQuery object to customize the cell.

2.) 在每一列上使用内容：

{
    field: 'vin',
    headerText: 'Vin',
    sortable: true,
    content: function(rowData) {
        return contentFunc(rowData, 'vin');
    }
}

3.) 编写一个接受 rowData 的函数并检查是否必须突出显示此元素。

function contentFunc(rowData, prop) {
    var result = $("<span />").html(rowData[prop]);
    if (rowData.highlight) {
        result.css('background', 'red');
    }
    return result;
}

问题： 我们只能 'highlight' 我们创建的 span。 td 和 tr 都不是。为什么？因为 span 函数 returns 时插入了 jQuery 对象。在此之前，我们无法访问 td 或 tr。我不知道我们可以添加一些回调来完成它。（一个 hack 将是鼠标悬停在整个视口上并调用一个函数，但这是一个 hack 恕我直言。）

把这一切放在一起：

<div id="tbllocal"></div>

var ourJson1 = [{
    'highlight': false,
    'brand': 'Volkswagen',
    'year': 2012,
    'color': 'White',
    'vin': 'dsad231ff'
}, {
    'highlight': true,
    'brand': 'Audi',
    'year': 2011,
    'color': 'Black',
    'vin': 'gwregre345'
}, {
    'highlight': false,
    'brand': 'Renault',
    'year': 2005,
    'color': 'Gray',
    'vin': 'h354htr'
}, {
    'highlight': false,
    'brand': 'Bmw',
    'year': 2003,
    'color': 'Blue',
    'vin': 'j6w54qgh'
}, {
    'highlight': false,
    'brand': 'Mercedes',
    'year': 1995,
    'color': 'White',
    'vin': 'hrtwy34'
}, {
    'highlight': false,
    'brand': 'Opel',
    'year': 2005,
    'color': 'Black',
    'vin': 'jejtyj'
}, {
    'highlight': true,
    'brand': 'Honda',
    'year': 2012,
    'color': 'Yellow',
    'vin': 'g43gr'
}, {
    'highlight': false,
    'brand': 'Chevrolet',
    'year': 2013,
    'color': 'White',
    'vin': 'greg34'
}, {
    'highlight': false,
    'brand': 'Opel',
    'year': 2000,
    'color': 'Black',
    'vin': 'h54hw5'
}, {
    'highlight': false,
    'brand': 'Mazda',
    'year': 2013,
    'color': 'Red',
    'vin': '245t2s'
}];

$('#tbllocal').puidatatable({
    caption: 'Local Datasource',
    columns: [{
        field: 'vin',
        headerText: 'Vin',
        sortable: true,
        content: function(rowData) {
            return contentFunc(rowData, 'vin');
        }
    }, {
        field: 'brand',
        headerText: 'Brand',
        sortable: true,
        content: function(rowData) {
            return contentFunc(rowData, 'brand');
        }
    }, {
        field: 'year',
        headerText: 'Year',
        sortable: true,
        content: function(rowData) {
            return contentFunc(rowData, 'year');
        }
    }, {
        field: 'color',
        headerText: 'Color',
        sortable: true,
        content: function(rowData) {
            return contentFunc(rowData, 'color');
        }
    }],
    datasource: ourJson1,
    content: contentFunc
});

function contentFunc(rowData, prop) {
    var result = $("<span />").html(rowData[prop]);
    if (rowData.highlight) {
        result.css('background', 'red');
    }
    return result;
}

Here is the fiddle

如何根据条件突出显示 prime-ui 数据表中的某些行（来自 json 数据）

how to highlight certain rows in prime-ui datatable, depending on a condition (from the json data )

json

prime-ui