Question

我一直在玩jQuery Mobile的Table Widget。有没有办法可以通过这个小部件从其表头名称设置列的显示隐藏状态？如果没有这样的方法，那么这个问题的最佳解决方案是什么？

Answer 1

jQM没有为此提供开箱即用的解决方案，因此，您必须通过JS完成此操作。 列切换弹出窗口继承了表的id，后跟-popup。当tablecreate事件触发时，您需要定位它以更改复选框属性。

请注意，只有thead个data-priority元素会添加到列切换弹出窗口中。此外，您需要使用.eq()方法或:eq()选择器索引定位复选框。

$(document).on("pagebeforecreate", "#pageID", function () {
   $("#tableID").on("tablecreate", function () {
       $("#tableID-popup [type=checkbox]:eq(1)") /* second checkbox */
           .prop("checked", false)            /* uncheck it */
           .checkboxradio("refresh")          /* refresh UI */
           .trigger("change");                /* trigger change to update table */
   });
});

<强> Demo

Answer 2

添加班级＆＃34; ui-table-cell-hidden＆＃34;到表头标记。

在下面的示例中，默认情况下会隐藏第四列。

<thead>
    <tr>
        <th data-priority="1" width="20%">Category</th>
        <th data-priority="2" width="45%">Title</th>
        <th data-priority="3" width="15%">Amount</th>
        <th data-priority="4" width="20%" class="ui-table-cell-hidden">Action</th>
    </tr>
</thead>

如何为列设置Column-Toggle Table Widget的默认值？

2 个答案: