How to make a complete table with angularjs_AngularJS
Since I am also learning and writing at the same time, the organization is quite messy. Here is the complete code of my example to facilitate communication and testing. If you have any questions, please comment
First of all, the table is edited in BootStrap style, mainly using angularjs. For convenience, there is also a jQuery method. You need to introduce bootstrap, angularjs and jq files yourself during testing.
Overall code preview:
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 code:
<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>
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
AI Hentai Generator
Generate AI Hentai for free.
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
1378
52
How to create a table in Kingsoft Docs APP file_How to insert external photo album pictures in Kingsoft Docs mobile phone
Feb 28, 2024 pm 03:28 PM
Friends who have entered the workplace should have used Kingsoft Docs. This software has a computer version and a mobile version. In the mobile version of Kingsoft Docs, how to create or insert tables in a word document? In the office process, we often There will be situations where external pictures or tables need to be inserted into word files. Many newbies don’t know the method. In fact, using Kingsoft Docs can quickly help us insert tables and pictures. Just find the corresponding option on the mobile page. It can be operated, let’s learn with the editor below. How to create a table in Kingsoft Document APP file 1. First, we enter the Kingsoft Document Android APP on the mobile phone and click on the word document where the table needs to be inserted on the homepage. 2. After opening the word file, use your finger
The latest 5 angularjs tutorials in 2022, from entry to mastery
Jun 15, 2017 pm 05:50 PM
Javascript is a very unique language. It is unique in terms of the organization of the code, the programming paradigm of the code, and the object-oriented theory. The issue of whether Javascript is an object-oriented language that has been debated for a long time has obviously been There is an answer. However, even though Javascript has been dominant for twenty years, if you want to understand popular frameworks such as jQuery, Angularjs, and even React, just watch the "Black Horse Cloud Classroom JavaScript Advanced Framework Design Video Tutorial".
Use PHP and AngularJS to build a responsive website to provide a high-quality user experience
Jun 27, 2023 pm 07:37 PM
In today's information age, websites have become an important tool for people to obtain information and communicate. A responsive website can adapt to various devices and provide users with a high-quality experience, which has become a hot spot in modern website development. This article will introduce how to use PHP and AngularJS to build a responsive website to provide a high-quality user experience. Introduction to PHP PHP is an open source server-side programming language ideal for web development. PHP has many advantages, such as easy to learn, cross-platform, rich tool library, development efficiency
Build web applications using PHP and AngularJS
May 27, 2023 pm 08:10 PM
With the continuous development of the Internet, Web applications have become an important part of enterprise information construction and a necessary means of modernization work. In order to make web applications easy to develop, maintain and expand, developers need to choose a technical framework and programming language that suits their development needs. PHP and AngularJS are two very popular web development technologies. They are server-side and client-side solutions respectively. Their combined use can greatly improve the development efficiency and user experience of web applications. Advantages of PHPPHP
How to create tables in BarTender - How to create tables in BarTender
Mar 04, 2024 pm 09:30 PM
Many users are using the BarTender software, but do you know how to create tables with BarTender? Below, the editor will bring you how to create tables with BarTender. Let's take a look below. 1. A table is nothing more than a splicing of several straight lines, so in BarTender, we can use line and shape tools to draw the table; we usually use this method when dealing with simple tables. Use the rectangle as the outer frame of the BarTender table, and then add the necessary horizontal and vertical lines to get the following effect: 3. Another method is to make a table such as the required nutritional composition table in advance in the Excel table. Then copy and paste the table directly
How to create a table in word document
Mar 18, 2024 pm 02:09 PM
Production tutorial: 1. Open Microsoft Word, create a new document or open an existing document; 2. Move the cursor to the position where you want to insert the table; 3. In the Word menu bar, find the "Insert" tab and Click; 4. Click the "Table" button, click it and a table grid will pop up; 5. Hover the mouse over the table grid, select the required grid size according to the required number of rows and columns, and click the mouse Just left click to insert the table.
How to use wps to make a table-How to use wps to make a table
Mar 04, 2024 pm 11:01 PM
Many friends still don’t know how to use WPS to make tables, so the editor below will explain how to use WPS to make tables. If you are in need, please take a look. I believe it will be helpful to everyone. Step 1: Open the wps software, click "Table" at the top, and then click "New Blank Document" (as shown in the picture). Step 2: Open the wps table, select the cell example with 10 rows and 6 columns, click the "field" icon in the toolbar, and add a border line to the cell (as shown in the figure below). Step 3: Select the first line, use the combined sentence, and enter a concluding word (as shown in the picture). Step 4: Enter data in other blank cells, that is, a simple wps table is created (as shown in the picture). That’s the editor above
Use PHP and AngularJS to develop an online file management platform to facilitate file management
Jun 27, 2023 pm 01:34 PM
With the popularity of the Internet, more and more people are using the network to transfer and share files. However, due to various reasons, using traditional methods such as FTP for file management cannot meet the needs of modern users. Therefore, establishing an easy-to-use, efficient, and secure online file management platform has become a trend. The online file management platform introduced in this article is based on PHP and AngularJS. It can easily perform file upload, download, edit, delete and other operations, and provides a series of powerful functions, such as file sharing, search,
