pivottable在表格中显示html

Question

I am trying to use https://github.com/nicolaskruchten/pivottable , basically I want to show image in the table. 我正在尝试使用https://github.com/nicolaskruchten/pivottable ，基本上我想在表格中显示图像。 What I've done so far is ; 到目前为止我所做的是; but it wont display the image as img tag instead it considers it as string 但它不会将图像显示为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>

Answer 1

Since the table renderer does not support html values for th elements, it sets explicitely the textContent property of th you must create your own renderer. 由于表格渲染器不支持th元素的html值，因此它明确设置了textContent属性，您必须创建自己的渲染器。 You have two choices: 你有两个选择：

1.Create a renderer based on Table renderer code and change textContent to innerHTML . 1.根据表格渲染器代码创建渲染器，并将textContent更改为innerHTML 。 I will use a jsfiddle snippet since the render function is pretty big: http://jsfiddle.net/u3pwa0tx/ 我将使用一个jsfiddle代码段，因为渲染函数非常大： http ： //jsfiddle.net/u3pwa0tx/

2.Reuse existing Table renderer which displays the html as plain text but before returning it to the parent to be appended, move all th text to th html. 2.重用现有的表格渲染器，它将html显示为纯文本，但在将其返回到要附加的父项之前，将所有文本移动到html。

Edit : I created a pull request on main repository https://github.com/nicolaskruchten/pivottable/pull/214 编辑：我在主存储库上创建了一个拉取请求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
            }
        }
    );
 });

pivottable在表格中显示html

问题描述

1 个解决方案

解决方案1
4 已采纳 2014-09-23 20:17:48

pivottable在表格中显示html

问题描述

1 个解决方案

解决方案1 4 已采纳 2014-09-23 20:17:48

解决方案1
4 已采纳 2014-09-23 20:17:48