Ktt*_*Ktt 4 html javascript pivot-table pivottable.js
我正在尝试使用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>
由于表格渲染器不支持 th 元素的 html 值，它明确设置textContent了 th的属性，您必须创建自己的渲染器。你有两个选择：
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
}
}
);
});