Javascript Knockout.js使用rowspan绑定2D表

这个问题也发布在了网站上，但我也考虑将它发布在这里，因为这里可能会提供帮助的社区更大，而且这个主题仍然相关

我正在开发的应用程序应该允许用户创建表。我有一个视图，用户可以在其中创建一个表。他们应该能够在这里定义表的列。用户添加的列将是某些预定义列类型的一部分：BusinessFields、SourceKeys、SourceAttrs等等，。。。；同时，列应该有一些其他属性来定义它们将包含的值：minlength、minValue、defaultValue

这些表必须有一种格式（至少有一列用于SourceKeys和TargetKeys类别），但这种格式没有那么严格。该图像将有助于描述这一点：

正如您在图中看到的那样，我已经使其正常工作，但我不喜欢我制作绑定的方式。我的代码结构也降低了灵活性（例如：为一行添加单击绑定要困难得多）

JavaScript:

//column definition
function Column(columnName, minLength, maxLength, minValue, maxValue, reg_ex, role, order, defaultValue) {
    var self = {};
    self.name = ko.observable(columnName || 'new column');
    self.minLength = ko.observable(minLength || null);
    self.maxLength = ko.observable(maxLength || null);
    self.minValue = ko.observable(minValue || null);
    self.maxValue = ko.observable(maxValue || null);
    self.reg_exp = ko.observable(reg_ex || null);
    self.role = ko.observable(role ? role : 1);
    self.order = ko.observable(order || null);
    self.defaultValue = ko.observable(defaultValue || null);
    return self;
}

//table definition
function Table() {
    var self = {};
    self.tableName = ko.observable('New table');
    self.tableDescription = ko.observable('description');
    self.businessFields = ko.observableArray([]);
    self.sourceKeys = ko.observableArray([]);
    self.sourceAttr = ko.observableArray([]);
    self.targetKeys = ko.observableArray([]);
    self.targetAttr = ko.observableArray([]);
    self.attrFields = ko.observableArray([]);
    self.technicalFields = ko.observableArray([]);
    return self;
}
//the table
var newTable = ko.observable(Table());
//adding columns to the table
newTable.businessFields.push(Column('col_1'));

HTML:（只有那些有想法的人才够）

名称
最小长度
最大长度
最小值
最大值
正则表达式
默认值
商业领域


源密钥


......
......

---

你对我如何绑定来表示这个2D表有什么想法吗？JavaScript结构不是一个限制，因为我认为将列存储在不同的数组中对于动态数据不是一个好主意。也许每一列都应该有一个变量来标识哪个类别参与其中。因此，应重新构造

newTable

对象。

您可以使用如下列类型对象：

//column definition
function Column(columnName, minLength, maxLength, minValue, maxValue, reg_ex, role, order, defaultValue) {
    var self = {};
    self.name = ko.observable(columnName || 'new column');
    self.minLength = ko.observable(minLength || null);
    self.maxLength = ko.observable(maxLength || null);
    self.minValue = ko.observable(minValue || null);
    self.maxValue = ko.observable(maxValue || null);
    self.reg_exp = ko.observable(reg_ex || null);
    self.role = ko.observable(role ? role : 1);
    self.order = ko.observable(order || null);
    self.defaultValue = ko.observable(defaultValue || null);
    return self;
}

function ColumnType(name) {
    var self = this;
    self.name = ko.observable(name);
    self.columns = ko.observableArray([]);
}
//table definition
function Table() {
    var self = {};
    self.tableName = ko.observable('New table');
    self.tableDescription = ko.observable('description');
    self.columnTypes = ko.observableArray([]);

    self.addColumn = function(columnTypeName, column) {
        console.log('adding column of type ' + columnTypeName);
        var columnType = ko.utils.arrayFirst(self.columnTypes(), function(item) {
            return item.name() == columnTypeName;
        });

        if(!columnType) {
            console.log('Column type ' + columnTypeName + ' does not exist\n Creating new ColumnType object');
            columnType = new ColumnType(columnTypeName);  
            self.columnTypes.push(columnType);
        }

        columnType.columns.push(column);
    }

    return self;
}

// Here's my data model
var ViewModel = function() {
    var self = this;
    //the table
    self.newTable = ko.observable(new Table());
};

var VM = new ViewModel();
ko.applyBindings(VM); 

//adding columns to the table
VM.newTable().addColumn('businessFields', new Column('col_1'));
VM.newTable().addColumn('businessFields', new Column('col_2'));
VM.newTable().addColumn('test', new Column('col_3'));

以及html：

<table class="table table-bordered">
            <thead>
                <tr>
                    <th></th>
                    <th>Name</th>
                    <th>Min Length</th>
                    <th>Max Length</th>
                    <th>Min Value</th>
                    <th>Max Value</th>
                    <th>Regular Expr</th>
                    <th>Default Value</th>
                </tr>
            </thead>
            <tbody data-bind="with: newTable">
                <!-- ko foreach: columnTypes -->
                <tr>
                    <td data-bind="text: name, attr: { rowspan: function(){ if(columns().length == 0) return 1; else return columns().length; }()}"></td>
                    <!-- ko if: columns().length > 0 -->
                    <td><strong data-bind="text: columns()[0].name"></strong></td>
                    <td><span data-bind="text: columns()[0].minLength"></span></td>
                    <td><span data-bind="text: columns()[0].maxLength"></span></td>
                    <td><span data-bind="text: columns()[0].minValue"></span></td>
                    <td><span data-bind="text: columns()[0].maxValue"></span></td>
                    <td><span data-bind="text: columns()[0].reg_exp"></span></td>
                    <td><span data-bind="text: columns()[0].defaultValue"></span></td>
                    <!-- /ko -->
                </tr>
                <!-- ko foreach:  columns -->
                <!-- ko if: $index() !== 0 -->
                <tr>
                    <td><strong data-bind="text: name"></strong></td>
                    <td><span data-bind="text: minLength"></span></td>
                    <td><span data-bind="text: maxLength"></span></td>
                    <td><span data-bind="text: minValue"></span></td>
                    <td><span data-bind="text: maxValue"></span></td>
                    <td><span data-bind="text: reg_exp"></span></td>
                    <td><span data-bind="text: defaultValue"></span></td>
                </tr>
                <!-- /ko -->
                <!-- /ko -->
                <!-- /ko -->
            </tbody>
</table>

名称
最小长度
最大长度
最小值
最大值
正则表达式
默认值

---

我如何将其绑定以获得如图所示的结构？谢谢。这比我所拥有的要好一点，但我会把问题留给其他（更好的）方法（可能是自定义绑定，可能是两个相邻的表）。

<table class="table table-bordered">
            <thead>
                <tr>
                    <th></th>
                    <th>Name</th>
                    <th>Min Length</th>
                    <th>Max Length</th>
                    <th>Min Value</th>
                    <th>Max Value</th>
                    <th>Regular Expr</th>
                    <th>Default Value</th>
                </tr>
            </thead>
            <tbody data-bind="with: newTable">
                <!-- ko foreach: columnTypes -->
                <tr>
                    <td data-bind="text: name, attr: { rowspan: function(){ if(columns().length == 0) return 1; else return columns().length; }()}"></td>
                    <!-- ko if: columns().length > 0 -->
                    <td><strong data-bind="text: columns()[0].name"></strong></td>
                    <td><span data-bind="text: columns()[0].minLength"></span></td>
                    <td><span data-bind="text: columns()[0].maxLength"></span></td>
                    <td><span data-bind="text: columns()[0].minValue"></span></td>
                    <td><span data-bind="text: columns()[0].maxValue"></span></td>
                    <td><span data-bind="text: columns()[0].reg_exp"></span></td>
                    <td><span data-bind="text: columns()[0].defaultValue"></span></td>
                    <!-- /ko -->
                </tr>
                <!-- ko foreach:  columns -->
                <!-- ko if: $index() !== 0 -->
                <tr>
                    <td><strong data-bind="text: name"></strong></td>
                    <td><span data-bind="text: minLength"></span></td>
                    <td><span data-bind="text: maxLength"></span></td>
                    <td><span data-bind="text: minValue"></span></td>
                    <td><span data-bind="text: maxValue"></span></td>
                    <td><span data-bind="text: reg_exp"></span></td>
                    <td><span data-bind="text: defaultValue"></span></td>
                </tr>
                <!-- /ko -->
                <!-- /ko -->
                <!-- /ko -->
            </tbody>
</table>