角头固定 [英] Angular Headers Fixed

查看：190
本文介绍了角头固定的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我试图让我的桌子角页面上有固定的页眉和页脚。

 ＆LT;表类=表表边框的表格条纹表悬停固定头＆GT;
  ＆LT;＆THEAD GT;
      ＆所述; TR＆GT;
          ＆LT;第i个姓名和LT; /第i
          ＆LT;第i度＆lt; /第i
          ＆LT;第i ID和LT; /第i
      ＆LT; / TR＆GT;
  ＆LT; / THEAD＆GT;
  ＆LT;＆TBODY GT;
      ＆LT; TR类=信息NG-重复=项ctrl.items跟踪由$指数＆GT;
          ＆所述; TD＆GT;
              ＆LT;输入类型=复选框/＆GT;
              ＆所述a取代; {{item.displayName}}＆下; / A＆GT;
          ＆LT; / TD＆GT;
          ＆所述; TD＆GT;
              {{item.marketValue}}
          ＆LT; / TD＆GT;
          ＆所述; TD＆GT;
              {{item.positions}}
          ＆LT; / TD＆GT;
      ＆LT; / TR＆GT;
  ＆LT; / TBODY＆GT;
  ＆LT;＆TFOOT GT;
      ＆所述; TR＆GT;
          ＆LT; TD＆GT;名称和LT; / TD＆GT;
          ＆LT; TD＆GT;度＆lt; / TD＆GT;
          ＆LT; TD＆GT; ID和LT; / TD＆GT;
      ＆LT; / TR＆GT;
  ＆LT; / TFOOT＆GT;
＆LT; /表＆gt;

我有我的角桌对plunker 演示在这里。我使用的是安固固定头表插件，但该表拒绝有固定的头。关于如何解决它的任何想法？


解决方案

我认为你缺少添加表高度=。这里是工作演示。 https://plnkr.co/edit/BdiQzYxVyPdFXU9TI44t?p=$p$pview

\r
\r

/ **\r
 * AngularJS固定头滚动表指示\r
 * @author贾森Watmore＆LT; jason@pointblankdevelopment.com.au> （http://jasonwatmore.com）\r
 * @version 1.2.0\r
 * /\r
（函数（）{\r
    角\r
        .module（'anguFixedHeaderTable'，[]）\r
        .directive（'fixedHeader'，fixedHeader）;\r
\r
    。fixedHeader $注射='$超时'];\r
\r
    功能fixedHeader（$超时）{\r
        返回{\r
            限制：'A'，\r
            链接：链接\r
        };\r
\r
        功能链接（$范围，$ ELEM，$ ATTRS，$​​ CTRL）{\r
            变种ELEM = $ ELEM [0];\r
\r
            //等待数据加载，然后变换表\r
            $范围。$腕表（tableDataLoaded，功能（isTableDataLoaded）{\r
                如果（isTableDataLoaded）{\r
                    transformTable（）;\r
                }\r
            }）;\r
\r
            功能tableDataLoaded（）{\r
                //当数据被装载在TBODY第一小区存在，但不具有宽度\r
                //直到表被变换后\r
                VAR firstCell = elem.querySelector（'TBODY TR：第一个孩子TD：第一孩子'）;\r
                返回firstCell＆放大器;＆安培; ！firstCell.style.width;\r
            }\r
\r
            功能transformTable（）{\r
                //重新设置显示风格所以下面测量时列宽是正确的\r
                angular.element（elem.querySelectorAll（'THEAD，TBODY，TFOOT'））的CSS（'显示器'，''）。\r
\r
                //包装在$超时给表有机会完成呈现\r
                $超时（函数（）{\r
                    //组列的宽度\r
                    angular.forEach（elem.querySelectorAll（'TR：第一胎日），功能（thElem，I）{\r
\r
                        VAR tdElems = elem.querySelector（'TBODY TR：第一胎TD：第n个孩子（'+（I + 1）+'）'）;\r
                        VAR tfElems = elem.querySelector（'TFOOT TR：第一胎TD：第n个孩子（'+（I + 1）+'）'）;\r
\r
                        VAR columnWidth时= tdElems？ tdElems.offsetWidth：thElem.offsetWidth;\r
                        如果（tdElems）{\r
                            tdElems.style.width = columnWidth时+'像素';\r
                        }\r
                        如果（thElem）{\r
                            thElem.style.width = columnWidth时+'像素';\r
                        }\r
                        如果（tfElems）{\r
                            tfElems.style.width = columnWidth时+'像素';\r
                        }\r
                    }）;\r
\r
                    //在THEAD和TBODY一套CSS样式\r
                    。angular.element（elem.querySelectorAll（'THEAD，TFOOT'））的CSS（'显示器'，'块'）;\r
\r
                    angular.element（elem.querySelectorAll（'TBODY'））。CSS（{\r
                        '显示'：'堵'，\r
                        高度：$ attrs.tableHeight || '继承'，\r
                        '溢出'：'自动'\r
                    }）;\r
\r
                    //通过滚动条的宽度减少最后一列的宽度\r
                    VAR TBODY = elem.querySelector（'TBODY'）;\r
                    VAR = scrollbarwidth设定tbody.offsetWidth - tbody.clientWidth;\r
                    如果（scrollbarwidth设定大于0）{\r
                        //因为某些原因被2px的线条一切行动更好地修剪宽度\r
                        scrollbarwidth设定 - = 2;\r
                        VAR lastColumn = elem.querySelector（'TBODY TR：第一胎TD：最后一个孩子'）;\r
                        lastColumn.style.width =（lastColumn.offsetWidth - scrollbarwidth设定）+'像素';\r
                    }\r
                }）;\r
            }\r
        }\r
    }\r
}）（）;\r
\r
VAR应用= angular.module（'对myApp'，['anguFixedHeaderTable']）\r
.controller（'DemoController'，函数（$范围）{\r
    $ scope.products = [\r
      {\r
        显示名：PROD1，\r
        marketValue：'100'，\r
        的位置：'1'\r
      }，\r
      {\r
        显示名：PROD1，\r
        marketValue：'100'，\r
        的位置：'1'\r
      }，\r
      {\r
        显示名：PROD1，\r
        marketValue：'100'，\r
        的位置：'1'\r
      }，\r
      {\r
        显示名：PROD1，\r
        marketValue：'100'，\r
        的位置：'1'\r
      }，\r
      {\r
        显示名：PROD1，\r
        marketValue：'100'，\r
        的位置：'1'\r
      }，\r
      {\r
        显示名：PROD1，\r
        marketValue：'100'，\r
        的位置：'1'\r
      }，\r
      {\r
        显示名：PROD1，\r
        marketValue：'100'，\r
        的位置：'1'\r
      }，\r
      {\r
        显示名：PROD1，\r
        marketValue：'100'，\r
        的位置：'1'\r
      }，\r
      {\r
        显示名：PROD1，\r
        marketValue：'100'，\r
        的位置：'1'\r
      }，\r
      {\r
        显示名：PROD1，\r
        marketValue：'100'，\r
        的位置：'1'\r
      }，\r
      {\r
        显示名：PROD1，\r
        marketValue：'100'，\r
        的位置：'1'\r
      }，\r
      {\r
        显示名：PROD1，\r
        marketValue：'100'，\r
        的位置：'1'\r
      }，\r
      {\r
        显示名：PROD1，\r
        marketValue：'100'，\r
        的位置：'1'\r
      }，\r
      {\r
        显示名：PROD1，\r
        marketValue：'100'，\r
        的位置：'1'\r
      }，\r
    ];\r
}）;

\r

＆LT;！DOCTYPE HTML＆GT;\r
＆LT; HTML NG-应用=对myApp＆GT;\r
\r
  ＆LT; HEAD＆GT;\r
    ＆LT;间的charset =UTF-8/＆GT;\r
    ＆LT;标题＆GT; AngularJS Plunker＆LT; /标题＆GT;\r
    ＆LT;脚本＆GT;的document.write（'＆LT;基本href =+ document.location +'/＆GT;'）;＆LT; / SCRIPT＆GT;\r
    ＆LT;链接rel =stylesheet属性HREF =style.css文件/＆GT;\r
    ＆所述;脚本数据需要=angular.js@1.4.xSRC =的https：//$c$c.angularjs.org/1.4.9/angular.js数据semver =1.4.9＆GT ;＆LT; / SCRIPT＆GT;\r
    ＆所述; SCRIPT SRC =app.js＆GT;＆下; /脚本＆GT;\r
  ＆LT; /头＆GT;\r
\r
  ＆LT;机身NG控制器=DemoController＆GT;\r
＆LT;表表高度=100px的阶级=表表边框的表格条纹表悬停固定头＆GT;\r
  ＆LT;＆THEAD GT;\r
      ＆所述; TR＆GT;\r
          ＆LT;第i个姓名和LT; /第i\r
          ＆LT;第i度＆lt; /第i\r
          ＆LT;第i ID和LT; /第i\r
      ＆LT; / TR＆GT;\r
  ＆LT; / THEAD＆GT;\r
  ＆LT;＆TBODY GT;\r
      ＆LT; TR类=信息NG-重复=项产品通过跟踪指数$＆GT;\r
          ＆所述; TD＆GT;\r
              ＆LT;输入类型=复选框/＆GT;\r
              ＆所述a取代; {{item.displayName}}＆下; / A＆GT;\r
          ＆LT; / TD＆GT;\r
          ＆所述; TD＆GT;\r
              {{item.marketValue}}\r
          ＆LT; / TD＆GT;\r
          ＆所述; TD＆GT;\r
              {{item.positions}}\r
          ＆LT; / TD＆GT;\r
      ＆LT; / TR＆GT;\r
  ＆LT; / TBODY＆GT;\r
  ＆LT;＆TFOOT GT;\r
      ＆所述; TR＆GT;\r
          ＆LT; TD＆GT;名称和LT; / TD＆GT;\r
          ＆LT; TD＆GT;度＆lt; / TD＆GT;\r
          ＆LT; TD＆GT; ID和LT; / TD＆GT;\r
      ＆LT; / TR＆GT;\r
  ＆LT; / TFOOT＆GT;\r
＆LT; /表＆gt;\r
  ＆LT; /身体GT;\r
\r
＆LT; / HTML＆GT;

\r

\r
\r

I am trying to make a table on my angular page with fixed headers and footers.

<table class="table table-bordered table-striped table-hover" fixed-header>
  <thead>
      <tr>
          <th>Name</th>
          <th>Amount</th>
          <th>Id</th>
      </tr>
  </thead>
  <tbody>
      <tr class="info" ng-repeat="item in ctrl.items track by $index">
          <td>
              <input type="checkbox"/>
              <a>{{item.displayName}}</a>
          </td>
          <td>
              {{item.marketValue}}
          </td>
          <td>
              {{item.positions}}
          </td>
      </tr>
  </tbody>
  <tfoot>
      <tr>
          <td>Name</td>
          <td>Amount</td>
          <td>Id</td>
      </tr>
  </tfoot>
</table>

I have a demo of my angular table here on plunker. I'm using the angu-fixed-header-table plugin but the table refuses to have fixed headers. Any ideas on how to fix it?

解决方案

I think you are missing to add table-height="". Here is the working demo. https://plnkr.co/edit/BdiQzYxVyPdFXU9TI44t?p=preview

/**
 * AngularJS fixed header scrollable table directive
 * @author Jason Watmore <jason@pointblankdevelopment.com.au> (http://jasonwatmore.com)
 * @version 1.2.0
 */
