1

私はプライム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.) を受け取り、rowDataこの要素を強調表示する必要があるかどうかをチェックする関数を作成します。

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

問題:作成 したものだけを「ハイライト」spanできます。もtdもtr. なんで？span関数が jQuery オブジェクトを返すときに が挿入されるためです。tdそれ以前は、またはにアクセスできません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 に答える