¿Cómo se especifica el ancho de una grilla pulida en porcentaje?

Question

¿Alguien sabe cómo establecer el ancho de la grilla en porcentaje?

por ejemplo pero en la página de la anchura de la rejilla es más de 2000 píxeles. No se ajusta al ancho de página.

Cualquier ayuda sería apreciada.

Gracias Padmanabhan

Answer 1

FYI, esto parece funcionar fuera de la caja en las versiones recientes de SlickGrid. :)

Answer 2

veo que esta pregunta es muy antigua, pero me encontré con esta pregunta al tratar de averiguar cómo hacer que mis columnas ocupen todo el ancho de la tabla. con suerte, ayudará a alguien algún día.

No pude encontrar la manera de establecer explícitamente el ancho de las columnas, pero lo hice para que funcione implícitamente.

aquí está cómo hacerlo:

por primera vez en su declaración de la columna añadir ancho: 300 (o lo que sea ancho que desee)

{id:"name", name:"Student Name", field:"firstName", width: 300} 

conjunto esto para todas sus columnas, las que desee más ancho poner un número más grande, por ejemplo 500

luego en las opciones de declation añadir forceFitColumns: verdadera

{enableCellNavigation: true, enableColumnReorder: false, forceFitColumns: true}; 

al hacer esto yo era capaz de conseguir mis columnas de tabla para ocupar el espacio restante de la mesa, y mantener las porciones que quiero relativo el uno al otro.

Answer 3

Sí, es posible, pero no puedo encontrar una solución fácil. Así que tienes que personalizarlo bastante.

Actualmente estoy trabajando en una solución para esto. Este es un ejemplo de trabajo, pero tiene algunos errores. Algunos de los cuales son de la configuración jsfiddle. http://jsfiddle.net/MQBLn/8/

básicamente creé una función que formatea las celdas en función de los tamaños de encabezado de columna. Luego debe llamar a esa función siempre que haya una Acción. (Ordenar, cambiar tamaño, etc.) También tuve que hacer algunos cambios menores a slick.grid.js Así que lo encontrará cargado en la parte superior de la sección JS seguido de js personalizados. Luego, algunas reglas de sobrescritura para css.

Aquí es mi formateador de celdas Función

function formatCells(grid) 
{ 
    var columns = grid.getColumns(); 
    var grid_width = grid.getGridPosition().width; 
    var header = $(".slick-header-columns"); 

    for(var i in columns) 
    { 
     $(".slick-cell.r"+i).css("width", (Math.floor(((header.children().eq(parseFloat(i)).width()+9)/(grid_width-_scrollBarWidth))*10000)/100)+"%"); 
    } 
} 

Espero que esto sea útil y tal vez un día integrado en SlickGrid como escenario.

Answer 4

Tengo una función para hacer un cambio de tamaño de la grilla.

function resizeGrid(newsize, grid) { 
      $('#dataGrid').css('width', newsize); 
      grid.resizeCanvas(); 
    } 

No se olvide de añadir forceFitColumns: true a sus opciones de cuadrícula como estafador dice más arriba

Answer 5

El suministro SlickGrid-formateador que con 5 parámetros:

formatter: function (row, cell, value, columnDef, dataContext) 

Puede ajustar el ancho de las columnas utilizando el parámetro dataContext, dentro del formateador específico, etc.: dataContext.width = 600 hace la columna específica 600px.

Ejemplo

{ 
     /* Categories */ 
     id: "categories", 
     formatter: function (row, cell, value, columnDef, dataContext) { 
      var html = ''; 

      if (value.indexOf('variation-child') != -1) { 
       return value; 
      } else if (value) { 
       for (var i = 0; i < value.length; i++) { 
        if (value[ i ]) { 
         html += '<div class="box category-box" title="' + value[ i ] + '">' + value[ i ] + '</div>'; 
        } 
       } 
      } 

      columnDef.width = 600 * value.length; 

      return html; 
     }, 
     name: "Categories", field: "categories", sortable: true, editor: Slick.Editors.TaxonomyPopupEditor 
    } 

recuerde utilizar grid.resizeCanvas(); (volver a calcular los anchos), cada vez que haya terminado de añadir datos a la red.