NG-电网自动调整大小列宽度 [英] ng-grid auto sizing columns width
问题描述
我使用AngularJS NG-电网和试图使它
基于列的内容1.自动大小的列宽
2.当显示少列，使最后一列的宽度自动调整大小以填充空白区域（例如说我有8列每个宽度：100和整个NG-格宽度800 ......那么，如果我躲4列，那么最后一列的宽度应自动等于500）。
到目前为止，我有以下的code以上任务1但遗憾的是它不工作（列不是自动调整大小基于列的内容）。所以我想知道如果任何人都可以请告诉我什么帮忙，我在这里失踪了，我该怎么办任务2.感谢
VAR应用= angular.module（'myNGridApp'，['ngGrid']）;app.controller（'myNGCtrl'，函数（$范围）{
$ scope.myData = {[ID：＃4，二：50，taskstatus：Lorem存有文本，指出：Lorem存有文本，dateCreated会：2014年2月4日}，
{ID：＃4，二：50，taskstatus：Lorem存有文本，指出：Lorem存有文本，dateCreated会：2014年2月4日}，
{ID：＃4，二：50，taskstatus：Lorem存有文本，指出：Lorem存有文本，dateCreated会：2014年2月4日}，
{ID：＃4，二：50，taskstatus：Lorem存有文本，指出：Lorem存有文字Lorem存有文本Lorem存有文本Lorem存有文本Lorem存有文本Lorem存有文本Lorem存有文本Lorem存有文本Lorem存有文本Lorem存有文字Lorem存有文本Lorem存有文本Lorem存有文本Lorem存有文本Lorem存有文本Lorem存有文本Lorem存有文本Lorem存有文本Lorem存有文本Lorem存有文本Lorem存有文本Lorem存有文本Lorem存有文本Lorem存有文本Lorem存有文字Lorem存有文字Lorem存有文本Lorem存有文本，dateCreated会：2014年2月4日}，
{ID：＃4，二：50，taskstatus：Lorem存有文本，指出：Lorem存有文本，dateCreated会：2014年2月4日}]; $ scope.columnDefs = {[现场：'ID'，显示名：'ID'，调整大小：真，了minWidth：100，宽度：'自动'}，
{场：DI，显示名：DI，调整大小：真，了minWidth：100，宽度：'自动'}，
{场：'taskstatus，显示名：任务状态，调整大小：真，了minWidth：200，宽度：'自动'}，
{场：注释，显示名：注意，调整大小：真，了minWidth：400，宽度：'自动'}，
{场：'dateCreated会，显示名：创建日期，调整大小：真，了minWidth：200，宽度：'自动'}] $ scope.gridOptions = {
数据：myData的，
columnDefs：columnDefs'，
footerVisible：真实，
enableColumnResize：真实，
filterOptions：{filterText：''，useExternalFilter：假}，
showColumnMenu：真实，
showFilter：真实，
插件：[新ngGridFlexibleHeightPlugin（）]，
virtualizationThreshold：10，
};}）;
我被同样的问题挣扎，我已经在某种程度上这工作了我的要求解决，希望它可以帮助别人！
基本上我传递数据的第一排，包含友好的列名的可选对象一起。不作任何名称，或者如果对象没有全部通过，将有驼峰分裂，下划线和连字符改变空间，首字母大写。
列宽的计算是基于等宽字体（我用龙力控制台），最长的列名，或者基准，将用于计算宽度。
如果（数据|| datum.toString（）长度LT;！displayName.length）
result.width = displayName.length * 7.5;
其他
result.width = datum.toString（）长* 7.5。如果（result.width＆下; 40）
result.width = 40;
查看Plunker： http://plnkr.co/edit/9SIF0wFYBTW9m5oaXXLb?p=info
I am using AngularJS ng-grid and trying to make it 1. Auto-size column width based on the column content 2. When less columns are displayed, to make last column width auto-size to fill the empty area (For example say I have 8 columns each with width : 100 and the whole ng-grid width is 800...then if I hide 4 columns, then last column width should automatically be equal to 500).
So far I have the following code for task 1 above but unfortunately it is not working (columns are not auto-sized based on column content). So I was wondering if anyone can please help by telling me what I am missing here, and how I can do task 2. Thanks
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,
};
});
I was struggling with this same issue, and I've solved in a way which worked for my requirements, hope it can help someone else!
Basically I pass in the first row of data, along with an optional object containing friendly column names. Any names not in here, or if the object is not passed at all, will have camelCase split, underscores and hyphens changed for spaces, and first letter capitalised.
Column width calculation is based on a monospaced font (I used Lucida Console), and the longest of the column name, or the datum, will be used to calculate the width.
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;
See the Plunker: http://plnkr.co/edit/9SIF0wFYBTW9m5oaXXLb?p=info
这篇关于NG-电网自动调整大小列宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
