jQuery Mobile - Alternar columna

Descripción

La alternancia de columnas coloca las columnas en un lugar oculto y permite al usuario seleccionar columnas según su elección utilizando data-mode = "columntoggle" atributo.

Ejemplo

El siguiente ejemplo demuestra el uso de alternancia de columnas en jQuery Mobile Framework.

<!DOCTYPE html>
<html>
   <head>
      <title>Table Column Toggle</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <link rel = "stylesheet" href = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
      <script src = "https://code.jquery.com/jquery-1.11.3.min.js"></script>
      <script src = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
   </head>

   <body>
      <div data-role = "header">
         <h2>Header</h2>
      </div>
      
      <table data-role = "table" id = "table-column-toggle" data-mode = "columntoggle" 
         class = "ui-responsive table-stripe" data-column-btn-theme = "b" 
         data-column-btn-text = "Click here to display columns...">
         
         <thead>
            <tr>
               <th data-priority = "1">Position</th>
               <th>Team</th>
               <th data-priority = "2">Rating</th>
               <th data-priority = "3">Points</th>
            </tr>
         </thead>
         
         <tbody>
            <tr>
               <th>1</th>
               <td>SOUTH AFRICA</td>
               <td>114</td>
               <td>3308</td>
            </tr>
            
            <tr>
               <th>2</th>
               <td>INDIA</td>
               <td>110</td>
               <td>3535</td>
            </tr>
            
            <tr>
               <th>3</th>
               <td>AUSTRALIA</td>
               <td>109</td>
               <td>4376</td>
            </tr>
            
            <tr>
               <th>4</th>
               <td>PAKISTAN</td>
               <td>106</td>
               <td>2977</td>
            </tr>
            
            <tr>
               <th>5</th>
               <td>NEW ZEALAND</td>
               <td>99</td>
               <td>3578</td>
            </tr>
            
            <tr>
               <th>6</th>
               <td>ENGLAND</td>
               <td>99</td>
               <td>3940</td>
            </tr>
            
            <tr>
               <th>7</th>
               <td>SRI LANKA</td>
               <td>89</td>
               <td>3123</td>
            </tr>
            
            <tr>
               <th>8</th>
               <td>WEST INDIES</td>
               <td>76</td>
               <td>2504</td>
            </tr>
            
            <tr>
               <th>9</th>
               <td>BANGLADESH</td>
               <td>47</td>
               <td>1026</td>
            </tr>
            
            <tr>
               <th>10</th>
               <td>ZIMBABWE</td>
               <td>5</td>
               <td>53</td>
            </tr>
         </tbody>
      </table>
      
      <div data-role = "footer">
         <h2>Footer</h2>
      </div>
      
   </body>
</html>

Salida

Realicemos los siguientes pasos para ver cómo funciona el código anterior:

Guarde el código html anterior como jqm_table_column_toggle.html archivo en la carpeta raíz de su servidor.
Abra este archivo HTML como http: //localhost/jqm_table_column_toggle.html y se mostrará el siguiente resultado.

Modo de selector de columnas y configuración de la prioridad de las columnas

Puede mostrar el elemento de la tabla usando data-role = "table" y data-mode = "columntoggle" atributos como se muestra en la siguiente etiqueta.

<table data-role = "table" id = "table-column-toggle" data-mode = "columntoggle">

Puede especificar qué columna debe ocultarse o mostrarse utilizando el data-priority atributo y asigne el valor de prioridad de 1 a 6. El encabezado de la tabla que tendrá el atributo de prioridad de datos, estará disponible en el menú de la columna.

Tema y personalización

De forma predeterminada, el texto del botón es "Columnas ...", sin embargo, puede cambiar el texto con el data-column-btn-textatributo a la mesa. También puede establecer el tema para el menú selector de botones o columnas utilizando eldata-column-btn-themeatributo. Las filas se pueden mostrar en formato de rayas agregandotable-stripe class al elemento de tabla.

Hacer que las tablas sean receptivas

Puede hacer que las tablas respondan según el tamaño y la orientación de la pantalla. Las consultas de medios especifican el comportamiento de respuesta a las columnas usando prioridad y escriben la consulta de medios usandomin-widthatributo. Los anchos que se establecen utilizando unidades em, responderán a los cambios de tamaño de fuente y puede calcular el valor del píxel en unidades em dividiendo el ancho objetivo por 16 píxeles.

Aplicar un punto de interrupción preestablecido

Puede aplicar los puntos de interrupción personalizados para cada nivel de prioridad agregando el class = "ui-responsive" al elemento de la tabla como se muestra a continuación -

<table data-role = "table" class = "ui-responsive" id = "table-column-toggle" data-mod 
   e ="columntoggle">

Puede utilizar los siguientes estilos preestablecidos para cada nivel de prioridad:

data-priority = "1" - Se utiliza para mostrar la columna a 320px (20em).
data-priority = "2" - Se utiliza para mostrar la columna a 480px (30em).
data-priority = "3" - Se utiliza para mostrar la columna a 640px (40em).
data-priority = "4" - Se utiliza para mostrar la columna a 800px (50em).
data-priority = "5" - Se utiliza para mostrar la columna a 960px (60em).
data-priority = "6" - Se utiliza para mostrar la columna a 1120px (70em).

Encabezados de columna agrupados

Los datos de la columna se pueden mostrar debajo de cada encabezado agrupado para los datos financieros. Puede utilizar el atributo de prioridad para analizar la fila especificada y mostrar los grupos de encabezados como opciones. Cualquier encabezado de tabla que tenga prioridad estará disponible en el menú del selector de columnas.

↰ Previous page