Question

我正在使用Knockout JS。我有一个下拉列表中的表列列表，从列表中选择一列，更改表列标题style = Display:none。我需要使行也在分页/排序时不显示。一旦列标题设置为display：none，它就会持久进行分页/排序而不是行。这是我的表结构。

<table class="mediaTable dataTableExt">
    <thead>
        <tr>
            <th class="essential persist">
                <a data-bind="click: function () {sortGrid('cust','ConfirmationNumber')}" href="#">@Model.GetLabel("Confirmation #")</a> </th>

            <th class="essential">
                <a data-bind="click: function () {sortGrid('cust','FirstName')}" href="#">@Model.GetLabel("First Name")</a>
            </th>
            <th class="optional">
                <a data-bind="click: function () {sortGrid('cust','LastName')}" href="#">@Model.GetLabel("Last Name")</a>
            </th>

        </tr>
    </thead>
    <!-- ko foreach: customerOrders-->
    <tbody>
        <tr>
            <td class="essential persist" data-bind="text:ConfirmationNumber">
            </td>

            <td class="essential" data-bind="text:CustomerFirstName">
            </td>
            <td class="optional" data-bind="text:CustomerLastName">
            </td>

        </tr>
    </tbody>
    <!-- /ko-->
</table>

Answer 1

您可以使用visible绑定隐藏标题和列数据。

<table class="mediaTable dataTableExt">
    <thead>
        <tr>
            <th class="essential persist" data-bind="visible: $root.hidden() != 'ConfirmationNumber'">
                <a data-bind="click: function () {sortGrid('cust','ConfirmationNumber')}" href="#">@Model.GetLabel("Confirmation #")</a> </th>

            <th class="essential" data-bind="visible: $root.hidden() != 'FirstName'">
                <a data-bind="click: function () {sortGrid('cust','FirstName')}" href="#">@Model.GetLabel("First Name")</a>
            </th>
            <th class="optional" data-bind="visible: $root.hidden() != 'LastName'">
                <a data-bind="click: function () {sortGrid('cust','LastName')}" href="#">@Model.GetLabel("Last Name")</a>
            </th>

        </tr>
    </thead>
    <!-- ko foreach: customerOrders-->
    <tbody>
        <tr>
        <th class="essential persist" data-bind="visible: hidden() != 'ConfirmationNumber'"> <a data-bind="click: function () {sortGrid('cust','ConfirmationNumber')}" href="#">@Model.GetLabel("Confirmation #")</a> 
        </th>
        <th class="essential" data-bind="visible: hidden() != 'FirstName'"> <a data-bind="click: function () {sortGrid('cust','FirstName')}" href="#">@Model.GetLabel("First Name")</a>

        </th>
        <th class="optional" data-bind="visible: hidden() != 'LastName'"> <a data-bind="click: function () {sortGrid('cust','LastName')}" href="#">@Model.GetLabel("Last Name")</a>

        </th>
        </tr>
    </tbody>
    <!-- /ko-->
</table>

演示：http://jsfiddle.net/knjtov16/1/

如果使用Knockout JS显示表头，则需要禁用表行

1 个答案: