Jquery 带有KnockoutJS可观察数组的嵌套表'；s（父表和子表）

我正在尝试用KnockoutJS构建一个嵌套的可编辑gridview，但我不知道在哪里使用它，也不知道如何使用它

我从服务器获取JSON数据并使用映射模型映射所需的JSON信息，从而开始了这个过程。我甚至有一个包含所有必需值的父网格。 现在，根据父网格的选择，它应该向子网格传递2个值，然后子JSON方法应该出现。因为它是被击倒的，显然它应该是完全可以观察到的

以下是我迄今为止完成的代码：

var ProductViewmodel;

function bindProductModel(Products) {
    var self = this;
    self.items = ko.mapping.fromJS([]);
    ProductViewmodel = ko.mapping.fromJS(Products.d, self.items);
    console.log(ProductViewmodel);
    ko.applyBindings(ProductViewmodel);
}

function bindModel(data) {
    var self = this;
    self.Locations = ko.mapping.fromJS([]);
    viewModel = ko.mapping.fromJS(data.d, self.Locations);
    console.log(viewModel);
    ko.applyBindings(viewModel);
}

$(document).ready(function () {
    bindProductModel(data);
    $('#child').click(function () {
        bindModel(data2);
        $('#childtable').show();
    });
});

从服务器返回的JSON：

var data = {
    "d": [{
        "__type": "Warehouse.Tracntrace.Members_Only.StockMovement.ProductStagingMethod",
        "ProductSKUID": 2,
        "ProductSKUName": "Decoder 1131",
        "WarehouseID": 1,
        "WarehouseName": "SoftwareDevelopmentTest",
        "SystemAreaName": "Staging",
        "Qty": 5
    }]
};

var data2 = {
    "d": [{
        "__type": "Warehouse.Tracntrace.Members_Only.StockMovement.StockReturnMethod",
        "LotID": 3,
        "LotName": "TestLot3",
        "AreaID": 11,
        "AreaName": "TestArea2L3",
        "BinID": 20,
        "BinName": "Area10Bin1"
    }, {
        "__type": "Warehouse.Tracntrace.Members_Only.StockMovement.StockReturnMethod",
        "LotID": 4,
        "LotName": "TestLot4",
        "AreaID": 15,
        "AreaName": "TestArea2L4",
        "BinID": 24,
        "BinName": "Area14Bin1"
    }, {
        "__type": "Warehouse.Tracntrace.Members_Only.StockMovement.StockReturnMethod",
        "LotID": 2,
        "LotName": "TestLot2",
        "AreaID": 8,
        "AreaName": "TestArea3L2",
        "BinID": 18,
        "BinName": "Area8Bin2"
    }]
};

最后是我的简单表格：

 <table border="1" cellpadding="0" cellspacing="0">
 <tbody data-bind="foreach: items">
   <tr>
   <td>
       <input type="button" name="ShowmetheChild" value="ShowmetheChild" id="child" /></td>
    <td data-bind="text: ProductSKUID"></td>
    <td data-bind="text: ProductSKUName"></td>
    <td data-bind="text: WarehouseID"></td>
    <td data-bind="text: WarehouseName"></td>
    <td data-bind="text: SystemAreaName"></td>
    <td data-bind="text: Qty"></td>
    <div id="childtable" style="display: none";>
        <table>
        <tbody data-bind="foreach: Locations>
        <tr>
           <td data-bind="text: LotName"></td>
           <td data-bind="text: AreaName"></td>
           <td data-bind="text: BinName"></td>
           <td><input type="text" name="Qty" data-bind="text: 0"  /></td>
        </tr>
        </tbody>
        </table>
    </div>
    </tr>

    </tbody>

JavaScript出现了几个问题

最大的问题是在单击ShowMe按钮后添加位置数据造成的。在这种情况下，要使击倒球正常发挥作用并不容易。因此，我修改了代码，以便在执行ko.applyBinding之前将位置数据添加到视图模型中

下面是简化的JavaScript

function bindProductModel(Products) {
    var self = this;
    self.items = ko.mapping.fromJS([]);
    ProductViewmodel = ko.mapping.fromJS(Products.d, self.items);
}

function bindModel(vm, data) {
    vm.Locations = ko.mapping.fromJS(data.d);
}

$(document).ready(function() {
    bindProductModel(data);
    bindModel(ProductViewmodel()[0], data2);
    ko.applyBindings(ProductViewmodel);
    $('#child').click(function() {
        $('#childtable').show();
    });
});​

我在：
上做了一个工作，JavaScript出现了几个问题

最大的问题是在单击ShowMe按钮后添加位置数据造成的。在这种情况下，要使击倒球正常发挥作用并不容易。因此，我修改了代码，以便在执行ko.applyBinding之前将位置数据添加到视图模型中

下面是简化的JavaScript

function bindProductModel(Products) {
    var self = this;
    self.items = ko.mapping.fromJS([]);
    ProductViewmodel = ko.mapping.fromJS(Products.d, self.items);
}

function bindModel(vm, data) {
    vm.Locations = ko.mapping.fromJS(data.d);
}

$(document).ready(function() {
    bindProductModel(data);
    bindModel(ProductViewmodel()[0], data2);
    ko.applyBindings(ProductViewmodel);
    $('#child').click(function() {
        $('#childtable').show();
    });
});​

我在：
Hi photo\u tom整理了一把工作小提琴，谢谢你的回复，我如何才能将子表放在新的表行而不是列中？因此，子表显示在父表下面。我已更新了代码，并创建了此小提琴。我已经在下拉列表中添加了子网格选项，但它不能正常工作。这里是链接：Hi photo_tom，感谢您的回复，我如何才能将子表放在新的表行而不是列中？因此，子表显示在父表下面。我已更新了代码，并创建了此小提琴。我已经在下拉列表中添加了子网格选项，但它不能正常工作。以下是链接：