angular,左右滑动的表格.docVIP

angular,左右滑动的表格 篇一：bootstrap,angularjs和jq综合制作一个完整的表格 如何用angularjs制作一个完整的表格 首先，表格采用的是BootStrap样式编辑的，主要使用的是angularjs，为了方便也有jQuery的方法，在测试时需自行引入bootstrap，angularjs和jq的文件。 整体代码预览： HTML： lt;!DOCTYPE html lt;html lang=en ng-app=myModule lt;head //需要自行引入BOOTStrap，angularjs和jQuery的js，css文件 lt;style .pagination .num{ font-size:22px;color:red; } .text{ margin:0 auto; border:1px solid #ccc; width:100%; max-width:200px; } lt;/style lt;title欢迎lt;/title lt;/head lt;body ng-controller=myCtrl lt;div class=block lt;div class=navbar navbar-inner block-header lt;div class=muted pull-left{{kaohzbTitle}}lt;/div lt;/div lt;div class=span12 style=float:left; lt;div class=table-toolbar lt;button style=margin-left: 5p x; id=refresh ng-click=refresh() class=btn btn-success lt;i class= icon-refresh icon-whitelt;/i 刷新 lt;/button lt;button ng-disabled=isdisabled class=btn ng-class={#39;btn-info#39;:isInfo} id=savekaohzb ng-click=save() lt;i class=icon-edit icon-whitelt;/i 保存 lt;/button lt;/div lt;/div lt;div class=row-fluid lt;div class=span6lt;/div lt;table class=table table-striped table-bordered table-hover id=example style=margin-top:10px; lt;thead lt;tr lt;th style=width: 20px; rowspan=2全选 lt;brlt;input type=checkbox ng-model=selectAlllt;/th lt;th style=text-align: center; width: 50px;vertical-align: middle rowspan=2序号lt;/th lt;th style=text-align: center; width: 150px;vertical-align: middle rowspan=2名称lt;/th lt;th style=text-align: center; width: 150px;vertical-align: middle rowspan=2日期lt;/th lt;th style=text-align: center; width: 150px; colspan=3比赛队伍（红）lt;/th lt;th style=text-align: center; width: 150px; colspan=3比赛队伍（蓝）lt;/th lt;th style=text-align: center; width: 150px;vertical-align: middle rowspan=2比分lt;/th lt;th style=text-align: center; width: 150px;vertical-align: middle rowspan=2说明lt;/th lt;th style=text-align: center; width: 150px;vertical-align: middle rowspan=2玩家支持队伍lt;/th lt;/tr lt;tr lt;th style=text-align: center; width: