Question

我正在处理表格布局页面，其中列和行将动态填充，而html就像

<h4>Select Columns:</h4>

<hr>
<table>
    <thead>
        <tr data-bind="foreach: gridOptions.columns">
            <th data-bind="text: name"></th>
        </tr>
    </thead>
    <tbody>
        <tr data-bind="foreach: gridData.data">
            <td data-bind="text: name "></td>
        </tr>
    </tbody>
</table>

淘汰模型将类似于

    var vm = {
    gridOptions: {
        columns: [{
            id: '1',
            name: 'Year',
        }, {
            id: '2',
            name: 'Month',
        }, {
            id: '3',
            name: 'Sun',
        }, {
            id: '4',
            name: 'Mon',
        }, ]

    },
    gridData: {
        data: [{
            id: '1',
            name: '2014',
        }, {
            id: '2',
            name: 'July',
        }, {
            id: '3',
            name: 'Study',
        }, {
            id: '4',
            name: 'Read',
        }, ]

    },
};


ko.applyBindings(vm);

我想创建一个模型弹出窗口来编辑表格中的行。只有要编辑的行中的名称和列Sun，Mon的编辑数据就像['Read'，'Sleep'，'Exam'，'Study']

如何创建模型弹出窗口以编辑它并将其保存回db

在这里小提琴：sample fiddle

Answer 1

好的，你需要在这里做很多开发，但要试着指出正确的方向：

为模态中的属性设置modalData视图模型。然后，创建一个rowDblClick自定义绑定使用jquery dblclick事件处理程序对行进行dblclicking 使用该valueAccessor将行中的observable传递给modalDataViewModel 类似的东西：

ko.bindingHandlers.rowDblClick = {
    init: function (element, valueAccessor) {
        $(element).dblclick(function(){
            vm.modalData(ko.mapping.fromJS(valueAccessor().id())); //if vm is your view model
        });
    }
}

然后，您可以在视图模型中使用保存功能执行ajax调用以将modalData发送回服务器

self.saveRowData = function(){
    $.ajax({
        type: "POST",
        url: 'your server url',
        dataType: 'json',
        contentType: 'application/json',
        data: JSON.stringify({ self.modalData() });
}

我希望这会有所帮助，但同样，你还有很多发展要做。

淘汰赛模型表编辑弹出窗口

1 个答案: