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

2024-09-27 16:42:26

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

首先，表格采用的是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实现表格的增删改查（仅限前端）

用AngularJS实现对表格的增删改查(仅限前端),具体代码: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>实现表格的增删改查</title> <meta http-equiv="keywords" content="keyword1,keyword2,keywo
AngularJS表格添加序号的方法

本文实例讲述了AngularJS表格添加序号的方法.分享给大家供大家参考,具体如下: 1.问题背景 AngularJS表格需要序号,可以利用$index来作为序号 2.实现实例 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>AngularJS之表格序号</title> <link rel="stylesheet" h
AngularJS表格样式简单设置方法示例

本文实例讲述了AngularJS表格样式简单设置方法.分享给大家供大家参考,具体如下: 1.问题背景 AngularJS表格table,利用样式设置表格间隔色 2.实现源码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>AngularJS之表格设置样式</title> <link rel="stylesheet" h
详解AngularJS中的表格使用

表格数据本质上通常是重复的.ng-repeat指令,可以用来方便地绘制表格.下面的示例说明使用ng-repeat指令来绘制表格. <table> <tr> <th>Name</th> <th>Marks</th> </tr> <tr ng-repeat="subject in student.subjects"> <td>{{ subject.name }}</td>
AngularJS中table表格基本操作示例

本文实例讲述了AngularJS表格基本操作.分享给大家供大家参考,具体如下: css内容: table, td { border: 1px solid grey; border-collapse: collapse; padding: 5px; } HTML正文: <body ng-app=""> <div ng-init="persons=[{'name':'zhangsan','age':'20'}, {'name':'lisi','age':'19'
妙用Angularjs实现表格按指定列排序

使用AngularJS的过滤器,可以很容易的实现在表格中,点击某一列标题进行排序,实现过程如下: html代码: <table class="table table-border" ng-app="myapp" ng-controller="orderByCtrl"> <thead> <tr> <th>inx</th> <th ng-click="col='name';d
angularjs表格ng-table使用备忘录

项目中用到angularjs的表格ng-table,功能相当强大,像搜索.排序.checkbox.分页.每页表格显示数目等都有.API,demo什么的也只能参考官网了.这里做个备忘,哪天肯定还会用到. HTML: <!DOCTYPE html> <html> <meta charset="utf-8"/> <head> <script data-require="angular.js@*" data-semver
AngularJS中的Directive自定义一个表格

先给大家说下表格的需求: ● 表格结构 <table> <thead> <tr> <th>Name</th> <th>Street</th> <th>Age</th> </tr> </thead> <tbody> <tr> <td>></td> <td>></td> <td>>
angularjs表格分页功能详解

接上一次,这次主要介绍表格分页功能,由于项目需要这个案例是关于前端分页的方式,现在很少会这么用了,但如有需要可以参考其中的思路 html: 1.通过UL来展示页标,其中每个页标的li是通过异步加载从获取到不同的表格数据来动态生成的. <div class="pagination"> <ul style="float:right"> <li id="previous"><a href=""
如何用angularjs制作一个完整的表格

由于本人也是边学边写,因此整理的比较乱,下面放出我例子的完整代码,方便大家交流测试,如有问题欢迎评论首先,表格采用的是BootStrap样式编辑的,主要使用的是angularjs,为了方便也有jQuery的方法,在测试时需自行引入bootstrap,angularjs和jq的文件. 整体代码预览: HTML: <!DOCTYPE html> <html lang="en" ng-app="myModule"> <head> //
如何用 Python 制作一个迷宫游戏

相信大家都玩过迷宫的游戏,对于简单的迷宫,我们可以一眼就看出通路,但是对于复杂的迷宫,可能要仔细寻找好久,甚至耗费数天,然后可能还要分别从入口和出口两头寻找才能找的到通路,甚至也可能找不到通路. 虽然走迷宫问题对于我们人类来讲比较复杂,但对于计算机来说却是很简单的问题.为什么这样说呢,因为看似复杂实则是有规可循的. 我们可以这么做,携带一根很长的绳子,从入口出发一直走,如果有岔路口就走最左边的岔口,直到走到死胡同或者找到出路.如果是死胡同则退回上一个岔路口,我们称之为岔口 A, 这时进入左边第二
使用AngularJS制作一个简单的RSS阅读器的教程

简介几年前,我用C#写了一个RSS阅读器,但是我想如果把它做成一个SPA(单页应用)效果会更好. Angular使一些事情变得简单,RSS阅读器就是其中之一. 我也用Twitter Bootstrap(做UI)实现了RSS阅读器,调试页面样式是最难的地方之一...可能是因为我不擅长css的原因. 背景我有一些自己喜欢的网站( CodeProject, Dr.Dobb's Journal, ComputerWorld, Inc. Magazine). 然而,我发现其中很多网站都有烦人的广告.风
如何用数据库制作一个多用户版的计数器？

count.asp ' 计数器的核心程序. <%Set conn = Server.CreateObject("ADODB.Connection")dbpath=server.MapPath("count.mdb")conn.open "driver={Microsoft Access Driver (*.mdb)};dbq="&DbPathuser=Request.QueryString("user") sql
使用Python制作一个数据预处理小工具(多种操作一键完成)

在我们平常使用Python进行数据处理与分析时,在import完一大堆库之后,就是对数据进行预览,查看数据是否出现了缺失值.重复值等异常情况,并进行处理. 本文将结合GUI工具PySimpleGUI,来讲解如何制作一款属于自己的数据预处理小工具,让这个过程也能够自动化!最终效果如下本文将分为三部分讲解: 制作GUI界面数据处理讲解打包与测试主要涉及将涉及以下模块: PySimpleGUI pandas matplotlib 一.GUI界面制作思路老规矩,先讲思路再上代码,首先还是说一
如何用 Python 制作 GitHub 消息助手

在互联网2.0时代,工程师解决业务问题主要依赖的是自己掌握的各种工具和软件伴随着席卷全球的开源浪潮,开源工具和软件也迅猛增长.工程师需要关注的技术和软件也随之越来越多,学习负担越来越大,大脑也越来越不够用.但工程师们也很无奈,因为谁掌握的技术和软件越多,谁就能更高效的解决问题.于是工程师们开始借助互联网外脑工具:尤其是搜索引擎.书签.github.scihub等而工程师们解决问题的能力就体现在了对外脑工具的利用上. 但是,随着工程师们要解决的问题增长以及自身知识的积累,外脑工具也逐渐变得臃肿:
如何用CocosCreator制作微信小游戏

CocosCreator在1.8版本开始,就支持一键发布微信小程序,下面是详细的发布步骤: 1.在微信公众平台下载微信开发者工具地址: https://mp.weixin.qq.com/debug/wxagame/dev/devtools/download.html?t=2018115,根据需要选择相应的版本. 2.cocoscreator设置选择Cocos Creator --> 偏好设置 --> 原生开发环境,配置WechatGame程序路径,点击保存并关闭. 3.配置构建发布下面
基于Matlab制作一个数独求解器

目录 1.完整效果 2.数独求解(错误示范) 3.数独求解(升维) 4.数字识别 5.GUI / APP 讲解一个完整的小项目,顺便说明如何使用整数规划求解数独. 1.完整效果 2.数独求解(错误示范) 首先我们先尝试如果只满足行.列.3x3块加和均为45的等式约束是否有效.即约束为: 每行和为45: 每列和为45: 每个3x3块和为45: 其中对此编写如下代码: sudokuMat=[1 0 5 0 2 0 0 0 0 0 0 0 7 4 3 0 0 5 3 0 7 0 0 0 0 0 9 0
python3使用pyqt5制作一个超简单浏览器的实例

我们使用的是QWebview模块,这里也主要是展示下QWebview的用法. 之前在网上找了半天的解析网页的内容,都不是很清楚. 这是核心代码: webview = Qwebview() webview.load(Qurl('http://www.cnblogs.com/Blaxon/')) webview.show() 完整代码(代码是拿的别的代码改得): from PyQt5.QtCore import * from PyQt5.QtWidgets import * from PyQt5.Q
详解如何用webpack打包一个网站应用项目

本文介绍了如何用webpack打包一个网站应用,现在分享给大家,有需要的可以了解一下随着前端技术的发展,越来越多新名词出现在我们眼前.angularjs.react.gulp.webpack.es6.babel--新技术出现,让我们了解了解用起来吧!今天我来介绍一下如何用webpack打包一个网页应用. 一般我们写页面,大概都是这样的结构: index.html css style.css js index.js ........... 这样我们的html里直接引用css和js,完成一个网页应

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

相关推荐

随机推荐