使用angularjs创建简单表格


Posted in Javascript onJanuary 21, 2016

初步接手人生的第一个项目,需要用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中生成的各条数据信息
Javascript 相关文章推荐
IE6/7 and IE8/9/10(IE7模式)依次隐藏具有absolute或relative的父元素和子元素后再显示父元素
Jul 31 Javascript
IE6下focus与blur错乱的解决方案
Jul 31 Javascript
利用js判断浏览器类型(是否为IE,Firefox,Opera浏览器)
Nov 22 Javascript
解决jquery插件冲突的问题
Jan 23 Javascript
KnockoutJS 3.X API 第四章之表单value绑定
Oct 10 Javascript
Javascript实现一个简单的输入关键字添加标签效果实例
Jun 01 Javascript
php简单数据库操作类的封装
Jun 08 Javascript
详解原生js实现offset方法
Jun 15 Javascript
vue.js select下拉框绑定和取值方法
Mar 03 Javascript
详解.vue文件解析的实现
Jun 11 Javascript
vue使用原生js实现滚动页面跟踪导航高亮的示例代码
Oct 25 Javascript
基于Node.js的大文件分片上传示例
Jun 19 Javascript
Jquery中巧用Ajax的beforeSend方法
Jan 20 #Javascript
Javascript中神奇的this
Jan 20 #Javascript
javascript实现图片轮播效果
Jan 20 #Javascript
JS获取鼠标坐标位置实例分析
Jan 20 #Javascript
属于你的jQuery提示框(Tip)插件
Jan 20 #Javascript
学习JavaScript设计模式之模板方法模式
Jan 20 #Javascript
高性能JavaScript循环语句和条件语句
Jan 20 #Javascript
You might like
深入Nginx + PHP 缓存详解
2013/07/11 PHP
PHP页面转UTF-8中文编码乱码的解决办法
2015/10/20 PHP
基于PHP给大家讲解防刷票的一些技巧
2015/11/18 PHP
PHP的Yii框架中Model模型的学习教程
2016/03/29 PHP
PHP递归获取目录内所有文件的实现方法
2016/11/01 PHP
PHP随机数函数rand()与mt_rand()的讲解
2019/03/25 PHP
Tab页界面 用jQuery及Ajax技术实现(php后台)
2011/10/12 Javascript
JS打开图片另存为对话框实现代码
2012/12/26 Javascript
jquery.ui.draggable中文文档(原文翻译)
2013/11/15 Javascript
fixedBox固定div漂浮代码支持ie6以上大部分主流浏览器
2014/06/26 Javascript
JavaScript动态修改背景颜色的方法
2015/04/16 Javascript
jQuery解析Json实例详解
2015/11/24 Javascript
AngularJS基础 ng-init 指令简单示例
2016/08/02 Javascript
ionic实现可滑动的tab选项卡切换效果
2020/04/15 Javascript
jQuery实现手机上输入后隐藏键盘功能
2017/01/04 Javascript
ajax+node+request爬取网络图片的实例(宅男福利)
2017/08/28 Javascript
使用Vue写一个datepicker的示例
2018/01/27 Javascript
微信小程序列表时间戳转换实现过程解析
2019/10/12 Javascript
小程序外卖订单界面的示例代码
2019/12/30 Javascript
Vue 中使用 typescript的方法详解
2020/02/17 Javascript
实例分析javascript中的异步
2020/06/02 Javascript
python里大整数相乘相关技巧指南
2014/09/12 Python
Python的迭代器和生成器
2015/07/29 Python
详解Python匿名函数(lambda函数)
2019/04/19 Python
详解python实现数据归一化处理的方式:(0,1)标准化
2019/07/17 Python
Python图像处理库PIL的ImageDraw模块介绍详解
2020/02/26 Python
高中毕业自我鉴定
2013/12/22 职场文书
代理商会议邀请函
2014/01/27 职场文书
小学生美德少年事迹
2014/02/02 职场文书
小兵张嘎观后感300字
2015/06/03 职场文书
活动新闻稿范文
2015/07/17 职场文书
2016年教师党员创先争优承诺书
2016/03/24 职场文书
简历自我评价:教师师德表现自我评价
2019/04/24 职场文书
R9700摩机记
2022/04/05 无线电
Axios代理配置及封装响应拦截处理方式
2022/04/07 Vue.js
pytorch分类模型绘制混淆矩阵以及可视化详解
2022/04/07 Python