初步接手人生的第一个项目,需要用angularjs制作表格和实现各种功能,因此遇到了各种问题和以前不熟悉的知识点,在此记录下来,以供大家学习交流,解决方式可能并不完善或符合规范,如果大家有更好的方式欢迎指出,由于这个表格功能的制作是一点点添加上去的,因此我也分成几个部分介绍,日后如增加了新的功能也会不时更新的
首先,表格采用的是BootStrap样式编辑的,主要使用的是angularjs,为了方便也有jQuery的方法,在测试时需自行引入bootstrap,angularjs和jq的文件。
正文:
HTML部分
生成表格比较简单,主要是通过angularjs的数据绑定和ng-repeat来自动生成每一条信息。
1.首先需要自定义表头的内容,即thead中的代码
1.1其中ng-model是复选框的全选功能,通过绑定该状态的数据,可以将其同步赋予tbody中的所有checkbox(用ng-checked)
2.在tbody中通过ng-repeat来循环生成其中的每一条信息,其中:
2.1
是支持输入多行内容的div,可以方便快捷的替代textarea标签,但是由于ng-model不支持div的数据绑定,因此需要使用directive 来自定义ngmodel功能,后面会说2.3 在ng-repeat中使用select标签对其中进行数据绑定,也不能将ng-model绑定到每个option中,后面会有说明
3.最后只要将数据赋给$scope.saveData即可生成表格
<table class="table table-striped table-bordered table-hover" id="example" style="margin-top:10px;"> <thead> <tr> <th style="width: 20px;" rowspan="2">全选 <br><input type="checkbox" ng-model="selectAll"></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 ng-click="fun()" id="page" ng-show="isshow"> <!--track by tb.id--> <tr ng-repeat="tb in saveDate"><!-- 只用angularjs实现点击一行就选中全行暂时无法实现 --> <td style="width: 20px;"><input type="checkbox" ng-checked="selectAll"></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" contenteditable="true" ng-model="tb.por"></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" contenteditable="true" ng-model="tb.por"></div></td><!-- 2016.1.19通过可编译的div来代替输入框 --> <td style="text-align:center;">{{tb.score}}</td> <td style="text-align:center;"><div class="text" contenteditable="true" ng-model="tb.por"></div></td> <td> <select name="" id="" ng-change="changetype(adds)" ng-model="adds" style="text-align:center;width:100%;min-width:80px;margin-bottom:0"> <option value="" ng-show="isShow">{{tb.type}}</option> <option value="支持红方">支持红方</option> <option value="支持蓝方">支持蓝方</option> <option value="双方相同">双方相同</option> </select> </td> </tr> </tbody> </table>
JS部分:备注所有的script部分的代码都写在angular.module("myModule",[]).controller('myCtrl', function($scope) {写在这里}中