Question

我是淘汰赛和JS编程的新手。我返回了一个JSON结果集，这将是两个嵌套数组，这样每个数组的大小可以变化：

listToReturn

[0]数：4 -------＆gt; [0]＆＃34; CHANNEL＆＃34;，[1]＆＃34; HOUR＆＃34;，[2]＆＃34; DATE＆＃34;，[3]＆＃34; TRANSACTION_CNT＆＃34;

[1]数量：122 -----＆gt;

[0] 101，[1] 11，[2] 03/01/2014，[3] 400，

[4] 101，[5] 6，[7] 03/12/2014，[8] 232

（这些是重复上述行的各个值）

我想构建能够很好地显示这些内容的表。从本质上讲，它将处理任何带有可变数量的列和将在表中填充的数据的结果集，如下所示：

CHANNEL HOUR DATE TRANSACTION_CNT

101 12 03/01/2014 400

101 6 03/12/2014 232

我的第一部分是用于列标题：

在ViewModel中：

                $.ajax({
                    type: 'get',
                    url: 'Reports/GetReportData',
                    data: { requestObj: req },
                    contenttype: 'application/json',
                    datatype: 'json',
                    success: function(result) {
                        if (result) {


                            document.getElementById("reportOutputfieldSet").style.display = "block";

                            ko.utils.arrayForEach(result[0], function (data) {
                                self.cnames.push(data.replace(",", " "));
                            });
                            ko.utils.arrayForEach(result[1], function (data) {
                                self.cdata.push(data.replace(",", " "));
                    });

在视图中：

                <tr data-bind="foreach: cnames" style="color: white; background-color: #003399; font-weight: bold; width: 600px">
                    <td data-bind="text: $data" style="width: 25%"></td>
                </tr>

经过多次尝试正确构建数据显示后，我空手而归。我首先尝试通过并获取每个值的唯一值并在UI中显示它们，但这并不起作用。：（

                    var noColumns = result[0].length;

                    var thisArray = function () {
                        if (result[1].length === 0)
                            return [];
                        for (var column = 0; column < result[0].length - 1; column++) {

                            for (var row = column; row < result[1].length - 1; row++) {
                                if (row % noColumns == 0) {
                                    switch (column) {
                                        case 0:
                                            self.columnOne.push(result[1][row]);
                                            break;
                                        case 1:
                                            self.columnTwo.push(result[1][row]);
                                            break;
                                    }
                                }
                            }
                        }
                        return self.columnOne();
                    };

在视图中：

            <tbody>
                <!-- ko foreach: columnOne -->
                <tr style="border-bottom: solid 1px #003399;">
                    <td data-bind="text: $data" style="width: 25%"></td>   
                     <!-- ko foreach: columnTwo -->
                    <td data-bind="text: $data" style="width: 25%"></td>   
                     <!-- /ko -->
                </tr>
                <!-- /ko -->
            </tbody>

我有一种感觉，我需要一个自定义的ko.binding，但真的不知道如何开始使用它。非常感谢任何人的帮助。提前谢谢！

没有名称的阵列列表的Knockout表视图

0 个答案: