使用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 相关文章推荐
很棒的学习jQuery的12个网站推荐
Apr 28 Javascript
浅析IE10兼容性问题(frameset的cols属性)
Jan 03 Javascript
jQuery使用ajaxSubmit()提交表单示例
Apr 04 Javascript
JS中的form.submit()不能提交表单的错误原因
Oct 08 Javascript
js实现缓冲运动效果的方法
Apr 10 Javascript
详解Document.Cookie
Dec 25 Javascript
再次谈论Javascript中的this
Jun 23 Javascript
Javascript 实现简单计算器实例代码
Oct 23 Javascript
详解JS构造函数中this和return
Sep 16 Javascript
小程序绑定用户方案优化小结
May 15 Javascript
mui js控制开关状态、修改switch开关的值方法
Sep 03 Javascript
如何实现js拖拽效果及原理解析
May 08 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
ThinkPHP2.x防范XSS跨站攻击的方法
2015/09/25 PHP
thinkPHP5框架路由常用知识点汇总
2019/09/15 PHP
有关js的变量作用域和this指针的讨论
2010/12/16 Javascript
TimergliderJS 一个基于jQuery的时间轴插件
2011/12/07 Javascript
js如何获取object类型里的键值
2014/02/18 Javascript
node.js中的http.response.end方法使用说明
2014/12/14 Javascript
js给selected添加options的方法
2015/05/06 Javascript
关于事件mouseover ,mouseout ,mouseenter,mouseleave的区别
2015/10/12 Javascript
Javascript类型转换的规则实例解析
2016/02/23 Javascript
jQuery+ajax+asp.net获取Json值的方法
2016/06/08 Javascript
js对字符串进行编码的方法总结(推荐)
2016/11/10 Javascript
Vue.js实现表格动态增加删除的方法(附源码下载)
2017/01/20 Javascript
BootStrap点击保存后实现模态框自动关闭的思路(模态框)
2017/09/26 Javascript
AngularJS实现的select二级联动下拉菜单功能示例
2017/10/25 Javascript
Vue 中的compile操作方法
2018/02/26 Javascript
JS实现的汉字与Unicode码相互转化功能分析
2018/05/25 Javascript
d3绘制基本的柱形图的实现代码
2018/12/12 Javascript
vue生命周期与钩子函数简单示例
2019/03/13 Javascript
解决Layui中layer报错的问题
2019/09/03 Javascript
layui prompt 设置允许空白提交的方法
2019/09/24 Javascript
python字符串连接的N种方式总结
2014/09/17 Python
python通过函数属性实现全局变量的方法
2015/05/16 Python
python爬取各类文档方法归类汇总
2018/03/22 Python
解决python3 HTMLTestRunner测试报告中文乱码的问题
2018/12/17 Python
pytorch使用指定GPU训练的实例
2019/08/19 Python
Python3 shelve对象持久存储原理详解
2020/03/23 Python
如何配置关联Python 解释器 Anaconda的教程(图解)
2020/04/30 Python
C# Debug和Testing相关面试题
2015/10/25 面试题
就业推荐自我鉴定
2013/10/06 职场文书
学校清洁工岗位职责
2015/04/15 职场文书
免职通知
2015/04/23 职场文书
给下属加薪申请报告
2015/05/15 职场文书
Nginx域名转发https访问的实现
2021/03/31 Servers
golang中切片copy复制和等号复制的区别介绍
2021/04/27 Golang
一篇文章学会Vue中间件管道
2021/06/20 Vue.js
vue实现简易音乐播放器
2022/08/14 Vue.js