使用Knockout.js的动态表

Question

我正在创建一个动态表，说有列A，B，C并用数据填充它，我也有一个列表框，其中我有A，B，C作为复选框，所以基于所选的复选框，我显示列，例如我从列表框中选择了B，C然后我只能为B，C而不是A创建表，为这个场景创建jquery模板，使用Knockout.js进行数据绑定是我正在寻找的，但我怀疑模板是否可以在这种情况下使用，因为我的表太动态了。所以我的问题是在这种情况下是否可以使用knockout。如果不是那么我使用普通jquery的方法将是正确的选择。

如果我遵循jquery方法，我将分离View和ViewModel的想法将是一个问题，因为在这种情况下View Model将具有jquery相关的视图操作

任何样本都非常有用。

谢谢和问候， Sajesh Nambiar

Answer 1

您可以使用knockout轻松隐藏/显示表格列。一种简单但有效的方法是使用列上的visible绑定来控制其可见性。

这是一个演示这个想法的小提琴：http://jsfiddle.net/Ex9J9/42/

编辑 - 更新了用Knockout资源修复404错误

的小提琴

查看：

<h4>Select Columns:</h4>
<ul data-bind="foreach: gridOptions.columns">
    <li>
        <label>
            <input type="checkbox" data-bind="checked: isVisible" /> <span data-bind="text: header"></span>
        </label>
    </li>
</ul>
<hr>
<table>
    <thead>
        <tr data-bind="foreach: gridOptions.columns">
            <th data-bind="visible:isVisible, text: header"></th>
        </tr>
    </thead>
    <tbody data-bind="foreach: people">
        <tr data-bind="foreach: $parent.gridOptions.columns">
            <td data-bind="text: $parent[dataMember], visible:isVisible"></td>
        </tr>
    </tbody>
</table>

查看模型：

var vm = {
    gridOptions: {
        columns: [{
            header: 'First Name',
            dataMember: 'firstName',
            isVisible: ko.observable(true)
        }, {
            header: 'Last Name',
            dataMember: 'lastName',
            isVisible: ko.observable(true)
        }]
    },

    people: [{
        firstName: 'Bert',
        lastName: 'Bertington'
    }, {
        firstName: 'Charles',
        lastName: 'Charlesforth'
    }, {
        firstName: 'Denise',
        lastName: 'Dentiste'
    }]
};

ko.applyBindings(vm);

Answer 2

如果选项很小，如3左右，您可以创建三个模板，然后在页面中执行以下操作：

<!-- ko 'if': AIsSelectedAndNotBOrC == true -->
//display the tmeplate
<!-- /ko -->

//为您的其他变体做这个......

这会有效但如果你有很多变化那么它可能太麻烦了。

Answer 3

检查http://www.enigsol.com/smart-ko-grid/。它虽然是付费版本。