使用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);