jQuery移动表设置默认视图

有谁知道如何设置jQuery移动列切换表,以便当用户加载页面时,默认情况下只有某些列可见? 例如,列1-6可见,但列7不可见,必须使用列选择器按钮打开。

这是我的项目示例

  Date Client Dates and Times Needed Caregiver In Mind Notes Comunication Unable Reason    

此function不是内置于窗口小部件,因此您必须自己编写代码。

这是一种方式:

这扩展了Omars的答案: 如何为列设置Column-Toggle Table Widget的默认值? 将属性添加到要隐藏的列。

在表

为首先应隐藏的列添加新的数据属性。 在我的示例中data-hiddendefault="true"

    Date Client Dates and Times Needed Caregiver In Mind Notes Comunication Unable Reason   

然后将脚本添加到tablecreate事件。 我们首先得到列切换弹出窗口的id(表id +’ – popup’)。 然后遍历所有列标题并找到具有数据优先级的列,因为这些是列切换弹出窗口中出现的唯一列标题。 现在检查是否存在用于隐藏列的新属性,如果是,则在弹出窗口中设置其复选框以取消选中,刷新复选框窗口小部件,然后触发复选框的更改事件:

  $('[data-mode="columntoggle"]').on( 'tablecreate', function( event, ui ) { var id = this.id + "-popup"; var $cols = $(this).find("thead th"); var idx = 0; $cols.each(function(index){ if ($(this).jqmData("priority")){ if ($(this).jqmData("hiddendefault") == true) { $("#" + id + " [type=checkbox]:eq(" + idx + ")").prop("checked", false).checkboxradio("refresh").trigger("change"); } idx++; } }); }); 

这是您更新的FIDDLE