angularjs_AngularJS を使用して完全なテーブルを作成する方法-jsチュートリアル-php.cn

ホームページ

ウェブフロントエンド

jsチュートリアル

angularjs_AngularJS を使用して完全なテーブルを作成する方法

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 03:19 PM

angularjsテーブルを作る

私は学習と執筆を同時に行っているので、この構成はかなり乱雑です。コミュニケーションとテストを容易にするために、ここに私の例の完全なコードを示します。ご質問があれば、コメントしてください。

まず、テーブルは主に angularjs を使用して 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 までご連絡ください。

JavaScriptエンジン：実装の比較Apr 13, 2025 am 12:05 AM

さまざまなJavaScriptエンジンは、各エンジンの実装原則と最適化戦略が異なるため、JavaScriptコードを解析および実行するときに異なる効果をもたらします。 1。語彙分析：ソースコードを語彙ユニットに変換します。 2。文法分析：抽象的な構文ツリーを生成します。 3。最適化とコンパイル：JITコンパイラを介してマシンコードを生成します。 4。実行：マシンコードを実行します。 V8エンジンはインスタントコンピレーションと非表示クラスを通じて最適化され、Spidermonkeyはタイプ推論システムを使用して、同じコードで異なるパフォーマンスパフォーマンスをもたらします。

ブラウザを超えて：現実世界のJavaScriptApr 12, 2025 am 12:06 AM

現実世界におけるJavaScriptのアプリケーションには、サーバー側のプログラミング、モバイルアプリケーション開発、モノのインターネット制御が含まれます。 2。モバイルアプリケーションの開発は、ReactNativeを通じて実行され、クロスプラットフォームの展開をサポートします。 3.ハードウェアの相互作用に適したJohnny-Fiveライブラリを介したIoTデバイス制御に使用されます。

next.jsを使用してマルチテナントSaaSアプリケーションを構築する（バックエンド統合）Apr 11, 2025 am 08:23 AM

私はあなたの日常的な技術ツールを使用して機能的なマルチテナントSaaSアプリケーション（EDTECHアプリ）を作成しましたが、あなたは同じことをすることができます。まず、マルチテナントSaaSアプリケーションとは何ですか？マルチテナントSaaSアプリケーションを使用すると、Singの複数の顧客にサービスを提供できます

next.jsを使用してマルチテナントSaaSアプリケーションを構築する方法（フロントエンド統合）Apr 11, 2025 am 08:22 AM

この記事では、許可によって保護されたバックエンドとのフロントエンド統合を示し、next.jsを使用して機能的なedtech SaaSアプリケーションを構築します。 FrontEndはユーザーのアクセス許可を取得してUIの可視性を制御し、APIリクエストがロールベースに付着することを保証します

JavaScript：Web言語の汎用性の調査Apr 11, 2025 am 12:01 AM

JavaScriptは、現代のWeb開発のコア言語であり、その多様性と柔軟性に広く使用されています。 1）フロントエンド開発：DOM操作と最新のフレームワーク（React、Vue.JS、Angularなど）を通じて、動的なWebページとシングルページアプリケーションを構築します。 2）サーバー側の開発：node.jsは、非ブロッキングI/Oモデルを使用して、高い並行性とリアルタイムアプリケーションを処理します。 3）モバイルおよびデスクトップアプリケーション開発：クロスプラットフォーム開発は、反応および電子を通じて実現され、開発効率を向上させます。

JavaScriptの進化：現在の傾向と将来の見通しApr 10, 2025 am 09:33 AM

JavaScriptの最新トレンドには、TypeScriptの台頭、最新のフレームワークとライブラリの人気、WebAssemblyの適用が含まれます。将来の見通しは、より強力なタイプシステム、サーバー側のJavaScriptの開発、人工知能と機械学習の拡大、およびIoTおよびEDGEコンピューティングの可能性をカバーしています。

javascriptの分解：それが何をするのか、なぜそれが重要なのかApr 09, 2025 am 12:07 AM

JavaScriptは現代のWeb開発の基礎であり、その主な機能には、イベント駆動型のプログラミング、動的コンテンツ生成、非同期プログラミングが含まれます。 1）イベント駆動型プログラミングにより、Webページはユーザー操作に応じて動的に変更できます。 2）動的コンテンツ生成により、条件に応じてページコンテンツを調整できます。 3）非同期プログラミングにより、ユーザーインターフェイスがブロックされないようにします。 JavaScriptは、Webインタラクション、シングルページアプリケーション、サーバー側の開発で広く使用されており、ユーザーエクスペリエンスとクロスプラットフォーム開発の柔軟性を大幅に改善しています。

pythonまたはjavascriptの方がいいですか？Apr 06, 2025 am 12:14 AM

Pythonはデータサイエンスや機械学習により適していますが、JavaScriptはフロントエンドとフルスタックの開発により適しています。 1. Pythonは、簡潔な構文とリッチライブラリエコシステムで知られており、データ分析とWeb開発に適しています。 2。JavaScriptは、フロントエンド開発の中核です。 node.jsはサーバー側のプログラミングをサポートしており、フルスタック開発に適しています。

See all articles