如何用angularjs製作一個完整的表格_AngularJS-js教程-PHP中文網

首頁

web前端

js教程

如何用angularjs製作一個完整的表格_AngularJS

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 03:19 PM

angularjs 製作表格

由於本人也是邊學邊寫，因此整理的比較亂，下面放出我例子的完整代碼，方便大家交流測試，如有問題歡迎評論

首先，表格採用的是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: '&#63;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>

登入後複製

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

熱AI工具

熱工具

熱門話題

gmail信箱登陸入口在哪裡

7758

Java教學

1644

CakePHP 教程

1399

Laravel 教程

1293

PHP教程

1234

Related knowledge

金山文件APP檔如何製作表格_手機金山文件word插入外部相簿圖片方法 Feb 28, 2024 pm 03:28 PM

步入職場的小夥伴應該都使用過金山文檔，這款軟體有電腦版本和手機版本，在金山文檔的手機版本中，該如何在word文檔中製作或插入表格呢，在辦公過程中，我們經常會遇到word檔案需要插入外部圖片或表格的情況，很多新手小白不太了解方法，其實使用金山文檔就可以快速的幫我們實現表格和圖片的插入，只要在手機頁面中找到對應的選項就可以進行操作，下面和小編一起學習吧。金山文檔APP文件如何製作表格1，首先我們在手機上進入金山文檔安卓APP，在首頁點選需要插入表格的word文檔。 2，開啟word檔案之後，用手指

2022年最新5款的angularjs教學從入門到精通 Jun 15, 2017 pm 05:50 PM

Javascript 是一個非常有個性的語言. 無論是從程式碼的組織, 還是程式碼的程式設計範式, 或物件導向理論都獨具一格. 而很早就在爭論的Javascript 是不是物件導向語言這個問題, 顯然已有答案. 但是, 即使Javascript 叱吒風雲二十年, 如果想要看懂jQuery, Angularjs, 甚至是React 等流行框架, 觀看《黑馬雲課堂JavaScript 高級框架設計視頻教程》就對了。

使用PHP和AngularJS建立響應式網站，提供優質的使用者體驗 Jun 27, 2023 pm 07:37 PM

在現今資訊時代，網站已成為人們獲取資訊和交流的重要工具。一個響應式的網站能夠適應各種設備，為使用者提供優質的體驗，成為了現代網站開發的熱點。本篇文章將介紹如何使用PHP和AngularJS建立響應式網站，進而提供優質的使用者體驗。 PHP介紹PHP是一種開源的伺服器端程式語言，非常適合Web開發。 PHP具有許多優點，如易於學習、跨平台、豐富的工具庫、開發效

word文件怎麼製作表格 Mar 18, 2024 pm 02:09 PM

製作教學：1、開啟Microsoft Word，建立一個新的文件或開啟現有的文件；2、將遊標移到你想要插入表格的位置；3、在Word選單列中，找到「插入」標籤並點擊；4、點擊「表格」按鈕，點擊它會彈出一個表格網格；5、將滑鼠懸停在表格網格上，根據需要的行數和列數，選擇所需的網格大小，點擊滑鼠左鍵即可插入表格即可。

使用PHP和AngularJS建立Web應用 May 27, 2023 pm 08:10 PM

隨著網路的不斷發展，Web應用已成為企業資訊化建設的重要組成部分，也是現代化工作的必要手段。為了讓Web應用能夠方便開發、維護和擴展，開發人員需要選擇適合自己開發需求的技術框架和程式語言。 PHP和AngularJS是兩種非常流行的Web開發技術，它們分別是伺服器端和客戶端的解決方案，透過結合使用可以大大提高Web應用的開發效率和使用體驗。 PHP的優勢PHP

BarTender怎樣製作表格-BarTender製作表格的方法 Mar 04, 2024 pm 09:30 PM

很多的使用者都在使用BarTender軟體，不過你們曉得BarTender怎樣製作表格嗎?下文小編就為你們帶來了BarTender製作表格的方法，讓我們一起來下文看看吧。 1.表格無非就是數條直線拼接而成，所以在BarTender中，我們可以利用線條和形狀工具來繪製表格;通常在處理簡單的表格時，我們會採用這種方法。將矩形當作BarTender表格的外框，然後加入必要的水平和垂直線條，就可以得到以下效果：3、另一種方法則是可以在Excel表格中事先製作好需要的營養成分錶之類的表，然後直接複製表格貼上

怎麼用wps製作表格-用wps製作表格的方法 Mar 04, 2024 pm 11:01 PM

有很多朋友還不知道怎麼用wps製作表格，所以下面小編就講解了用wps製作表格的方法，有需要的小伙伴趕緊來看一下吧，相信對大家一定會有所幫助哦。第一步：開啟wps軟體，點選頂部的“表格”，再點選“新建空白文件”(如圖)。第二步：開啟wps表格，選取10行6列的儲存格範例，點選工具列中的「田」字圖標，為儲存格新增邊框線（如下圖所示）。第三步：選取第一行，使用合併句中，在輸入一個總結性的字即可(如圖)。第四步：在其他空白儲存格中輸入資料即，一個簡單的wps表格就做出來了(如圖所示)。上面就是小編

使用Flask和AngularJS建立單頁Web應用程式 Jun 17, 2023 am 08:49 AM

隨著Web技術的快速發展，單頁Web應用程式（SinglePageApplication,SPA）已成為越來越流行的Web應用程式模型。相較於傳統的多頁Web應用程序，SPA的最大優勢在於使用者感受更加流暢，同時伺服器端的運算壓力也大幅減少。在本文中，我們將介紹如何使用Flask和AngularJS來建構一個簡單的SPA。 Flask是一款輕量級的Py

See all articles

如何用angularjs製作一個完整的表格_AngularJS

熱AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

Video Face Swap

熱門文章

熱工具

記事本++7.3.1

SublimeText3漢化版

禪工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

熱門話題