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

  • Cierre todos los popovers Angular JS Bootstrap con un clic en cualquier lugar de la pantalla?
  • ¿Cómo renderizar una plantilla AngularJS a una Cadena sin causar un error de InProg?
  • Manejar validation de campo de date de tres partes con angularjs
  • Descargar text / csv contenido como files del server en Angular
  • Uso angular del plugin jQuery con object en controller externo
  • AngularJS: validation del lado del server de múltiples forms
  • AngularJS cómo crear una plantilla reutilizable para Bootstrap modal
  • Deshabilitar la interacción UI-Router con window.location
  • Javascript tiene muchos buenos JS marco (como Node.js AngularJS Vue.js React.js) es el mejor lenguaje de script.