使工作台100％用智能表角固定头 [英] Make table 100% with fixed header with smart table angular

查看：209 发布时间：2016/4/8 0:13:25 angularjs css3 flexbox smart-table

本文介绍了使工作台100％用智能表角固定头的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我怎样才能让这台以100％的高度的高度，但仍然头必须保持固定的吗？

 ＆LT;！DOCTYPE HTML＆GT;
＆LT; HTML NG-应用=对myApp＆GT;  ＆LT; HEAD＆GT;
    ＆LT;链路数据需要=bootstrap-css@3.2.0数据semver =3.2.0的rel =stylesheet属性HREF =// maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap .min.css/＆GT;
    ＆所述;脚本数据需要=angular.js@1.2.25数据semver =1.2.25SRC =的https：//$c$c.angularjs.org/1.2.25/angular.js＆GT ;＆LT; / SCRIPT＆GT;
    ＆LT;链接rel =stylesheet属性HREF =style.css文件/＆GT;
    ＆所述; SCRIPT SRC =的script.js＆GT;＆下; /脚本＆GT;
    ＆LT;脚本SRC =智能table.debug.js＆GT;＆LT; / SCRIPT＆GT;
  ＆LT; /头＆GT;  ＆LT;机身NG控制器=mainCtrl＆GT;
    ＆LT;表类=表的表条纹＆GT;
    ＆LT;＆THEAD GT;
    ＆所述; TR＆GT;
        百分位ST-比=20ST-排序=名字＆gt;首先名和LT; /第i
        百分位ST-比=20ST-排序=姓氏＆GT;姓氏和LT; /第i
        百分位ST-比=10ST-排序=年龄＆GT;年龄＆LT; /第i
        百分位ST比例=30ST-排序=电子邮件＆GT;电子邮件＆LT; /第i
        百分位ST-比=20ST-排序=平衡＆GT;余量＆lt; /第i
    ＆LT; / TR＆GT;
    ＆LT; / THEAD＆GT;
    ＆LT;＆TBODY GT;
    ＆LT; TR NG重复=行中显示＆GT;
        ＆所述; TD ST-比=20＆GT; {{row.firstName}}＆下; / TD＆GT;
        ＆所述; TD ST-比=20＆GT; {{row.lastName |大写}}＆LT; / TD＆GT;
        ＆所述; TD ST-比=10＆GT; {{row.age}}＆下; / TD＆GT;
        ＆所述; TD ST-比=30＆GT; {{row.email}}＆下; / TD＆GT;
        ＆所述; TD ST-比=20＆GT; {{row.balance |货币}}＆LT; / TD＆GT;
    ＆LT; / TR＆GT;
    ＆LT; / TBODY＆GT;
    ＆LT;＆TFOOT GT;
    ＆所述; TR＆GT;
        ＆LT; TD合并单元格=5级=TEXT-中心＆GT;
            ＆LT; DIV ST-项目逐页=20ST-分页=＆GT;＆LT; / DIV＆GT;
        ＆LT; / TD＆GT;
    ＆LT; / TR＆GT;
    ＆LT; / TFOOT＆GT;
＆LT; /表＆gt;  ＆LT; /身体GT;＆LT; / HTML＆GT;表{
    箱尺寸：边界盒;
    -moz-箱尺寸：边界盒;
    显示：弯曲;
    柔性方向：列;
    调整项目：舒展;
    高度：500像素; / *这可以改变* /
}表* {
    箱尺寸：继承;
    -moz-箱尺寸：继承;
}THEAD {
    显示：弯曲;
    柔性方向：列;
    调整项目：舒展;
}TBODY {
    溢出-Y：滚动;
    显示：inline-block的;
}THEAD＆GT; TR，TBODY＆GT; TR，TFOOT＆GT; TR {
    显示：弯曲;
    柔性方向：排;
    柔性包装：NOWRAP;
}THEAD，TFOOT {
    弯曲收缩：0;
}日TBODY TD {
    宽度：20％; / *这可以改变* /
    溢出 -  X：隐藏;
    文本溢出：省略号;
    显示：inline-block的;
}TFOOT {
    显示：inline-block的;
}TFOOT TD {
    宽度：100％;
    显示：inline-block的;
}

解决方案

