hujung hadapan web
tutorial js
Bagaimana untuk membuat jadual lengkap dengan angularjs_AngularJS
Bagaimana untuk membuat jadual lengkap dengan angularjs_AngularJS
Memandangkan saya juga sedang belajar dan menulis pada masa yang sama, organisasi ini agak berantakan Berikut adalah kod lengkap contoh saya untuk memudahkan komunikasi dan ujian Jika anda mempunyai sebarang pertanyaan, sila komen
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.
Pratonton kod keseluruhan:
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>
kod 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>
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
AI Hentai Generator
Menjana ai hentai secara percuma.
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
1377
52
Cara membuat jadual dalam fail APP Kingsoft Docs_Cara memasukkan gambar album foto luaran dalam telefon mudah alih Kingsoft Docs
Feb 28, 2024 pm 03:28 PM
Rakan-rakan yang telah memasuki tempat kerja sepatutnya menggunakan Kingsoft Docs Perisian ini mempunyai versi komputer dan versi mudah alih Dalam versi mudah alih Kingsoft Docs, bagaimana untuk membuat atau memasukkan jadual dalam dokumen perkataan akan menjadi situasi di mana gambar atau jadual luaran perlu disisipkan ke dalam fail perkataan Ramai pemula tidak tahu kaedah tersebut, sebenarnya, menggunakan Kingsoft Docs boleh membantu kami memasukkan jadual dan gambar dengan cepat. Ia boleh dikendalikan, mari belajar dengan editor di bawah. Cara membuat jadual dalam fail Kingsoft Document APP 1. Mula-mula, kita masukkan Kingsoft Document Android APP pada telefon bimbit dan klik pada dokumen perkataan di mana jadual perlu dimasukkan pada halaman utama. 2. Selepas membuka fail perkataan, gunakan jari anda
2022年最新5款的angularjs教程从入门到精通
Jun 15, 2017 pm 05:50 PM
Javascript 是一个非常有个性的语言. 无论是从代码的组织, 还是代码的编程范式, 还是面向对象理论都独具一格. 而很早就在争论的Javascript 是不是面向对象语言这个问题, 显然已有答案. 但是, 即使 Javascript 叱咤风云二十年, 如果想要看懂 jQuery, Angularjs, 甚至是 React 等流行框架, 观看《黑马云课堂JavaScript 高级框架设计视频教程》就对了。
Gunakan PHP dan AngularJS untuk membina tapak web responsif untuk menyediakan pengalaman pengguna yang berkualiti tinggi
Jun 27, 2023 pm 07:37 PM
Dalam era maklumat hari ini, laman web telah menjadi alat penting untuk orang ramai mendapatkan maklumat dan berkomunikasi. Tapak web responsif boleh menyesuaikan diri dengan pelbagai peranti dan memberikan pengguna pengalaman berkualiti tinggi, yang telah menjadi tumpuan dalam pembangunan tapak web moden. Artikel ini akan memperkenalkan cara menggunakan PHP dan AngularJS untuk membina tapak web responsif untuk memberikan pengalaman pengguna yang berkualiti tinggi. Pengenalan kepada PHP PHP ialah bahasa pengaturcaraan sisi pelayan sumber terbuka yang sesuai untuk pembangunan web. PHP mempunyai banyak kelebihan, seperti mudah dipelajari, merentas platform, perpustakaan alat yang kaya, kecekapan pembangunan
Bina aplikasi web menggunakan PHP dan AngularJS
May 27, 2023 pm 08:10 PM
Dengan pembangunan berterusan Internet, aplikasi Web telah menjadi bahagian penting dalam pembinaan maklumat perusahaan dan cara kerja pemodenan yang diperlukan. Untuk menjadikan aplikasi web mudah dibangunkan, diselenggara dan dikembangkan, pembangun perlu memilih rangka kerja teknikal dan bahasa pengaturcaraan yang sesuai dengan keperluan pembangunan mereka. PHP dan AngularJS ialah dua teknologi pembangunan web yang sangat popular. Kedua-duanya adalah penyelesaian bahagian pelayan dan bahagian pelanggan. Penggunaan gabungan mereka boleh meningkatkan kecekapan pembangunan dan pengalaman pengguna aplikasi web. Kelebihan PHPPHP
Cara membuat jadual dalam BarTender - Cara membuat jadual dalam BarTender
Mar 04, 2024 pm 09:30 PM
Ramai pengguna menggunakan perisian BarTender, tetapi adakah anda tahu cara membuat jadual dalam BarTender Di bawah, editor akan membawa anda cara membuat jadual dalam BarTender. Mari lihat di bawah. 1. Jadual tidak lebih daripada penyambungan beberapa garis lurus, jadi dalam BarTender, kita boleh menggunakan alat garis dan bentuk untuk melukis jadual; kita biasanya menggunakan kaedah ini apabila berurusan dengan jadual mudah. Gunakan segi empat tepat sebagai bingkai luar jadual BarTender, dan kemudian tambahkan garisan mendatar dan menegak yang diperlukan, anda boleh mendapatkan kesan berikut: 3. Kaedah lain ialah membuat jadual bahan pemakanan yang diperlukan terlebih dahulu dalam jadual Excel dan tampal meja terus
Cara membuat jadual dalam dokumen word
Mar 18, 2024 pm 02:09 PM
Tutorial pengeluaran: 1. Buka Microsoft Word, buat dokumen baru atau buka dokumen sedia ada 2. Gerakkan kursor ke kedudukan di mana anda ingin memasukkan jadual 3. Dalam bar menu Word, cari tab "Sisipkan". Klik; 4. Klik butang "Jadual", klik padanya dan grid jadual akan muncul 5. Tuding tetikus di atas grid jadual, pilih saiz grid yang diperlukan mengikut bilangan baris dan lajur yang diperlukan, dan klik tetikus; Hanya klik kiri untuk memasukkan jadual.
Cara menggunakan wps untuk membuat jadual-Cara menggunakan wps untuk membuat jadual
Mar 04, 2024 pm 11:01 PM
Ramai rakan masih tidak tahu cara menggunakan WPS untuk membuat jadual, jadi editor di bawah akan menerangkan cara menggunakan WPS untuk membuat jadual Jika anda memerlukan, cepat dan lihat saya percaya ia akan membantu semua orang . Langkah 1: Buka perisian wps, klik "Jadual" di bahagian atas, dan kemudian klik "Dokumen Kosong Baharu" (seperti yang ditunjukkan dalam gambar). Langkah 2: Buka jadual wps, pilih contoh sel dengan 10 baris dan 6 lajur, klik ikon "medan" dalam bar alat dan tambah garis sempadan pada sel (seperti yang ditunjukkan dalam rajah di bawah). Langkah 3: Pilih baris pertama, gunakan ayat gabungan, dan masukkan kata penutup (seperti yang ditunjukkan dalam gambar). Langkah 4: Masukkan data dalam sel kosong lain, iaitu jadual wps mudah dibuat (seperti yang ditunjukkan dalam gambar). Itu editor di atas
Gunakan PHP dan AngularJS untuk membangunkan platform pengurusan fail dalam talian untuk memudahkan pengurusan fail
Jun 27, 2023 pm 01:34 PM
Dengan populariti Internet, semakin ramai orang menggunakan rangkaian untuk memindahkan dan berkongsi fail. Namun, atas pelbagai sebab, pengurusan fail menggunakan kaedah tradisional seperti FTP tidak dapat memenuhi keperluan pengguna moden. Oleh itu, mewujudkan platform pengurusan fail dalam talian yang mudah digunakan, cekap dan selamat telah menjadi satu trend. Platform pengurusan fail dalam talian yang diperkenalkan dalam artikel ini adalah berdasarkan PHP dan AngularJS Ia boleh melakukan muat naik, memuat turun, mengedit, memadam dan operasi lain dengan mudah, dan menyediakan satu siri fungsi yang berkuasa, seperti perkongsian fail, carian,
