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

【问题标题】：knockout model table edit popup淘汰赛模型表编辑弹出窗口
【发布时间】：2014-04-02 04:34:01
【问题描述】：

我正在处理表格布局页面，其中列和行将动态填充，而 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']

如何创建一个模型弹出窗口来编辑它并将它们保存回数据库

在这里提琴：sample fiddle

【问题讨论】：

标签： javascript knockout.js

【解决方案1】：

好的，您必须在这里进行很多开发，但要尝试为您指明正确的方向：

为您的模式中的属性提供一个 modalData 视图模型。然后，创建一个 rowDblClick 自定义绑定使用 jquery dblclick 事件处理程序对一行进行 dblclick 使用该 valueAccessor 将行中的 observables 传递到 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() });
}

我希望这会有所帮助，但同样，您还有很多开发工作要做。

【讨论】：