本文给大家分享的是使用angularjs制作一个完整的表格的真实案例，结合前几篇的内容，把整个完整的代码分享给大家，有需要
来源gaodai.ma#com搞##代!^码网的小伙伴可以参考下
由于本人也是边学边写，因此整理的比较乱，下面放出我例子的完整代码，方便大家交流测试，如有问题欢迎评论
首先，表格采用的是BootStrap样式编辑的，主要使用的是angularjs，为了方便也有jQuery的方法，在测试时需自行引入bootstrap，angularjs和jq的文件。
整体代码预览：
HTML：
//需要自行引入BOOTStrap，angularjs和jQuery的js，css文件 .pagination .num{ font-size:22px;color:red; } .text{ margin:0 auto; border:1px solid #ccc; width:100%; max-width:200px; } <title>欢迎</title> <div class="block"> <div class="navbar navbar-inner block-header"> <div class="muted pull-left">{{kaohzbTitle}}</div></div><div class="span12" style="float:left"> <div class="table-toolbar"> <button style="margin-left: 5px" id="refresh" class="btn btn-success"> <i class="icon-refresh icon-white"></i> 刷新 </button><button class="btn" id="savekaohzb"> <i class="icon-edit icon-white"></i> 保存 </button></div></div><div class="row-fluid"> <div class="span6"></div><table class="table table-striped table-bordered table-hover" id="example" style="margin-top:10px"> <thead> <tr> <th style="width: 20px" rowspan="2">全选 <br></th><th style="text-align: center;width: 50px;vertical-align: middle" rowspan="2">序号</th><th style="text-align: center;width: 150px;vertical-align: middle" rowspan="2">名称</th><th style="text-align: center;width: 150px;vertical-align: middle" rowspan="2">日期</th><th style="text-align: center;width: 150px" colspan="3">比赛队伍（红）</th><th style="text-align: center;width: 150px" colspan="3">比赛队伍（蓝）</th><th style="text-align: center;width: 150px;vertical-align: middle" rowspan="2">比分</th><th style="text-align: center;width: 150px;vertical-align: middle" rowspan="2">说明</th><th style="text-align: center;width: 150px;vertical-align: middle" rowspan="2">玩家支持队伍</th></tr><tr> <th style="text-align: center;width: 80px">第一场</th><th style="text-align: center;width: 80px">第二场</th><th style="text-align: center;width: 80px">说明</th><th style="text-align: center;width: 80px">第一场</th><th style="text-align: center;width: 80px">第二场</th><th style="text-align: center;width: 80px">说明</th></tr></thead><tbody id="page"> <!--track by tb.id--><tr><!-- 只用angularjs实现点击一行就选中暂时无法实现 --><td style="width: 20px"></td><td style="text-align:center">{{tb.id}}</td><td style="text-align:center">{{tb.zbname}}</td><td style="text-align:center">{{tb.zbtime}}</td><td style="text-align:center">{{tb.zbrul1}}</td><td style="text-align:center">{{tb.zbrul2}}</td><td style="text-align:center"><div class="text"></div></td><td style="text-align:center">{{tb.zbrul2}}</td><td style="text-align:center">{{tb.zbrul1}}</td><td style="text-align:center"><div class="text"></div></td><!-- 2016.1.19通过可编译的div来代替输入框 --><td style="text-align:center">{{tb.score}}</td><td style="text-align:center"><div class="text"></div></td><td> {{tb.type}}支持红方支持蓝方双方相同</td></tr></tbody></table></div><div class="pagination"> <ul style="float:right"> <li id="previous">上一页</li><li><!--用于页标的显示 --><ul id="page_num_all"> </ul></li><li id="next">下一页</li></ul><span> 当前为第<span class="num" id="current_page"></span>页，总共<span class="num" id="page_all"></span>页 </span><span>您当前对select的操作值为:</span>{{typename}} </div><!-- END FORM--></div>
js代码：
以上就是如何用angularjs制作一个完整的表格的详细内容，更多请关注gaodaima搞代码网其它相关文章！
搞代码网（gaodaima.com）提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请说明详细缘由并提供版权或权益证明然后发送到邮箱[email protected]，我们会在看到邮件的第一时间内为您处理，或直接联系QQ：872152909。本网站采用BY-NC-SA协议进行授权
转载请注明原文链接：如何用angularjs制作一个完整的表格
转载请注明原文链接：如何用angularjs制作一个完整的表格
