我正在尝试使用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>
答案 0 :(得分:4)
由于表格渲染器不支持th元素的html值,因此它明确设置了必须创建自己的渲染器的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
}
}
);
});