3

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

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

任何关于此的样本都将非常有用。

谢谢和问候， Sajesh Nambiar

4

2 回答 2

10

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

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

编辑 - 更新小提琴以修复 404 错误与 Knockout 资源

看法：

<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);
于 2013-04-22T01:07:45.017 回答
0

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

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

// 为您的其他变体执行此操作...

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

于 2013-04-22T00:47:18.123 回答