Поворотный HTML-дисплей в таблице

Question

Поворотный HTML-дисплей в таблице

Я пытаюсь использовать 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

javascript html pivot-table pivottable.js

Источник

user727788 23 сен '14 в 19:02

1 ответ

Решение

Другие вопросы по тегам javascript html pivot-table pivottable.js

user832363 23 сен '14 в 20:17 2014-09-23 20:17 · Accepted Answer · 2014-09-23 20:17

Так как средство визуализации таблиц не поддерживает html-значения для элементов th, оно явно устанавливает textContent Вы должны создать свой собственный рендерер. У вас есть два варианта:

1.Создать рендерер на основе кода рендерера таблиц и изменить textContent в innerHTML, Я буду использовать фрагмент 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
            }
        }
    );
 });