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")

由于您希望默认隐藏“评论”列，我们只需在页面创建时触发第二个复选框上的点击事件：

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

这是一个有效的 DEMO

JQuery Mobile表切换列

1 个答案: