4

https://github.com/nicolaskruchten/pivottableを使用しようとしていますが、基本的にはテーブルに画像を表示したいです。私がこれまでに行ったことは次のとおりです。ただし、画像をimgタグとして表示するのではなく、文字列と見なします

<body>
<script type="text/javascript">
$(function(){
    $("#output").pivotUI(
        [ 
            {product: "product1", image: "<img src='image1' alt='' height='42' width='42'>"}, 
            {product: "product2", image: "<img src='image2' alt='' height='42' width='42'>"}
        ]
    );
});
</script>

<p><a href="http://nicolas.kruchten.com/pivottable/examples/index.html">« back to examples</a></p>
<div id="output" style="margin: 10px;"></div>
</body>
4

1 に答える 1

5

テーブル レンダラーは th 要素の html 値をサポートしていないtextContentため、独自のレンダラーを作成する必要がある th のプロパティを明示的に設定します。次の 2 つの選択肢があります。

1. テーブル レンダラー コードに基づいてレンダラーを作成し、 に変更textContentしinnerHTMLます。render 関数は非常に大きいため、jsfiddle スニペットを使用します: http://jsfiddle.net/u3pwa0tx/

2.htmlをプレーンテキストとして表示する既存のテーブルレンダラーを再利用しますが、追加するために親に返す前に、すべてのテキストをhtmlに移動します。

編集：メインリポジトリにプルリクエストを作成しましたhttps://github.com/nicolaskruchten/pivottable/pull/214

$(function(){
    var rendererHtml = function(){
        var result = pivotTableRenderer2.apply(this,arguments);
        $(result).find('th').each(function(index,elem){
            var $elem = $(elem);
            $elem.html($elem.text());
        })
        return result;
    }

    $("#output").pivotUI(
        [ 
            {product: "product1", image: "<img src='image1' alt='' height='42' width='42'>"}, 
            {product: "product2", image: "<img src='image2' alt='' height='42' width='42'>"}
        ],{
            renderers:{
                'table2Renderer': rendererHtml
            }
        }
    );
 });
于 2014-09-23T20:17:48.560 に答える