Seguinte tenho uma tabela alimentada por uma rotina simples. Tenho a necessidade de tornar o scroll to tbody fixo. Até ai tudo bem. Poderia fazer de N formas. Para tentar tornar a tabela responsiva estou usando um diretiva para calcular e setar o valor de cada th após os dados serem renderizados. Para calcular o tamanho de cada th estou usando a primeira linha da tbody para saber qual tamanho devo colocar em cada th para deixa-las alinhadas.
Pois bem! Ai que está o problema. Por algum motivo quando tento pegar o tamanho das TDs todas retornam 0. Tentei por clientWidth, offsetWidth, with etc. Todos retornam 0.
Abaixo a tela representando o problema:
Minha directive:
.directive("scrolltbody", function ($timeout) {
return {
scope: {
val: "="
},
link: function(scope, element, attrs) {
scope.$on("ajustarTabelaPedido", function() {
$timeout(function(){
compilar(element, attrs);
}, 10000);
});
}
}
function compilar (element, attrs){
var wTable = angular.element(element).width();
var th = angular.element(element).find("thead th");
var tr = angular.element(element).find("tbody tr").get(0);
var td = angular.element(tr).find("td");
angular.forEach(th, function (itemTh, indexTh){
var wElement = angular.element(itemTh).attr("widthscroll");
var wElementCalc = ((wElement * wTable) / 100);
/* w = 0 forever*/
var w = $(tr).find("td").eq(indexTh).outerWidth();
});
}
});
Meu controller:
.controller("PedidoController", function($scope, $pedido) {
/*
.
.
.
*/
$scope.buscar = function() {
$pedido.buscar().then(function(req) {
$scope.pedido = req;
/* This dispatch update for directive */
$scope.$broadcast("ajustarTabelaPedido");
});
};
/*
.
.
.
*/
});
HTML:
<table id="pedido" class="gridbox pedido" scrolltbody val="pedido" style="height: 350px;">
<thead data-spy="affix" data-offset-top="60" data-offset-bottom="200">
<tr>
<th>Imagem</th>
<th>Produto</th>
<th>
<span ng-click="ordem.coluna='produto.alavancagem';ordem.reverso=!ordem.reverso">Planejado</span>
<i ng-show="pedido.erroCaixaria" style="cursor: pointer;" class="fa fa-arrow-up fa-1 justify" title="Regularizar caixaria para mais." ng-click="corrigeCaixaria(pedido, 1)"></i>
<i ng-show="pedido.erroCaixaria" style="cursor: pointer;" class="fa fa-arrow-down fa-1 justify" title="Regularizar caixaria para menos." ng-click="corrigeCaixaria(pedido, 0)"></i>
</th>
<th>Preço Tabela</th>
<th>Caixaria</th>
<th>Preço Praticado</th>
<th>% Desconto</th>
<th>% Politica Desconto</th>
<th>Preço c/ Desconto</th>
<th>Bonificação</th>
<th>Preço Pedido</th>
</tr>
</thead>
<tbody class="body" id="pedido-produto">
<tr ng-repeat="p in pedido.item | orderBy:ordem.coluna:ordem.reverso | filter: itemFilter" >
<td><img src="<...>" alt="{{p.produto.produto.id | normalizarProdutoSku}}" style="max-height: 50px;" /></td>
<td><i class="fa fa-trash-o fa-1 justify icon-lixeira"></i> {{p.produto.produto.descricao}}</td>
<td>
<input ng-model="p.produto.alavancagem" />
</td>
<td>{{p.produto.precoTabelaView | currency}}</td>
<td>{{p.produto.gradeMinima}}</td>
<td>
<input ng-model="p.produto.precoPraticado"/>
</td>
<td><input ng-model="p.produto.percentualDesconto"/></td>
<td><input ng-model="limitePoliticaDesconto"/></td>
<td>R$ <input ng-model="p.produto.precoDesconto"/></td>
<td ng-class="{'celula-erro' : p.bonificacaoErro}">
<input ng-model="p.produto.bonificacao" />
</td>
<td>{{p.produto.precoDesconto * p.produto.alavancagem | currency}}</td>
</tr>
</tbody>
</table>
Qual seria o problema?
element
, ele é um objeto jQuery. Oangular.element(element)
é redundante