如何在prime-ui數據表中突出顯示某些行，具體取決於條件（來自json數據）

Question

我正在使用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, 
}); 

Answer 1

玩了一段時間，確實想出了這個'解決方案'。不幸的是，它不是你想要的確切解決方案。我將在解決方案後解釋問題。

1.）我們需要使用colum定義的屬性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; 
} 

問題： 我們只能 '亮點' 的span我們創建。 td也不是tr。爲什麼？因爲當函數返回jQuery對象時，插入span。在此之前，我們無法訪問td或tr。我不知道我們可以添加一些回調來做之後。 （A黑客將其範圍在整個視口和調用功能的鼠標懸停，但是這是一個黑客恕我直言）

把所有這些組合起來：

<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