从 ko.observableArray 动态设置表列 [英] Set table columns dynamically from ko.observableArray
问题描述
我正在尝试基于 ko.observableArray
输出一个数据表,其中返回的列不是预先确定的.
I am trying to output a table of data based on a ko.observableArray
where the columns that are returned are not pre-determined.
我的 observableArray self.userData()[0]
中的一个项目示例是:
A sample of an item from my observableArray self.userData()[0]
would be:
Object {
RowNum: 1,
ID: "123",
Surname: "Bloggs",
Forename: "Joe",
Address line 1: "1 Park Lane"
}
根据用户选择输出的内容,这些列每次都会有所不同.
These columns would be different each time based on what the user has selected to output.
我希望输出中的列标题由数组中的内容决定,所以我想要的输出是:
I want the column headings in my output to be determined by what is present in the array, so my desired output would be:
<table>
<thead>
<tr>
<th>RowNum</th>
<th>ID</th>
<th>Surname</th>
<th>Forename</th>
<th>Address line 1</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>123</td>
<td>Bloggs</td>
<td>Joe</td>
<td>1 Park Lane</td>
</tr>
<!-- repeated for each row -->
</tbody>
</table>
我知道我可以使用 foreach
来重复行和列,但我不确定如何根据我的 observableArray
中存在的内容动态引用它.
I know I can use foreach
to repeat rows and columns but I'm unsure how to reference it dynamically based on what is present in my observableArray
.
目前我有这个基本结构:
At the moment I have this basic structure:
<table>
<thead>
<tr data-bind="foreach: userData [property name] ">
<th>
<span data-bind="text: [property name]"></span>
</th>
</tr>
</thead>
<tbody data-bind="foreach: userData">
<tr data-bind="foreach: userData [property name]>
<td data-bind="text: [property value]">
</td>
</tr>
</tbody>
</table>
推荐答案
你可以这样做:
JS:
var VM = function () {
var self = this;
self.items = ko.observableArray();
self.columnNames = ko.computed(function () {
if (self.items().length === 0)
return [];
var props = [];
var obj = self.items()[0];
for (var name in obj)
props.push(name);
return props;
});
};
var vm = new VM();
ko.applyBindings(vm);
vm.items.push({
'Name': 'John',
'Age': 25
});
vm.items.push({
'Name': 'Morgan',
'Age': 26
});
查看:
<table>
<thead>
<tr data-bind="foreach: columnNames">
<th> <span data-bind="text: $data"></span>
</th>
</tr>
</thead>
<tbody data-bind="foreach: items">
<tr data-bind="foreach: $parent.columnNames">
<td data-bind="text: $parent[$data]"></td>
</tr>
</tbody>
</table>
希望能帮到你.
这篇关于从 ko.observableArray 动态设置表列的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!