jQuery Mobile表切换列

Question

我正在使用JQuery Mobile 1.4。 如何在表加载时设置列隐藏或未选中状态。

这是我的代码的一部分：

<table data-role="table" id="table-column-toggle" data-mode="columntoggle" class="ui-responsive table-stroke">


  <thead>
       <th>Movie Title</th>   
       <th data-priority="1">Rank</th>
       <th data-priority="2">Reviews</th>
    <thead>
    <tbody>
     ....
    </tbody> </table>

如何在默认情况下隐藏“评论”列或在“列”选项中未选中它？

Answer 1

可能有一种更简单的方法，但这将起作用：

给定您的表标记：

<table data-role="table" id="myTable" data-mode="columntoggle" class="ui-responsive table-stroke">
    <thead>
        <tr>
            <th>Movie Title</th>
            <th data-priority="1">Rank</th>
            <th data-priority="2">Reviews</th>
        </tr>
    </thead>
    <tbody>
    ...
    </tbody>
</table>

jQM将创建一个带有2个复选框的列切换弹出窗口，一个用于排名，一个用于评论。 由于您没有为影片标题分配数据优先级，因此不允许将其隐藏。 弹出窗口带有表的ID加上“ -popup”，因此在我的示例中，我们可以使用以下选择器在创建的弹出窗口中找到复选框：

$("#myTable-popup .ui-checkbox label")

当您要默认隐藏“评论”列时，我们可以在页面创建时在第二个复选框上触发click事件：

$(document).on("pagecreate", "#page1", function(){
    $("#myTable-popup .ui-checkbox label")[1].click();
});

这是一个有效的演示