ancho de columnas de tamaño automático ng-grid

Estoy usando AngularJS ng-grid y tratando de hacerlo 1. Ancho de columna de tamaño automático basado en el contenido de la columna 2. Cuando se muestran less columnas, para hacer que el ancho de la última columna sea de tamaño automático para llenar el área vacía (Por ejemplo decir I tiene 8 columnas cada una con ancho: 100 y el ancho total de la cuadrícula ng es 800 … luego, si oculto 4 columnas, el ancho de la última columna debería ser automáticamente igual a 500).

Hasta ahora tengo el siguiente código para la tarea 1 anterior, pero desafortunadamente no está funcionando (las columnas no son de tamaño automático en function del contenido de la columna). Así que me preguntaba si alguien puede por favor ayudar diciéndome lo que me falta aquí, y cómo puedo hacer la tarea 2. Gracias

var app = angular.module('myNGridApp', ['ngGrid']); app.controller('myNGCtrl', function($scope) { $scope.myData = [{id: "#4", di: 50, taskstatus: "Lorem Ipsum text", notes: "Lorem Ipsum text", datecreated: "02/04/2014"}, {id: "#4", di: 50, taskstatus: "Lorem Ipsum text", notes: "Lorem Ipsum text", datecreated: "02/04/2014"}, {id: "#4", di: 50, taskstatus: "Lorem Ipsum text", notes: "Lorem Ipsum text", datecreated: "02/04/2014"}, {id: "#4", di: 50, taskstatus: "Lorem Ipsum text", notes: "Lorem Ipsum text Lorem Ipsum text Lorem Ipsum text Lorem Ipsum text Lorem Ipsum text Lorem Ipsum text Lorem Ipsum text Lorem Ipsum text Lorem Ipsum text Lorem Ipsum text Lorem Ipsum text Lorem Ipsum text Lorem Ipsum text Lorem Ipsum text Lorem Ipsum text Lorem Ipsum text Lorem Ipsum text Lorem Ipsum text Lorem Ipsum text Lorem Ipsum text Lorem Ipsum text Lorem Ipsum text Lorem Ipsum text Lorem Ipsum text Lorem Ipsum text Lorem Ipsum text Lorem Ipsum text Lorem Ipsum text ", datecreated: "02/04/2014"}, {id: "#4", di: 50, taskstatus: "Lorem Ipsum text", notes: "Lorem Ipsum text", datecreated: "02/04/2014"}]; $scope.columnDefs= [{ field: 'id', displayName: 'ID', resizable: true, minWidth: 100, width: 'auto' }, { field: 'di', displayName: 'DI', resizable: true, minWidth: 100, width: 'auto' }, { field: 'taskstatus', displayName: 'Task Status', resizable: true, minWidth: 200, width: 'auto' }, { field: 'notes', displayName: 'Notes', resizable: true, minWidth: 400, width: 'auto' }, { field: 'datecreated', displayName: 'Date Created', resizable: true, minWidth: 200, width: 'auto' }]; $scope.gridOptions = { data: 'myData', columnDefs: 'columnDefs', footerVisible: true, enableColumnResize: true, filterOptions: {filterText: '', useExternalFilter: false}, showColumnMenu: true, showFilter: true, plugins: [new ngGridFlexibleHeightPlugin()], virtualizationThreshold: 10, }; }); 

One Solution collect form web for “ancho de columnas de tamaño automático ng-grid”

Estaba luchando con este mismo problema, y ​​lo he resuelto de una manera que funcionó para mis requisitos, ¡espero que pueda ayudar a alguien más!

Básicamente paso la primera fila de datos, junto con un object opcional que contiene nombres de columnas amigables. Cualquier nombre que no esté aquí, o si el object no se pasa, tendrá la split camelCase, guiones bajos y guiones cambiados por espacios, y la primera letra en mayúscula.

El cálculo del ancho de columna se basa en una fuente monoespaciada (utilicé la Consola Lucida), y el más largo del nombre de la columna, o el dato, se usará para calcular el ancho.

 if(!datum || datum.toString().length < displayName.length) result.width = displayName.length * 7.5; else result.width = datum.toString().length * 7.5; if(result.width < 40) result.width = 40; 

Ver el Plunker: http://plnkr.co/edit/9SIF0wFYBTW9m5oaXXLb?p=info

  • ng-click en parent div también en child div
  • Cómo leer el recuento de filas de range de columnas en particular en AngularJS
  • ¿Por qué el controller de ejecución angular funciona dos veces para cada cambio de model?
  • AngularJS: 'La plantilla para la directiva debe tener exactamente un elemento raíz' cuando se usa la label 'th' en la plantilla directiva
  • D3 y data binding bidireccional
  • Extraño comportamiento de $ routeChangeSuccess: no se activa en la primera carga (pero no arroja ningún error)
  • Tamaño de página angular 2
  • Inyectando service / fábrica angular js en Jasmine
  • Javascript tiene muchos buenos JS marco (como Node.js AngularJS Vue.js React.js) es el mejor lenguaje de script.