如何在knockout.js中向表中添加新行 [英] How to add a new row to a table in knockout.js

问题描述

现在我有一个包含五列的表格。三列是下拉列表和其他两个按钮（用于添加行和删除行）



cshtml代码是：

Hi,

Now i have a table with five columns. Three columns are dropdowns and other two buttons(for add row and remove row)

cshtml code is:

<table class="viewtable">
                  <tbody>
                     <tr>
                        <td></td>
                        <td><select name="property" style="width:150px;" data-bind="value:ViewProperty, options:propertyValues, optionsText:'propertyName', optionsValue:'propertyId'">
                        </select></td>
                        <td><select name="condition" style="width:100px;" data-bind="value:Condition, options:conditionValues, optionsText:'conditionName', optionsValue:'conditionId'">
                        </select></td>
                        <td><select name="value" style="width:150px;" data-bind="value:PropertyValue, options: ViewProperty() == '1' ? categoryValues : ViewProperty()=='2' ? clientValues : ViewProperty()=='3' ? priorityValues : ViewProperty()=='4' ? statusValues : empty, optionsText: ViewProperty() == '1' ? 'Category' : ViewProperty()=='2' ? 'Client' : ViewProperty()=='3' ? 'priorityName' : ViewProperty()=='4' ? 'statusName' : 'empty', optionsValue: ViewProperty() == '1' ? 'CategoryId' : ViewProperty()=='2' ? 'ClientId' : ViewProperty()=='3' ? 'priorityId' : ViewProperty()=='4' ? 'statusId' : 'empty' "></select></td>
                        <td><button class="removeViewDetail" >-</button></td>
                        <td><button class="addViewDetail">+</button></td>
                        <td style="width:900px;" ></td>
                    </tr>
                 </tbody>
                 </table>

Knockout.js代码是：

Knockout.js code is:

var self = this;
    self.ViewProperty = ko.observable();
    self.Condition = ko.observable();
    self.PropertyValue = ko.observable();
    self.empty = "";

     var property = function (name, id) { this.propertyName = name; this.propertyId = id; };
    self.propertyValues = ko.observable([
        new property("Category", 1),
        new property("Client", 2),
        new property("Priority", 3),
        new property("Status", 4)
    ]);

    var condition = function (name, id) { this.conditionName = name; this.conditionId = id; };
    self.conditionValues = ko.observable([
        new condition("is", 1),
        new condition("is not", 2)
    ]);

    self.categoryValues = ko.observable([]);
    $.getJSON("/api/helpdeskapi/getCategory", function (data) {
        self.categoryValues(data);
    });

    self.clientValues = ko.observable([]);
    $.getJSON("/api/helpdeskapi/getClients", function (data) {
        self.clientValues(data);
    });

    var priority = function (name, id) { this.priorityName = name; this.priorityId = id; };
    self.priorityValues = ko.observable([
        new priority("High", 2),
        new priority("Medium", 1),
        new priority("Low", 3)
    ]);

    var status = function (name, id) { this.statusName = name; this.statusId = id; };
    self.statusValues = ko.observable([
        new status("Open", 1),
        new status("Assigned", 2),
        new status("Closed", 3)
    ]);

现在我需要在点击+​​按钮时向表中添加行。

请有人帮助我。我尝试了很多代码，但没有成功。请帮帮我。

Now i need to add rows to the table when the '+' button is clicked.
Please anyone help me. I have tried many codes but not successful. please help me.

推荐答案

.getJSON（ / api / helpdeskapi / getCategory，function（data）{
self.categoryValues（data）;
}）;

self.clientValues = ko.observable（[]）;

.getJSON("/api/helpdeskapi/getCategory", function (data) { self.categoryValues(data); }); self.clientValues = ko.observable([]);

.getJSON（ < span class =code-string> / api / helpdeskapi / getClients，function（data）{
self.clientValues（data）;
}）;

var priority = function（name，id）{ this .priorityName =名称; 此 .priorityId = id; };
self.priorityValues = ko.observable（[
new priority（ < span class =code-string> High， 2 ），
new priority（ Medium， 1 ），
new priority（ Low ， 3 ）
]）;

var status = function（name，id）{ this .statusName =名称; 此 .statusId = id; };
self.statusValues = ko.observable（[
new status（ < span class =code-string>打开， 1 ），
new status（ 已分配， 2 ），
new status（ 已关闭， 3 ）
]）;

.getJSON("/api/helpdeskapi/getClients", function (data) { self.clientValues(data); }); var priority = function (name, id) { this.priorityName = name; this.priorityId = id; }; self.priorityValues = ko.observable([ new priority("High", 2), new priority("Medium", 1), new priority("Low", 3) ]); var status = function (name, id) { this.statusName = name; this.statusId = id; }; self.statusValues = ko.observable([ new status("Open", 1), new status("Assigned", 2), new status("Closed", 3) ]);

现在我需要在点击+​​按钮时向表中添加行。

请有人帮助我。我尝试了很多代码，但没有成功。请帮帮我。

Now i need to add rows to the table when the '+' button is clicked.
Please anyone help me. I have tried many codes but not successful. please help me.

你需要按下按钮点击项目到viewmodel



请参考以下链接。它会有所帮助。 KnockoutJS中的实用程序功能 - JSFiddle [ ^ ]

You need to push the item to viewmodel on button click

Please refer the following link. it will be helpful. Utility functions in KnockoutJS - JSFiddle[^]

这篇关于如何在knockout.js中向表中添加新行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！