使用Knockout JS进行Crud操作如何编辑和更新特定数据

问题描述

这是我的viewmodel： 它包含用于在单击添加按钮时显示面板的功能，以及用于读取，添加和删除数据的StudentData功能。

    <script type="text/javascript">
    $(document).ready(function () {
        $("#panelInfo").hide();
    });
    function StudentData(fullName,email,phone,age,address) {
        var self = this;
        self.fullName = ko.observable(fullName);
        self.email = ko.observable(email);
        self.phone = ko.observable(phone);
        self.age = ko.observable(age);
        self.address = ko.observable(address);
    }

    function addStudent() {
        $("#panelInfo").show();
    }

    function studentviewmodel() {
        var self = this;
        self.fullName = ko.observable("");
        self.email = ko.observable("");
        self.phone = ko.observable("");
        self.age = ko.observable("");
        self.address = ko.observable("");

        self.studentList = ko.observableArray([
            {
                fullName: "xyz",email: "[e-mail]",phone: "6767777",age: "21",address: "ajckjackjhka"
            }
        ]);
        self.RemoveList = function (data) {
            self.studentList.remove(data);
        }

        self.EditList = function(data) {
            $("#panelInfo").show();
            $("#updateButton").html("Update");
        }

        self.addStudentData = function () {
            self.studentList.push({
                fullName: self.fullName,email: self.email,phone: self.phone,age: self.age,address: self.address
            });
            $("#panelInfo").hide();
        }
    }

    ko.applyBindings(studentviewmodel);
</script>

这是View： 该视图包含用于显示数据的表格和用于将数据输入到可观察数组的表格

    <div id="studentTable" class="container">
    <div class="row">
        <div class="col-sm-6">
            <h2 class="text-center">Students Record</h2>
        </div>
    </div>
    <div class="row">
        <div class="col-sm-6">
            <table class="table table-bordered table-condensed table-striped">
                <thead>
                    <tr>
                        <th>Student Name</th>
                        <th>Email</th>
                        <th>Phone</th>
                        <th>Age</th>
                        <th>Address</th>
                        <th>Action</th>
                    </tr>
                </thead>
                <tbody data-bind="foreach: studentList">
                    <tr>
                        <td data-bind="text: fullName"></td>
                        <td data-bind="text: email"></td>
                        <td data-bind="text: phone"></td>
                        <td data-bind="text: age"></td>
                        <td data-bind="text: address"></td>
                        <td>
                            <button class="btn-sm btn-block btn btn-primary" data-bind="click: EditList">Edit</button>
                            <button class="btn-sm btn-block btn btn-primary" data-bind="click: RemoveList">Delete</button>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
    <div> <button class="btn btn-primary" onclick="addStudent()">Add</button></div>
    <div class="row" id="panelInfo">
        <div class="col-sm-6">
            <div class="card">
                <div class="card-header">
                    Student information
                </div>
                <div class="card-body">
                    <div class="form-group">
                        <label for="studentName">Student Name</label>
                        <input type="text" data-bind="value: fullName" id="studentName" class="form-control" />
                    </div>
                    <div class="form-group">
                        <label for="studentEmail">Email</label>
                        <input type="text" data-bind="value: email" id="studentEmail" class="form-control" />
                    </div>
                    <div class="form-group">
                        <label for="studentPhone">Phone</label>
                        <input type="url" data-bind="value: phone" id="studentPhone" class="form-control" />
                    </div>
                    <div class="form-group">
                        <label for="studentAge">Age</label>
                        <input type="url" data-bind="value: age" id="studentAge" class="form-control" />
                    </div>
                    <div class="form-group">
                        <label for="studentAddress">Address</label>
                        <input type="url" data-bind="value: address" id="studentAddress" class="form-control" />
                    </div>
                </div>
                <div class="card-footer">
                    <div class="row">
                        <div class="col-xs-12">
                            <button type="button" data-bind="click: addStudentData" id="updateButton" class="btn btn-primary">
                                Add
                            </button>
                            <button type="button" id="cancelButton" class="btn btn-primary" onclick="cancelClick();">
                                Cancel
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

请完成用于编辑和更新此数据的代码。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）