15

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:

inserir a descrição da imagem aqui

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?

4
  • Ainda com o mesmo problema? Teve algum avançado? Commented 29/01/2016 às 12:34
  • @PauloHDSousa por motivos de alheios acabei saindo do projeto e por isso não sei qual o caminho foi tomado. Acredito que a diretiva foi removida Commented 1/02/2016 às 11:06
  • Você diz querer tornar a "tabela responsiva", mas não explica o que espera conseguir. Pela imagem, vejo que o header está desalinhado com o body. Se você quer fixar o header da tabela, veja este jsfiddle Commented 30/04/2016 às 3:21
  • Use apenas element, ele é um objeto jQuery. O angular.element(element) é redundante Commented 25/10/2017 às 14:45

1 Resposta 1

1

Veja se isso funciona para você:

 function getListTRandTDSize(idElementTable) {

        var tab = document.getElementById(idElementTable), 
            tr = tab.getElementsByTagName("tr"), tdList = [];

        for (var i in tr) {
             var TD = tr[i].getElementsByTagName("td")[0];
             var sizeTD = angular.element(TD).width();
             var sizeTR = angular.element(tr[i]).width();
             tdList.push({"td_size": sizeTD, "tr_size": sizeTR});
         }
         return tdList;
 }

 var collection = getListTRandTDSize("pedido");

 console.log(collection);

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .