Question

我是一个HTML数据表，我使用＆＃39; foreach＆＃39;使用knockout js将数据填充到数据表中。这是我的代码。

<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title></title>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.12  /css/jquery.dataTables.min.css" />
<script src="~/Scripts/jquery-1.7.1.js"></script>
<script src="~/Scripts/knockout-3.4.0.js"></script>
<script src="~/Scripts/knockout.mapping-latest.js"></script>
<script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>  
</head>
<body>
 <div id="dvMain">
    <table style="width: 300%">
        <tr>               
            <td>
                <table id="tblmain">
                    <tr id="trCategory" data-bind="visible: flagCategory">
                        <td>
                            <table>                                    
                                <tr id="InsertUpdateCategory" data-bind="visible: flagInsertCategory">
                                    <td>
                                        <table>
                                            <tr>
                                                <td>Category Name : </td>
                                                <td>
                                                    <input type="text" id="txtCategoryName" maxlength="100" data-bind="value: txtCategoryName" />
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>Is Active : </td>
                                                <td>
                                                    <input type="checkbox" id="chkIsActiveCategory" data-bind="checked: chkCategoryActive" />
                                                </td>
                                            </tr>
                                            <tr>
                                                <td></td>
                                                <td>
                                                    <button id="btnSaveCategory" data-bind="click: SaveCategory">Save</button>
                                                    <input type="hidden" id="hdnCategoryId" />
                                                    <button id="btnCancelCategory" data-bind="click: CancelCategory">Cancel</button>
                                                </td>
                                            </tr>
                                        </table>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <table style="width: 300%" id="tblCategory">
                                            <thead>
                                                <tr>
                                                    <th style="width: 100%">Category Name</th>
                                                    <th style="width: 100%">Is Active</th>
                                                    <th style="width: 100%">Edit</th>
                                                    <th style="visibility: hidden">CategoryId</th>
                                                    <th style="visibility: hidden">MgaCode</th>
                                                </tr>
                                            </thead>
                                            <tbody data-bind="foreach: CategoryCollection()">
                                                <tr>
                                                    <td data-bind="text: CategoryName"></td>
                                                    <td data-bind="text: IsActive"></td>
                                                    <td><a id="hrefEditCategory" data-bind="click: function () { ViewModel.EditCategory($data); }">Edit</a></td>
                                                    <td data-bind="text: MGACategoryId" style="display: none"></td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </td>
                                </tr>
                            </table>
                        </td>
                    </tr>                

                </table>
            </td>
        </tr>
    </table>
 </div>
</body>

<script type="text/javascript">

 var SelectedCategory = 0;
 var CategoryId = 0;

 var row = {

    CategoryName: "",
    IsActive: false,      
    MGACategoryId: null,
    MGACode: null       
 };

 $(document).ready(function () {

    ViewModel = {
        CategoryCollection: ko.observableArray(),
        flagCategory: ko.observable(true),         
        flagInsertCategory: ko.observable(false),
        EditCategory: ko.observable(),
        txtCategoryName: ko.observable(''),
        chkCategoryActive: ko.observable(false),

        CategoryLink: function () {
            this.flagCategory(true);
            this.flagApplicationForm(false);
            this.flagSubCategory(false);
        },           

        CancelCategory: function () {
            this.flagInsertCategory(false);
            this.txtCategoryName('');
            this.chkCategoryActive(false);
            $('#btnSaveCategory').text('Save');
        },                
        EditCategory: function (data) {
            debugger;
            this.flagInsertCategory(true);
            this.txtCategoryName(data.CategoryName);
            this.chkCategoryActive(data.IsActive);
            CategoryId = data.MGACategoryId;
            $('#btnSaveCategory').text('Update');
            row = data;
        },

        SaveCategory: function () {
            debugger;
            var id = CategoryId;
            var name = this.txtCategoryName();
            var isactive = this.chkCategoryActive();

            if ($('#btnSaveCategory').text() == 'Update') {
                row.CategoryName = name;
                row.IsActive = isactive;

                this.CategoryCollection()
                for (var i = 0; i < this.CategoryCollection().length; i++) {
                    if (this.CategoryCollection()[i].MGACategoryId == row.MGACategoryId) {                            
                        this.CategoryCollection()[i].CategoryName=name;
                        this.CategoryCollection()[i].IsActive=isactive;
                    }
                }
            }
            else {
                row.CategoryName = this.txtCategoryName();
                row.IsActive = this.chkCategoryActive();

                this.CategoryCollection.push(row);

                this.flagInsertCategory(false);
            }

        },
    }

    debugger;
    $.ajax({
        type: "GET",
        url: 'Datepicker/GetCategory',
        async: false,
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (response) {
            debugger;
            if (response != null) {
                for (var i = 0; i < response.length; i++) {
                    ViewModel.CategoryCollection().push(response[i]);
                }
            }

        },
        error: function (data) {
            debugger;
        }
    });
    debugger;
    ko.applyBindings(ViewModel);
 });
 </script>
</html>

我想使用表格＆＃39; tblCategory＆＃39;中的编辑链接更新我的表格。 tblCategory的可观察数组是CategoryCollection（）。使用数据库中的JSON数据绑定数据。当我点击编辑按钮＆＃39; trInsertUpdateCategory＆＃39;将显示填充的行数据。当我更新文本框或复选框中的数据并单击更新按钮时，表中未更新数据。但是当我使用该文本框添加新数据时，复选框数据也会插入并显示在表格中。但是更新不适合我，请指导。

Answer 1

不知道这是否是您要找的，但是您的ajax成功功能存在问题。

 success: function (response) {
        debugger;
        if (response != null) {
            for (var i = 0; i < response.length; i++) {
                ViewModel.CategoryCollection().push(response[i]);
            }
        }

    }

尝试将其更改为

 success: function (response) {
        debugger;
        if (response != null) {
            for (var i = 0; i < response.length; i++) {
                ViewModel.CategoryCollection().push(response[i]);
            }
            ViewModel.CategoryCollection.valueHasMutated();
        }

    }

从现在开始，您的可观察数组不会通知订阅者其值已更改

使用Knockout JS更新数据表

1 个答案: