首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

如何用angularjs制作一个完整的表格

Posted in Javascript onJanuary 21, 2016

由于本人也是边学边写，因此整理的比较乱，下面放出我例子的完整代码，方便大家交流测试，如有问题欢迎评论

首先，表格采用的是BootStrap样式编辑的，主要使用的是angularjs，为了方便也有jQuery的方法，在测试时需自行引入bootstrap，angularjs和jq的文件。

　整体代码预览：

HTML：

<!DOCTYPE html>
<html lang="en" ng-app="myModule">
<head>
 //需要自行引入BOOTStrap，angularjs和jQuery的js，css文件
 <style>
  .pagination .num{
   font-size:22px;color:red;
  }
  .text{
   margin:0 auto;
   border:1px solid #ccc;
   width:100%;
   max-width:200px;
  }
 </style>
 <title>欢迎</title>
</head>
<body ng-controller="myCtrl">
 <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" ng-click="refresh()"
       class="btn btn-success">
      <i class=" icon-refresh icon-white"></i> 刷新
     </button>
     <button ng-disabled="isdisabled" class="btn" ng-class="{'btn-info':isInfo}" id="savekaohzb"
       ng-click="save()">
      <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><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>
   </div>
  <div class="pagination">
   <ul style="float:right">
    <li id="previous"><a href="">上一页</a></li>
    <li><!--用于页标的显示 -->
     <ul id="page_num_all">
     </ul>
    </li>
    <li id="next"><a href="" style="border:1px solid #ddd;float:right">下一页</a></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>
</body>

js代码：

<script>
 angular.module("myModule",[]).controller('myCtrl', function($scope) {
  $scope.kaohzbTitle = "考核指标维护";
  $scope.search = new Object();
  $scope.isdisabled=false;
  $scope.isInfo=false;
  $scope.saveDate="";//用于保存得到的原始数据
// $http.post请求表格数据
// 模仿请求得到的数据
  var datalist=[{
   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:"双方相同"}];
$scope.fun=function(){
   var e=window.event||arguments[0];
   var src=e.srcElement||e.target;
   if(src.nodeName=="TD"){
    var par=src.parentNode;
    var sd=par.getElementsByTagName("td")[0];
    if(sd.firstChild.checked==true){
     sd.firstChild.checked=false;
    }else{
     $("tr td").attr("checked",false);
     sd.firstChild.checked=true;
    }
   }
  }
$scope.refresh=function(){//点击刷新按钮显示表格
   $scope.saveDate=datalist;
   // console.log("结束赋予数据");
   $scope.$watch("saveDate",function(){//2016.1.20监听列表生成数据，当发生变化时执行刷新列表
    table_page();
    $scope.isshow=true;
   });
  }

  $scope.save=function(){//页面提交按钮
   console.log("准备保存");
   console.log($scope.saveDate);//只要数据改变，自动保存到原始数据列表中

  }

  //表格分页功能
  function table_page(){
   var show_page=5;//每页显示的条数
   var page_all=$("#page").children().size();//总条数
   var current_page=1;//当前页
//  console.log(page_all);
   var page_num=Math.ceil(page_all/show_page);//总页数
   var current_num=0;//用于生成页标的计数器
   var li="";//页标元素
   while(page_num>current_num){//循环生成页标元素
    li+='<li class="page_num"><a href="javasctip:(0)">'+(current_num+1)+'</a></li>';
    current_num++;
   }
   $("#page_num_all").html(li);//添加页标到页面
   $('#page tr').css('display', 'none');//设置隐藏
   $('#page tr').slice(0, show_page).css('display', '');//设置显示
   $("#current_page").html(" "+current_page+" ");//显示当前页
   $("#page_all").html(" "+page_num+" ");//显示总页数
   $("#previous").click(function(){//上一页
    var new_page=parseInt($("#current_page").text())-1;
    if(new_page>0){
     $("#current_page").html(" "+new_page+" ");
     tab_page(new_page);
    }
   });
   $("#next").click(function(){//下一页
    var new_page=parseInt($("#current_page").text())+1;//当前页标
    if(new_page<=page_num){//判断是否为最后或第一页
     $("#current_page").html(" "+new_page+" ");
     tab_page(new_page);
    }
   });
   $(".page_num").click(function(){//页标跳转
    var new_page=parseInt($(this).text());
    tab_page(new_page);
   });
   function tab_page(index){//切换对应页标的页面
    var start=(index-1)*show_page;//开始截取的页标
    var end=start+show_page;//截取个数
    $('#page').children().css('display', 'none').slice(start, end).css('display', '');
    current_page=index;
    $("#current_page").html(" "+current_page+" ");
   }
  }

 }).directive('contenteditable', function() {//自定义ngModel的属性可以用在div等其他元素中
  return {
   restrict: 'A', // 作为属性使用
   require: '?ngModel', // 此指令所代替的函数
   link: function(scope, element, attrs, ngModel) {
    if (!ngModel) {
     return;
    } // do nothing if no ng-model
    // Specify how UI should be updated
    ngModel.$render = function() {
     element.html(ngModel.$viewValue || '');
    };
    // Listen for change events to enable binding
    element.on('blur keyup change', function() {
     scope.$apply(readViewText);
    });
    // No need to initialize, AngularJS will initialize the text based on ng-model attribute
    // Write data to the model
    function readViewText() {
     var html = element.html();
     // When we clear the content editable the browser leaves a <br> behind
     // If strip-br attribute is provided then we strip this out
     if (attrs.stripBr && html === '<br>') {
      html = '';
     }
     ngModel.$setViewValue(html);
    }
   }
  };
 })
</script>

如何用angularjs制作一个完整的表格

- Author -

lvyi

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
Firefox outerHTML实现代码
Jun 04 Javascript
简单封装js的dom查询实例代码
Jul 08 Javascript
使用JavaScript获取URL中的参数(两种方法)
Nov 16 Javascript
JS中事件冒泡和事件捕获介绍
Dec 13 Javascript
js仿微博动态栏功能
Feb 22 Javascript
Express URL跳转（重定向）的实现方法
Apr 07 Javascript
js定时器+简单的动画效果实例
Nov 10 Javascript
基于Bootstrap表单验证功能
Nov 17 Javascript
angular4 共享服务在多个组件中数据通信的示例
Mar 30 Javascript
vue实现分页加载效果
Dec 24 Javascript
详解vue-flickity的fullScreen功能实现
Apr 07 Javascript
原生JS实现汇率转换功能代码实例
May 13 Javascript
angularjs自定义ng-model标签的属性
Jan 21 #Javascript
angularjs在ng-repeat中使用ng-model遇到的问题
Jan 21 #Javascript
js实现的二分查找算法实例
Jan 21 #Javascript
jQuery模拟物体自由落体运动(附演示与demo源码下载)
Jan 21 #Javascript
angularjs表格分页功能详解
Jan 21 #Javascript
使用angularjs创建简单表格
Jan 21 #Javascript
Jquery中巧用Ajax的beforeSend方法
Jan 20 #Javascript
JAVA面试题(401) 白俄罗斯购物网站(3) Android面试题(6) PHP面试题(54) 约旦购物网站(1) 冰岛购物网站(1) C++面试题(199) 保加利亚购物网站(3) DB面试题(126) 哈萨克斯坦购物网站(2)
You might like
用 php 编写的日历
2006/10/09 PHP
yii2.0使用Plupload实现带缩放功能的多图上传
2015/12/22 PHP
php利用递归实现删除文件目录的方法
2016/09/23 PHP
Thinkphp 框架扩展之标签库驱动原理与用法分析
2020/04/23 PHP
jQuery 获取URL的GET参数值的小例子
2013/04/18 Javascript
JS 添加千分位与去掉千分位的示例
2013/07/11 Javascript
关于js内存泄露的一个好例子
2013/12/09 Javascript
JQuery以JSON方式提交数据到服务端示例代码
2014/05/05 Javascript
在Linux系统中搭建Node.js开发环境的简单步骤讲解
2016/01/26 Javascript
javascript特殊文本输入框网页特效
2016/09/13 Javascript
详解JavaScript跨域总结与解决办法
2016/10/31 Javascript
Angular2生命周期钩子函数的详细介绍
2017/07/10 Javascript
深入浅析var,let,const的异同点
2018/08/07 Javascript
jQuery中常用动画效果函数知识点整理
2018/08/19 jQuery
Angular2中监听数据更新的方法
2018/08/31 Javascript
ztree加载完成后显示勾选节点的实现代码
2018/10/22 Javascript
自定义javascript验证框架示例【附源码下载】
2019/05/31 Javascript
解决Echarts2竖直datazoom滑动后显示数据不全的问题
2020/07/20 Javascript
[02:38]DOTA2 夜魇暗潮2020活动介绍官方视频
2020/11/04 DOTA
浅析Python中的序列化存储的方法
2015/04/28 Python
Python实现购物系统(示例讲解)
2017/09/13 Python
Python进阶之尾递归的用法实例
2018/01/31 Python
python 日期操作类代码
2018/05/05 Python
Python基于OpenCV实现人脸检测并保存
2019/07/23 Python
基于Python数据结构之递归与回溯搜索
2020/02/26 Python
Python使用requests xpath 并开启多线程爬取西刺代理ip实例
2020/03/06 Python
keras之权重初始化方式
2020/05/21 Python
Python批量获取并保存手机号归属地和运营商的示例
2020/10/09 Python
canvas实现圆绘制的示例代码
2019/09/11 HTML / CSS
Notino希腊：购买香水和美容产品
2019/07/25 全球购物
最新创业融资计划书
2014/01/19 职场文书
会计学习心得体会
2014/09/09 职场文书
体育活动总结
2015/02/04 职场文书
创业计划书之校园超市
2019/09/12 职场文书
golang elasticsearch Client的使用详解
2021/05/05 Golang
HTML5简单实现添加背景音乐的几种方法
2021/05/12 HTML / CSS