Buat jadual mudah menggunakan angularjs_AngularJS-tutorial js-php.cn

Buat jadual mudah menggunakan angularjs_AngularJS

WBOY

Lepaskan： 2016-05-16 15:18:56

asal

1347 orang telah melayarinya

Ini adalah projek pertama saya dalam hidup saya, saya perlu menggunakan angularjs untuk membuat jadual dan melaksanakan pelbagai fungsi, saya menghadapi pelbagai masalah dan titik pengetahuan yang saya tidak biasa dengannya belajar, berkomunikasi dan menyelesaikan Ia mungkin tidak sempurna atau memenuhi spesifikasi Jika anda mempunyai cara yang lebih baik, sila tunjukkan Oleh kerana penghasilan fungsi jadual ini ditambah sedikit demi sedikit, saya juga akan memperkenalkannya dalam beberapa bahagian. Jika fungsi baharu ditambah pada masa hadapan, saya juga akan memperkenalkannya dari semasa ke semasa

Pertama sekali, jadual disunting dalam gaya BootStrap, terutamanya menggunakan angularjs Untuk kemudahan, terdapat juga kaedah jQuery Anda perlu memperkenalkan fail bootstrap, angularjs dan jq sendiri semasa ujian.

Teks:

Bahagian HTML

Menjana jadual agak mudah, terutamanya melalui pengikatan data angularjs dan ng-repeat untuk menjana setiap maklumat secara automatik.

1. Mula-mula anda perlu menyesuaikan kandungan pengepala, iaitu kod dalam iklan

　1.1 Antaranya, ng-model ialah fungsi semua pilihan bagi kotak semak Dengan mengikat data keadaan ini, ia boleh ditetapkan secara serentak kepada semua kotak semak dalam tbody (menggunakan ng-checked)

2. Gelung melalui ng-ulang dalam badan untuk menjana setiap maklumat, di mana:

　2.1

ialah div yang menyokong memasukkan kandungan berbilang baris dan boleh menggantikan dengan cepat dan mudah tag textarea Walau bagaimanapun, memandangkan model ng tidak menyokong pengikatan data div, anda perlu menggunakan arahan untuk menyesuaikan fungsi ngmodel, yang akan dibincangkan kemudian

　2.3 Gunakan teg pilih dalam ng-repeat untuk mengikat data Anda tidak boleh mengikat model-ng pada setiap pilihan Ini akan diterangkan kemudian

3 Akhir sekali, tetapkan data kepada $scope.saveData untuk menjana jadual

<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>

Salin selepas log masuk

Bahagian JS: Ambil perhatian bahawa semua kod bahagian skrip ditulis dalam angular.module("myModule",[]).controller('myCtrl', function($scope) {written here} Medium

Salin kod Kod adalah seperti berikut:

$scope.isshow=true;

// Tiru data yang diperoleh daripada permintaan

$scope.saveDate=[{ id:1,zbname:"Pertandingan Bahagian Asia Tengah",zbtime:"2015-12-03",zbrul1:"Victory",zbrul2:"Failure",por:"Sila masukkan keterangan" ,skor:"2:1",taip:"sokong sebelah merah"},

{ id:2,zbname:"Pertandingan Bahagian Jepun-Korea",zbtime:"2015-11-11",zbrul1:"Victory",zbrul2:"Victory",por:"Sila masukkan keterangan",skor:"2 : 1",jenis:"sokong bahagian biru"},

{ id:3,zbname:"Pertandingan Eropah dan Amerika",zbtime:"2015-3-03",zbrul1:"Failure",zbrul2:"Victory",por:"Sila masukkan keterangan",skor:"2: 1 ",type:"Kedua-dua belah adalah sama"},

{ id:4,zbname:"Pertandingan Bahagian Timur Tengah",zbtime:"2016-1-05",zbrul1:"Victory",zbrul2:"Failure",por:"Sila masukkan keterangan",skor:"2: 1 ",type:"Sokong bahagian biru"},

{ id:5,zbname:"Pertandingan Bahagian Beijing",zbtime:"2014-12-23",zbrul1:"Failure",zbrul2:"Victory",por:"Sila masukkan keterangan",skor:"2:1 ",type:"Kedua-dua belah adalah sama"},

{ id:6,zbname:"Pertandingan Bahagian Korea",zbtime:"2015-11-01",zbrul1:"Failure",zbrul2:"Victory",por:"Sila masukkan keterangan",skor:"2:1 ",type:"Kedua-dua belah adalah sama"},

{ id:7,zbname:"Pertandingan Bahagian Jepun",zbtime:"2011-1-23",zbrul1:"Victory",zbrul2:"Failure",por:"Sila masukkan keterangan",skor:"2:1 ",type:"Sokong bahagian merah"},

{ id:8,zbname:"Pertandingan Bahagian Asia Tengah",zbtime:"2013-12-15",zbrul1:"Failure",zbrul2:"Victory",por:"Sila masukkan keterangan",skor:"2: 1", taip:"sokong bahagian biru"},

{ id:9,zbname:"Pertandingan Bahagian Asia Tengah",zbtime:"2015-10-17",zbrul1:"Failure",zbrul2:"Victory",por:"Sila masukkan keterangan",skor:"2: 1", jenis:"Sokong segi empat sama merah"},

{ id:10,zbname:"Pertandingan Bahagian Asia Tengah",zbtime:"2015-11-21",zbrul1:"Victory",zbrul2:"Victory",por:"Sila masukkan keterangan",skor:"2: 1", taip:"sokong bahagian biru"},

{ id:11,zbname:"Pertandingan Bahagian Asia Tengah",zbtime:"2015-2-02",zbrul1:"Failure",zbrul2:"Failure",por:"Sila masukkan penerangan",skor:"2: 1", jenis:"Sokong segi empat sama merah"},

{ id:12,zbname:"Pertandingan Bahagian Asia Tengah",zbtime:"2015-2-05",zbrul1:"Victory",zbrul2:"Failure",por:"Sila masukkan keterangan",skor:"2: 1",type:"Kedua-dua belah adalah sama"}

]; // var arr=[]; // Digunakan untuk mengikat setiap maklumat data yang dijana dalam ngrepeat