1

我正在使用 prime-ui 数据表。如果条件为真，我必须突出显示某些行。这个条件取决于我们传递给表的 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,
 });
4

1 回答 1

2

玩了一段时间，确实想出了这个“解决方案”。不幸的是，这不是您想要的确切解决方案。解决后我会解释问题。

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.) 编写一个接受rowDataand 检查该元素是否必须突出显示的函数。

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

问题： 我们只能“突出”span我们创建的内容。既不是td也不是tr。为什么？因为span当函数返回 jQuery 对象时被插入。在此之前，我们无法访问tdor tr。我不知道我们可以在之后添加一些回调来做到这一点。（黑客将鼠标悬停在整个视口上并调用一个函数，但这是一个黑客恕我直言。）

把这一切放在一起：

<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;
}

这是小提琴

于 2015-04-29T08:06:00.393 回答