AngularJS在页面对表格进行增加、查询、排序

最新推荐文章于 2023-08-14 16:23:30 发布

qq_39714476

最新推荐文章于 2023-08-14 16:23:30 发布

阅读量481

点赞数

分类专栏： AngularJS在页面对表格进行增加、查询、排序文章标签： AngularJS在页面对表格进行增加查

本文链接：https://blog.csdn.net/qq_39714476/article/details/78332843

版权

AngularJS在页面对表格进行增加、查询、排序专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.left{
float: left;
}
.right{
float: right;
}
.even{
background-color: blue;
}
.odd{
background-color: red;
}
.first{
background-color: yellow;
}
.f{
background-color: pink;
}
.d{
background-color: green;
}
</style>
<script type="text/javascript" src="../jQuery-2.1.0/jquery-2.1.0.js" ></script>
<script type="text/javascript" src="../AngularJS/angular.js" ></script>
<script type="text/javascript" src="../AngularJS/angular-route.js" ></script>
<script>
$(function(){
$("thead tr").addClass("first");
$("tbody tr:even").addClass("even");
$("tbody tr:odd").addClass("odd");

$("tbody tr").mousemove(function(){
//alert("asdf");
$(this).addClass("f");
});
$("tbody tr").mouseout(function(){
//alert("asdf");
$(this).removeClass("f");
});
$("#tr td").mousedown(function(){
//alert("asdf");
$(this).addClass("d");
});
$("#tr td").mouseup(function(){
//alert("asdf");
$(this).removeClass("d");
});
});
</script>
<script>
var app = angular.module("myApp",["ngRoute"]);
//定义路由器
app.config(["$routeProvider",function($routeProvider){
//使用$routeProvider服务，配置路由规则
$routeProvider
.when("/addPlayer",{
controller:"addPlayerCtrl",
templateUrl:"addPlayer.html"
})
.otherwise({redirectTo:"/addPlayer"});
}]);
//自定义过滤器
app.filter("myFilter",function(){
return function(text){
if(text.indexOf("敏感字符")>=0){
//替换字符串
return text.replace(/敏感字符/g,"****");
}else{
return text;
}
}
});

app.controller("myCtrl",function($scope,$location){
//定义数据源
$scope.players = [{
name:"张三",
place:"控球后卫",
num:11,
ticket:999
},{
name:"李四",
place:"大前锋",
num:21,
ticket:888
},{
name:"王五",
place:"小前锋",
num:23,
ticket:777
},{
name:"赵六",
place:"中锋",
num:10,
ticket:666
},{
name:"周七",
place:"得分后卫",
num:1,
ticket:555
}];

$scope.order = "-ticket";

//点击事件触发路由路径：跳转
$scope.goToUrl = function(){
$location.path("/addPlayer");
}
});

//添加用户的控制器
app.controller("addPlayerCtrl",function($scope){
$scope.name = "";
$scope.place = "";
$scope.num = "";
$scope.ticket = "";
//点击添加按钮，执行sub方法
$scope.sub = function(){
var flag1 = flag2 = flag3 = flag4 = false;

if($scope.name == null || $scope.name == ""){
alert("球员名不能为空");
flag1 = false;
}else {
var flag = true;
for(player in $scope.players){
if($scope.players[player].name == $scope.name){
alert("重复")
flag = false;
flag1 = false;
}

}
if(flag){
flag1 = true;
}else{

}
}
if($scope.place == null || $scope.place == ""){
alert("位置不能为空");
flag2 = false;
}else{
flag2 = true;
}
if($scope.num == null || $scope.num == ""){
alert("球号不能为空");
flag3 = false;
}else{
flag3 = true;
}
if($scope.ticket == null || $scope.ticket == ""){
alert("票数不能为空");
flag4 = false;
}else{
flag4 = true;
}

//判断添加用户
if(flag1 && flag2 && flag3 && flag4){
//如果都为true即输入框都不为空，添加用户
var palyer = {
name:$scope.name,
place:$scope.place,
num:$scope.num,
ticket:parseInt($scope.ticket)
};
//将用户添加到数据源
$scope.players.push(palyer);
}
}
});
</script>

</head>
<body ng-app="myApp" ng-controller="myCtrl">
<center>
<div style="width: 500px;">
<div class="left">
查询<br/>
<input type="text" ng-model="search "/>
</div>
<div class="right">
排序<br/>
<select ng-model="order">
<option value="-ticket">票数倒叙</option>
<option value="ticket">票数正叙</option>
<option value="-num">球号倒叙</option>
<option value="num">球号正叙</option>
</select>
</div>
</div>
<button ng-click="goToUrl()" style="margin-top: 80px;">新增球员</button><br /><br />
<table border="1 solid blue" cellpadding="20" cellspacing="0">
<thead>
<tr>
<th>姓名</th>
<th>位置</th>
<th>球号</th>
<th>票数</th>
</tr>
</thead>
<tbody>
<tr id="tr" ng-repeat="player in players | filter:search | orderBy:order">
<td>{{player.name}}</td>
<td>{{player.place}}</td>
<td>{{player.num}}</td>
<td>{{player.ticket}}</td>
</tr>
</tbody>
</table>
<br />
<div ng-view>

</div>

</center>


<script type="text/ng-template" id="addPlayer.html">
<form>
姓名:<input type="text" ng-model="name"/><br/>
位置:<input type="text" ng-model="place"/><br />
球号:<input type="text" ng-model="num"/><br />
票数:<input type="text" ng-model="ticket"/><br />
<input type="button" value="添加" ng-click="sub()"/>
</form>
</script>

</body>
</html>

qq_39714476

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
AngularJS在页面对表格进行增加、查询、排序

.left{float: left;}.right{float: right;}.even{background-color: blue;}.odd{background-color: red;}.first{background-color: yellow;}.f{background-color: pink;}.d{b
复制链接

扫一扫