我找到的解决方案是创建一个包含只有标题另一个表，所以当我在假头CLIC对智能抛出一个JS比火灾CLIC事件 - 表头。通过这种方式，你可以使用去ST-排序指令。
这是一个肮脏的解决方案，但工程。我的例子有宽度为100％，并没有100％的高度，但我希望这有助于你的头。

 ＆LT;表ID =的tableHeader级=表浓缩＆GT;
            ＆LT;＆THEAD GT;
                ＆所述; TR角色=的rowHeader＆GT;
                    ＆LT;！ - ＆LT; I类=发发排序＆GT;＆LT; / I＆GT;  - ＆GT;
                    百分位类=排序ST-比率=10的onclick =fire_clic（1）＆GT; IdCustomer＆LT; I类=图标排列图标小＆GT;＆LT; / I＆GT;＆LT; /第i
                    百分位类=排序ST-比率=35的onclick =fire_clic（2）＆GT;名称＆LT; I类=图标排列图标小＆GT;＆LT; / I＆GT;＆LT; /第i
                    百分位ST比例=15＆GT;硝苯地平＆LT; /第i
                    百分位类=排序ST-比率=15的onclick =fire_clic（4）＆GT;电话和LT; I类=图标排列图标小＆GT;＆LT; / I＆GT;＆LT; /第i
                    百分位类=排序ST-比率=25的onclick =fire_clic（5）＆GT;电子邮件和LT; I类=图标排列图标小＆GT;＆LT; / I＆GT;＆LT; /第i ;
                ＆LT; / TR＆GT;
            ＆LT; / THEAD＆GT;
        ＆LT; /表＆gt;        ＆LT; DIV CLASS =表容器＆GT;            ＆LT;表ST-坚持=tableLSST-表=客户ST-安全-SRC =rowCustomerCollectionST-分页，滚动ST管=callServer
                   类=table表条纹表悬停表浓缩＆GT;                ＆LT; THEAD数据-NG-隐藏=真＆GT;
                    ＆所述; TR＆GT;
                        百分位的id =的col1ST-比=10ST-排序=IdCustomer和SEQ ID＆下; /第i
                        百分位ID =COL2ST-比率=35ST-排序=NOM＆GT;名称和LT; /第i
                        百分位ST比例=15＆GT;硝苯地平＆LT; /第i
                        百分位ID =COL4ST-比率=15ST-排序=电话＆GT;电话和LT; /第i
                        百分位ID =COL5ST-比率=25ST-排序=dPer3＆GT;电子邮件和LT; /第i
                    ＆LT; / TR＆GT;
                ＆LT; / THEAD＆GT;                ＆LT;＆TBODY GT;
                    ＆LT; TR数据-NG-重复=C客户＆GT;
                        ＆LT; TD ST-比=10标题=转到客户级=艾拉的数据-NG-点击=打开（c.idCustomer）＆GT;
                            {{c.idCustomer}}
                        ＆LT; / TD＆GT;
                        ＆LT; TD ST比例=35＆GT; {{c.nom}}＆LT; / TD＆GT;
                        ＆LT; TD ST比例=15＆GT; {{c.nif}}＆LT; / TD＆GT;
                        ＆LT; TD ST比例=15＆GT; {{c.phone}}＆LT; / TD＆GT;
                        ＆LT; TD ST比例=25＆GT; {{c.dPer3}}＆LT; / TD＆GT;
                    ＆LT; / TR＆GT;
                ＆LT; / TBODY＆GT;            ＆LT; /表＆gt;        ＆LT; / DIV＆GT;＆LT;脚本＆GT;
        功能fire_clic（ID，ELEM）{
        VAR idControl ='日[ID = COL'+ ID +']';        //火智能表CLIC事件
        $（idControl）.trigger（'点击'）;
    }
＆LT; / SCRIPT＆GT;

CSS：

  #tableHeader {
    宽度：100％;
}。表容器{
    高度：500像素;
    宽度：100％;
    溢出-Y：滚动;
    空格：NOWRAP;
    字体大小：小;
    调整项目：舒展;
}。表冷凝＆GT; TBODY＆GT; TR＆GT; TD {
    填充：2px的;
}

http://plnkr.co/edit/GIeXoF?p=preview

How can I make this table with a height of 100% height but the header must still remain fixed?

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

  <head>
    <link data-require="bootstrap-css@3.2.0" data-semver="3.2.0" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />
    <script data-require="angular.js@1.2.25" data-semver="1.2.25" src="https://code.angularjs.org/1.2.25/angular.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
    <script src=smart-table.debug.js></script>
  </head>

  <body ng-controller="mainCtrl">
    <table  class="table table-striped">
    <thead>
    <tr>
        <th st-ratio="20" st-sort="firstName">first name</th>
        <th st-ratio="20" st-sort="lastName">last name</th>
        <th st-ratio="10" st-sort="age">age</th>
        <th st-ratio="30" st-sort="email">email</th>
        <th st-ratio="20" st-sort="balance">balance</th>
    </tr>
    </thead>
    <tbody>
    <tr ng-repeat="row in displayed">
        <td st-ratio="20">{{row.firstName}}</td>
        <td st-ratio="20">{{row.lastName | uppercase}}</td>
        <td st-ratio="10">{{row.age}}</td>
        <td st-ratio="30">{{row.email}}</td>
        <td st-ratio="20">{{row.balance | currency}}</td>
    </tr>
    </tbody>
    <tfoot>
    <tr>
        <td colspan="5" class="text-center">
            <div  st-items-by-page="20" st-pagination=""></div>
        </td>
    </tr>
    </tfoot>
</table>

  </body>

</html>

table {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    height: 500px; /* this can vary */
}

table * {
    box-sizing: inherit;
    -moz-box-sizing: inherit;
}

thead {
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

tbody {
    overflow-y: scroll;
    display: inline-block;
}

thead > tr, tbody > tr, tfoot > tr {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
}

thead, tfoot {
    flex-shrink: 0;
}

th, tbody td {
    width: 20%; /* this can vary */
    overflow-x: hidden;
    text-overflow: ellipsis;
    display: inline-block;
}

tfoot {
    display: inline-block;
}

tfoot td {
    width: 100%;
    display: inline-block;
}

解决方案

The solution I found was to create another table which contains only the header, so when I clic on the fake header throw a JS than fires clic event on the smart-table header. In this way you can use de st-sort directive. It's a dirty solution but works. My example has width at 100% and hasn't 100% height but I hope this helps you with the header.

 <table id="tableHeader" class="table-condensed">
            <thead>
                <tr role="rowheader">
                    <!--<i class="fa fa-sort"></i>-->
                    <th class="sorting" st-ratio="10" onclick="fire_clic(1)">IdCustomer<i class="icon-sort icon-small"></i></th>
                    <th class="sorting" st-ratio="35" onclick="fire_clic(2)">Name<i class="icon-sort icon-small"></i></th>
                    <th st-ratio="15">Nif</th>
                    <th class="sorting" st-ratio="15" onclick="fire_clic(4)">Phone<i class="icon-sort icon-small"></i></th>
                    <th class="sorting" st-ratio="25" onclick="fire_clic(5)">Email <i class="icon-sort icon-small"></i></th>
                </tr>
            </thead>
        </table>

        <div class="table-container">

            <table st-persist="tableLS" st-table="customers" st-safe-src="rowCustomerCollection" st-pagination-scroll st-pipe="callServer"
                   class="table table-striped table-hover table-condensed">

                <thead data-ng-hide="true">
                    <tr>
                        <th id="col1" st-ratio="10" st-sort="IdCustomer">ID</th>
                        <th id="col2" st-ratio="35" st-sort="nom">Name</th>
                        <th st-ratio="15">Nif</th>
                        <th id="col4" st-ratio="15" st-sort="tel">Phone</th>
                        <th id="col5" st-ratio="25" st-sort="dPer3">Email</th>
                    </tr>
                </thead>

                <tbody>
                    <tr data-ng-repeat="c in customer">
                        <td st-ratio="10" title="Go to customer" class="irA" data-ng-click="open(c.idCustomer)">
                            {{c.idCustomer}}
                        </td>
                        <td st-ratio="35">{{c.nom}}</td>
                        <td st-ratio="15">{{c.nif}}</td>
                        <td st-ratio="15">{{c.phone}}</td>
                        <td st-ratio="25">{{c.dPer3}}</td>
                    </tr>
                </tbody>

            </table>

        </div>

<script>
        function fire_clic(id, elem) {
        var idControl = 'th[id=col' + id + ']';

        //Fire the clic event in smart-table
        $(idControl).trigger('click');
    }
</script>

CSS:

#tableHeader {
    width: 100%;
}

.table-container {
    height: 500px;
    width: 100%;
    overflow-y: scroll;
    white-space: nowrap;
    font-size: small;
    align-items: stretch;
}

.table-condensed > tbody > tr > td {
    padding: 2px;
}

这篇关于使工作台100％用智能表角固定头的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文

使工作台100％用智能表角固定头 [英] Make table 100% with fixed header with smart table angular

问题描述

相关文章

前端开发最新文章

热门教程

热门工具

登录关闭

使工作台100％用智能表角固定头 [英] Make table 100% with fixed header with smart table angular

问题描述

相关文章

前端开发最新文章

热门教程

热门工具

登录 关闭

登录关闭