(function () {
    angular
        .module('anguFixedHeaderTable', [])
        .directive('fixedHeader', fixedHeader);

    fixedHeader.$inject = ['$timeout'];

    function fixedHeader($timeout) {
        return {
            restrict: 'A',
            link: link
        };

        function link($scope, $elem, $attrs, $ctrl) {
            var elem = $elem[0];

            // wait for data to load and then transform the table
            $scope.$watch(tableDataLoaded, function(isTableDataLoaded) {
                if (isTableDataLoaded) {
                    transformTable();
                }
            });

            function tableDataLoaded() {
                // first cell in the tbody exists when data is loaded but doesn't have a width
                // until after the table is transformed
                var firstCell = elem.querySelector('tbody tr:first-child td:first-child');
                return firstCell && !firstCell.style.width;
            }

            function transformTable() {
                // reset display styles so column widths are correct when measured below
                angular.element(elem.querySelectorAll('thead, tbody, tfoot')).css('display', '');

                // wrap in $timeout to give table a chance to finish rendering
                $timeout(function () {
                    // set widths of columns
                    angular.forEach(elem.querySelectorAll('tr:first-child th'), function (thElem, i) {

                        var tdElems = elem.querySelector('tbody tr:first-child td:nth-child(' + (i + 1) + ')');
                        var tfElems = elem.querySelector('tfoot tr:first-child td:nth-child(' + (i + 1) + ')');

                        var columnWidth = tdElems ? tdElems.offsetWidth : thElem.offsetWidth;
                        if (tdElems) {
                            tdElems.style.width = columnWidth + 'px';
                        }
                        if (thElem) {
                            thElem.style.width = columnWidth + 'px';
                        }
                        if (tfElems) {
                            tfElems.style.width = columnWidth + 'px';
                        }
                    });

                    // set css styles on thead and tbody
                    angular.element(elem.querySelectorAll('thead, tfoot')).css('display', 'block');

                    angular.element(elem.querySelectorAll('tbody')).css({
                        'display': 'block',
                        'height': $attrs.tableHeight || 'inherit',
                        'overflow': 'auto'
                    });

                    // reduce width of last column by width of scrollbar
                    var tbody = elem.querySelector('tbody');
                    var scrollBarWidth = tbody.offsetWidth - tbody.clientWidth;
                    if (scrollBarWidth > 0) {
                        // for some reason trimming the width by 2px lines everything up better
                        scrollBarWidth -= 2;
                        var lastColumn = elem.querySelector('tbody tr:first-child td:last-child');
                        lastColumn.style.width = (lastColumn.offsetWidth - scrollBarWidth) + 'px';
                    }
                });
            }
        }
    }
})();

var app = angular.module('myApp', ['anguFixedHeaderTable'])
.controller('DemoController', function($scope) {
    $scope.products = [
      {
        displayName: 'Prod1',
        marketValue: '100',
        positions:'1'
      },
      {
        displayName: 'Prod1',
        marketValue: '100',
        positions:'1'
      },
      {
        displayName: 'Prod1',
        marketValue: '100',
        positions:'1'
      },
      {
        displayName: 'Prod1',
        marketValue: '100',
        positions:'1'
      },
      {
        displayName: 'Prod1',
        marketValue: '100',
        positions:'1'
      },
      {
        displayName: 'Prod1',
        marketValue: '100',
        positions:'1'
      },
      {
        displayName: 'Prod1',
        marketValue: '100',
        positions:'1'
      },
      {
        displayName: 'Prod1',
        marketValue: '100',
        positions:'1'
      },
      {
        displayName: 'Prod1',
        marketValue: '100',
        positions:'1'
      },
      {
        displayName: 'Prod1',
        marketValue: '100',
        positions:'1'
      },
      {
        displayName: 'Prod1',
        marketValue: '100',
        positions:'1'
      },
      {
        displayName: 'Prod1',
        marketValue: '100',
        positions:'1'
      },
      {
        displayName: 'Prod1',
        marketValue: '100',
        positions:'1'
      },
      {
        displayName: 'Prod1',
        marketValue: '100',
        positions:'1'
      },
    ];
});

<!DOCTYPE html>
<html ng-app="myApp">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <script data-require="angular.js@1.4.x" src="https://code.angularjs.org/1.4.9/angular.js" data-semver="1.4.9"></script>
    <script src="app.js"></script>
  </head>

  <body ng-controller="DemoController">
<table table-height="100px" class="table table-bordered table-striped table-hover" fixed-header>
  <thead>
      <tr>
          <th>Name</th>
          <th>Amount</th>
          <th>Id</th>
      </tr>
  </thead>
  <tbody>
      <tr class="info" ng-repeat="item in products track by $index">
          <td>
              <input type="checkbox"/>
              <a>{{item.displayName}}</a>
          </td>
          <td>
              {{item.marketValue}}
          </td>
          <td>
              {{item.positions}}
          </td>
      </tr>
  </tbody>
  <tfoot>
      <tr>
          <td>Name</td>
          <td>Amount</td>
          <td>Id</td>
      </tr>
  </tfoot>
</table>
  </body>

</html>

这篇关于角头固定的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