我有一个通过SignalR + knockout.js
动态填充的表格<table id="infoTable" border="0" class="table table-striped">
<thead style="cursor:pointer">
<tr data-bind="foreach: headers">
<td data-bind="click: $parent.toggleSort, text: title"></td>
</tr>
</thead>
<tbody>
<!-- ko foreach: machines -->
<tr>
<td data-bind="text: machineName"></td>
<td data-bind="text: cpu"></td>
<td data-bind="text: memUsage"></td>
<td data-bind="text: memTotal"></td>
<td data-bind="text: memPercent"></td>
<td>
<div class="demo-container">
<div id="placeholder1" class="demo-placeholder"></div>
</div>
</td>
</tr>
</tbody>
</table>
我想以某种方式添加一个新单元格并将MemPercent绘制到此单元格中的图表(flotchart.org)。
如何添加?
在静态情况下,图表可以这样做:
var container1 = $("#placeholder1");
var plot1 = $.plot(container1, dataSeries, {
series: {
shadowSize: 0
},
yaxis: {
min: 0,
max: 100
},
xaxis: {
show: false
}
});
function update() {
plot1.setData(series);
plot1.draw();
setTimeout(update, updateInterval);
}
update();
我的问题: 1.如何动态添加带图表的单元格? 2.如何在更新期间访问任何图表容器?
日Thnx。
答案 0 :(得分:1)
您只需使用jQuery
将图表添加到表格行即可$('tbody').append('<tr><td data-bind="text: machineName"></td><td data-bind="text: cpu"></td><td data-bind="text: memUsage"></td><td data-bind="text: memTotal"></td><td data-bind="text: memPercent"></td><td><div class="demo-container"><div id="placeholder1" class="demo-placeholder"></div></div></td></tr>');
我认为您需要在循环中输入此代码。
要将数据放入单元格,您可以使用Ajax Call