欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時間：2016年01月21日 11:02:56   作者：lvyi  
本文給大家分享的是使用angularjs制作一個完整的表格的真實案例，結合前幾篇的內(nèi)容，把整個完整的代碼分享給大家，有需要的小伙伴可以參考下

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

首先，表格采用的是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實現(xiàn)點擊一行就選中暫時無法實現(xiàn) -->
       <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="";//用于保存得到的原始數(shù)據(jù)
// $http.post請求表格數(shù)據(jù)
// 模仿請求得到的數(shù)據(jù)
  var datalist=[{
   id:1,zbname:"中亞賽區(qū)比賽",zbtime:"2015-12-03",zbrul1:"勝利",zbrul2:"失敗",por:"請輸入說明內(nèi)容",score:"2:1",type:"支持紅方"},{
   id:2,zbname:"日韓賽區(qū)比賽",zbtime:"2015-11-11",zbrul1:"勝利",zbrul2:"勝利",por:"請輸入說明內(nèi)容",score:"2:1",type:"支持藍方"},{
   id:3,zbname:"歐美賽區(qū)比賽",zbtime:"2015-3-03",zbrul1:"失敗",zbrul2:"勝利",por:"請輸入說明內(nèi)容",score:"2:1",type:"雙方相同"},{
   id:4,zbname:"中東賽區(qū)比賽",zbtime:"2016-1-05",zbrul1:"勝利",zbrul2:"失敗",por:"請輸入說明內(nèi)容",score:"2:1",type:"支持藍方"},{
   id:5,zbname:"北京賽區(qū)比賽",zbtime:"2014-12-23",zbrul1:"失敗",zbrul2:"勝利",por:"請輸入說明內(nèi)容",score:"2:1",type:"雙方相同"},{
   id:6,zbname:"韓國賽區(qū)比賽",zbtime:"2015-11-01",zbrul1:"失敗",zbrul2:"勝利",por:"請輸入說明內(nèi)容",score:"2:1",type:"雙方相同"},{
   id:7,zbname:"日本賽區(qū)比賽",zbtime:"2011-1-23",zbrul1:"勝利",zbrul2:"失敗",por:"請輸入說明內(nèi)容",score:"2:1",type:"支持紅方"},{
   id:8,zbname:"中亞賽區(qū)比賽",zbtime:"2013-12-15",zbrul1:"失敗",zbrul2:"勝利",por:"請輸入說明內(nèi)容",score:"2:1",type:"支持藍方"},{
   id:9,zbname:"中亞賽區(qū)比賽",zbtime:"2015-10-17",zbrul1:"失敗",zbrul2:"勝利",por:"請輸入說明內(nèi)容",score:"2:1",type:"支持紅方"},{
   id:10,zbname:"中亞賽區(qū)比賽",zbtime:"2015-11-21",zbrul1:"勝利",zbrul2:"勝利",por:"請輸入說明內(nèi)容",score:"2:1",type:"支持藍方"},{
   id:11,zbname:"中亞賽區(qū)比賽",zbtime:"2015-2-02",zbrul1:"失敗",zbrul2:"失敗",por:"請輸入說明內(nèi)容",score:"2:1",type:"支持紅方"},{
   id:12,zbname:"中亞賽區(qū)比賽",zbtime:"2015-2-05",zbrul1:"勝利",zbrul2:"失敗",por:"請輸入說明內(nèi)容",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("結束賦予數(shù)據(jù)");
   $scope.$watch("saveDate",function(){//2016.1.20監(jiān)聽列表生成數(shù)據(jù)，當發(fā)生變化時執(zhí)行刷新列表
    table_page();
    $scope.isshow=true;
   });
  }

  $scope.save=function(){//頁面提交按鈕
   console.log("準備保存");
   console.log($scope.saveDate);//只要數(shù)據(jù)改變，自動保存到原始數(shù)據(jù)列表中

  }

  //表格分頁功能
  function table_page(){
   var show_page=5;//每頁顯示的條數(shù)
   var page_all=$("#page").children().size();//總條數(shù)
   var current_page=1;//當前頁
//  console.log(page_all);
   var page_num=Math.ceil(page_all/show_page);//總頁數(shù)
   var current_num=0;//用于生成頁標的計數(shù)器
   var li="";//頁標元素
   while(page_num>current_num){//循環(huán)生成頁標元素
    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("&nbsp;"+current_page+"&nbsp;");//顯示當前頁
   $("#page_all").html("&nbsp;"+page_num+"&nbsp;");//顯示總頁數(shù)
   $("#previous").click(function(){//上一頁
    var new_page=parseInt($("#current_page").text())-1;
    if(new_page>0){
     $("#current_page").html("&nbsp;"+new_page+"&nbsp;");
     tab_page(new_page);
    }
   });
   $("#next").click(function(){//下一頁
    var new_page=parseInt($("#current_page").text())+1;//當前頁標
    if(new_page<=page_num){//判斷是否為最后或第一頁
     $("#current_page").html("&nbsp;"+new_page+"&nbsp;");
     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;//截取個數(shù)
    $('#page').children().css('display', 'none').slice(start, end).css('display', '');
    current_page=index;
    $("#current_page").html("&nbsp;"+current_page+"&nbsp;");
   }
  }

 }).directive('contenteditable', function() {//自定義ngModel的屬性可以用在div等其他元素中
  return {
   restrict: 'A', // 作為屬性使用
   require: '?ngModel', // 此指令所代替的函數(shù)
   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>

相關文章

最新評論