Question

我试图在.NET MVC显示html网格后在客户端添加行和列到淘汰网格

我可以找到一种动态添加行的方法但是无法让网格添加列和行。有没有人知道如何使用knockout动态添加行和列，然后让网格中的数据（包括新的行和列标题）可用于保存到服务器？

<form action='/controller/save'>
<p>There are <span data-bind='text: series().length'>&nbsp;</span> series set</p>
<table data-bind='visible: series().length > 0'>
    <thead>
        <tr>
            <th>---</th>
            <!-- ko foreach: cols -->
            <th data-bind='text:title'></th>
            <!-- /ko -->
            <th><button> Add New Column</button></th>
        </tr>
    </thead>
    <tbody data-bind='foreach: series'>
        <tr>
            <td data-bind='text:name'></td>
            <!-- ko foreach: cols -->
            <td><input class='required'  /></td>
            <!-- /ko -->
            <td><a href='#' data-bind='click: $root.removeSeries'>Delete</a></td>
        </tr>
    </tbody>
</table>

<button data-bind='click: addNewSeries'>Add New Series</button>
<button data-bind='enable: series().length > 0' type='submit'>Save</button>

和js

var ItemModel = function (series) {
    var self = this;
    self.series = ko.observableArray(series);        

    self.addNewSeries = function () {
        self.series.push({
            name: "",
            value: ""
        });
    };

    self.removeSeries = function (series) {
        self.series.remove(series);
    };

    self.save = function (form) {
         ko.utils.postJson($("form")[0], self.items);
    };
};

var viewModel = new ItemModel([
    { name: "2012/13", value: "122345" },
    { name: "2013/14", value: "564543" }
]);
ko.applyBindings(viewModel);


var ColumnModel = function (cols) {
    var self = this;
    self.cols = ko.observableArray(cols);

    var Col = function (title) {
        var self = this;
        self.title = ko.observable(title);

        self.addNewCol = function () {
            self.cols.push(new Col('new'));
        };

    };
};
var columnModel = new ColumnModel([
    { title: "col1" },
    { title: "col2" }
]);
ko.applyBindings(columnModel);

我创建了一个fiddle来显示

Answer 1

你在那里犯了很多错误。你需要使用chrome \ explorer \ firefox工具来调试你的东西。我得到了你的工作，但是

     <form action='/controller/save'>
    <p>There are <span data-bind='text: series().length'>&nbsp;</span> series set</p>
    <div  data-bind='visible: series().length > 0'>
    <table>
        <thead>
            <tr data-bind="foreach: cols">

                <th data-bind='text:$data.title'></th>
            </tr>
            <button data-bind="click:addNewCol"> Add New Column</button>
        </thead>
        <tbody data-bind='foreach: series'>
            <tr>
                <td data-bind='text:name'></td>
    <!-- ko foreach :$root.cols -->
                <!-- ko if: $index() != 0 -->
                <td><input class='required'  /></td>
                <!-- /ko -->
                <!--/ko-->
                <td><a href='#' data-bind='click: $root.removeSeries'>Delete</a></td>
            </tr>
        </tbody>
        </table>
    </div>
    <button data-bind='click: addNewSeries'>Add New Series</button>
    <input type="text" data-bind="value: title"/>
    <button data-bind='enable: series().length > 0' type='submit'>Save</button>
</form>

   $(document).ready(function(){
    var ItemModel = function (series) {
        var self = this;
        self.series = ko.observableArray(series);        

        self.addNewSeries = function () {
            self.series.push({
                name: self.title(),
                value: ""
            });
        };
        self.title=ko.observable();
        self.removeSeries = function () {
          //do something with series
            self.series.remove(this);
        };

        self.save = function (form) {
             ko.utils.postJson($("form")[0], self.items);
        };
        self.cols = ko.observableArray([{ title: "col1" },
        { title: "col2" }]);

        function Col (title) {
            this.title = ko.observable(title);
        };
            self.addNewCol = function () {
                self.cols.push(new Col('new'));
            };


        };


    var viewModel = new ItemModel([
        { name: "2012/13", value: "122345" },
        { name: "2013/14", value: "564543" }
    ]);
    ko.applyBindings(viewModel);


   /* var ColumnModel = function (cols) {

    };
    var columnModel = new ColumnModel([
        { title: "col1" },
        { title: "col2" }
    ]);
    ko.applyBindings(columnModel);
*/

    // Activate jQuery Validation
             //                $("form").validate({ submitHandler: viewModel.save });
});

http://jsfiddle.net/dCfYP/23/

淘汰动态网格，添加列和行

1 个答案: