jQuery移动表设置默认视图 [英] jQuery mobile tables set default view

问题描述

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

Does anyone know how to set up a jQuery mobile column toggle table so that when the user loads the page only certain columns are visible by default? For example columns 1-6 are visible but column 7 is not visible and must be turned on with the column chooser button.

这是我的项目示例

<thead>
    <tr>
      <th data-priority="1">Date</th>
      <th>Client</th>
      <th data-priority="2">Dates and Times Needed</th>
      <th data-priority="3">Caregiver In Mind</th>
      <th data-priority="4">Notes</th>
      <th data-priority="5">Comunication</th>
      <th data-priority="6">Unable Reason</th>  <!--  Want this column to be hidden by default -->
    </tr>
  </thead>

推荐答案

此功能不是内置于窗口小部件，所以你必须自己编码。

This functionality is not built-in to the widget, so you have to code it yourself.

这是一种方式：

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

This expands on Omars answer here: How to set default value of Column-Toggle Table Widget for a column? to add an attribute to the column(s) you want hidden.

在表格中< thead> 为应首先隐藏的列添加新的数据属性。在我的示例中 data-hiddendefault =true：

In the table <thead> add a new data attribute for columns that should be hidden at first. In my example data-hiddendefault="true" :

  <thead>
    <tr>
      <th data-priority="2">Date</th>
      <th>Client</th>
      <th data-priority="3">Dates and Times Needed</th>
      <th data-priority="1">Caregiver In Mind</th>
      <th data-priority="3">Notes</th>
      <th data-priority="3">Comunication</th>
      <th data-priority="3" data-hiddendefault="true">Unable Reason</th>
    </tr>
  </thead>

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

Then add script to the tablecreate event. We first get the id of the column toggle popup (table id + '-popup'). Then iterate through all column headers and find the ones that have a data-priority as these are the only ones that appear in the column toggle popup. Now check if the new attribute for hiding the column is there, and if it is, set its checkbox in the popup to unchecked, refresh the checkbox widget, and trigger the change event of the checkbox:

 $('[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

Here is your updated FIDDLE

这篇关于jQuery移动表设置默认视图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！