使用angularjs创建简单表格

前端技术 2023/09/04 JavaScript

初步接手人生的第一个项目，需要用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 class=\"text\" contenteditable=\"true\" ng-model=\"tb.por\"></div>是支持输入多行内容的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) {写在这里}中

复制代码 代码如下:

$scope.isshow=true；
//    模仿请求得到的数据
$scope.saveDate=[{ id:1,zbname:\"中亚赛区比赛\",zbtime:\"2015-12-03\",zbrul1:\"胜利\",zbrul2:\"失败\",por:\"请输入说明内容\",score:\"2:1\",type:\"支持红方\"},
{ id:2,zbname:\"日韩赛区比赛\",zbtime:\"2015-11-11\",zbrul1:\"胜利\",zbrul2:\"胜利\",por:\"请输入说明内容\",score:\"2:1\",type:\"支持蓝方\"},
{ id:3,zbname:\"欧美赛区比赛\",zbtime:\"2015-3-03\",zbrul1:\"失败\",zbrul2:\"胜利\",por:\"请输入说明内容\",score:\"2:1\",type:\"双方相同\"},
{ id:4,zbname:\"中东赛区比赛\",zbtime:\"2016-1-05\",zbrul1:\"胜利\",zbrul2:\"失败\",por:\"请输入说明内容\",score:\"2:1\",type:\"支持蓝方\"},
{ id:5,zbname:\"北京赛区比赛\",zbtime:\"2014-12-23\",zbrul1:\"失败\",zbrul2:\"胜利\",por:\"请输入说明内容\",score:\"2:1\",type:\"双方相同\"},
{ id:6,zbname:\"韩国赛区比赛\",zbtime:\"2015-11-01\",zbrul1:\"失败\",zbrul2:\"胜利\",por:\"请输入说明内容\",score:\"2:1\",type:\"双方相同\"},
{ id:7,zbname:\"日本赛区比赛\",zbtime:\"2011-1-23\",zbrul1:\"胜利\",zbrul2:\"失败\",por:\"请输入说明内容\",score:\"2:1\",type:\"支持红方\"},
{ id:8,zbname:\"中亚赛区比赛\",zbtime:\"2013-12-15\",zbrul1:\"失败\",zbrul2:\"胜利\",por:\"请输入说明内容\",score:\"2:1\",type:\"支持蓝方\"},
{ id:9,zbname:\"中亚赛区比赛\",zbtime:\"2015-10-17\",zbrul1:\"失败\",zbrul2:\"胜利\",por:\"请输入说明内容\",score:\"2:1\",type:\"支持红方\"},
{ id:10,zbname:\"中亚赛区比赛\",zbtime:\"2015-11-21\",zbrul1:\"胜利\",zbrul2:\"胜利\",por:\"请输入说明内容\",score:\"2:1\",type:\"支持蓝方\"},
{ id:11,zbname:\"中亚赛区比赛\",zbtime:\"2015-2-02\",zbrul1:\"失败\",zbrul2:\"失败\",por:\"请输入说明内容\",score:\"2:1\",type:\"支持红方\"},
{ id:12,zbname:\"中亚赛区比赛\",zbtime:\"2015-2-05\",zbrul1:\"胜利\",zbrul2:\"失败\",por:\"请输入说明内容\",score:\"2:1\",type:\"双方相同\"}
]; // var arr=[];//用于分别绑定ngrepeat中生成的各条数据信息

本文地址：https://www.stayed.cn/item/10072

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案