混合开发增删改查排序

最新推荐文章于 2022-08-18 22:51:06 发布

马来西亚丶之力

最新推荐文章于 2022-08-18 22:51:06 发布

阅读量119

点赞数

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript" src="js/angular.min.js" ></script>
<script type="text/javascript" src="js/jquery-3.2.1.min.js" ></script>
<script>
var app = angular.module("myApp",[]);
app.controller("myCtrl",function($scope,$http){
$scope.moves = "",
//网络请求数据
$http({
method:"get",
url:"http://result.eolinker.com/rR1VBtT56a6bb220c10b3d44b65b4787a8aec03c4ec32ce?uri=MonthTest"
}).then(function success(response){

$scope.moves = response.data;//获得网络请求的数据
debugger;
},function error(response){
debugger;
}).finally();

//查询过滤的条件
$scope.searchKey = "";
//排序条件
$scope.orderKey = "";
//显示添加区域的标记
$scope.showAdd = false;
//添加信息字段的绑定属性
$scope.mname = "";
$scope.mprice = "";
$scope.mtime = "";

//添加函数
$scope.addMove = function(){
//获得新数据，创建电影对象
var _move = {};
_move.name = $scope.mname;
_move.price = $scope.mprice;
_move.time = $scope.mtime;
//添加到数据源中
$scope.moves.push(_move);
//关闭添加区域
$scope.showAdd = false;
};
//删除函数
$scope.deleteOne = function(dname){
//for循环遍历数据源
for(var i=0;i<$scope.moves.length;i++){
//得到一个电影信息
var cmove = $scope.moves[i];
if(cmove.name == dname){
$scope.moves.splice(i,1);
break;
}
}
};

//批量删除
$scope.deleteMore = function(){
//获得所有要删除的电影的复选框
var cks = $("input[type=checkbox]:checked");
//遍历汇集所有要删除的电影的名字,,,收集要删除的电影的名字
var cknames = "";
for(var i=0;i<cks.length;i++){
var ckname = cks[i].value;
cknames = cknames + ckname+",";
}
//for循环遍历数据源，，保存不删除的电影
var lastMoves = [];//用来存放不删除的电影的容器
for(var i=0;i<$scope.moves.length;i++){
var a = $scope.moves[i];//得到一个电影
if(cknames.indexOf(a.name) == -1){//这个电影的名字不在删除的范围之内,,保存
lastMoves.push(a);
}
}
//重新设置数据源
$scope.moves = lastMoves;
};

$scope.sname = "";
$scope.sprice = "";
$scope.stime = "";

$scope.showUpdate = false;
//修改----回显功能
$scope.showMove = "";//引用要修改的电影对象
$scope.showOne = function(sname){
$scope.showUpdate = true;
for(var i=0;i<$scope.moves.length;i++){
//得到一个电影信息
var smove = $scope.moves[i];
if(smove.name == sname){//找到要修改的电影信息
$scope.showMove = smove;
break;//找到后，跳出循环
}
}
//显示修改信息
$scope.sname = $scope.showMove.name;
$scope.sprice = $scope.showMove.price;
$scope.stime = $scope.showMove.time;
}
//最终修改
$scope.updateMove = function(){
$scope.showMove.name = $scope.sname;
$scope.showMove.price = $scope.sprice;
$scope.showMove.time = $scope.stime;
$scope.showUpdate = false;
}
});

</script>
<style>
.red{
background-color: red;
}
.green{
background-color: green;
}
</style>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<center>
<div>
查询：<input type="text" ng-model="searchKey" />
<select ng-model="orderKey">
<option value="">--请选择--</option>
<option value="name">名字正序</option>
<option value="-name">名字倒序</option>
<option value="price">票价正序</option>
<option value="-price">票价倒序</option>
</select>
<input type="button" value="入库" ng-click="showAdd=true"/>  
<input type="button" value="批量删除" ng-click="deleteMore();"/>
</div>
<br />
<div ng-show="showAdd">
名字：<input type="text" ng-model="mname"/><br />
票价：<input type="text" ng-model="mprice"/><br />
时长：<input type="text" ng-model="mtime"/><br />
<input type="button" value="添加" ng-click="addMove();"/>
</div>
<br />
<table border="1px" cellpadding="1px" cellspacing="0px">
<tr style="background-color: grey;">
<th><input type="checkbox" ng-model="checkAll"/></th>
<th>序号</th>
<th>名字</th>
<th>票价</th>
<th>时长</th>
<th>类型</th>
<th>导演</th>
<th>时间</th>
<th>评分</th>
<th>操作</th>
</tr>
<tr ng-repeat="m in moves |filter:searchKey |orderBy:orderKey" class="{{$index%2==0?'red':'green'}}">
<td><input type="checkbox" value="{{m.name}}" ng-model="checkAll"/></td>
<td>{{$index}}</td>
<td>{{m.name}}</td>
<td>{{m.price}}</td>
<td>{{m.time}}</td>
<td>{{m.type[0]}},{{m.type[1]}}</td>
<td>{{m.author}}</td>
<td>{{m.playTime |date:"yyyy-MM-dd hh:mm:ss"}}</td>
<td>{{m.score}}</td>
<td><input type="button" value="删除" ng-click="deleteOne(m.name);"/>
<input type="button" value="修改" ng-click="showOne(m.name);"/>
</td>
</tr>
</table>
<div ng-show="showUpdate">
名字：<input type="text" ng-model="sname"/><br />
票价：<input type="text" ng-model="sprice"/><br />
时长：<input type="text" ng-model="stime"/><br />
<input type="button" value="修改" ng-click="updateMove();"/>
</div>
</center>
</body>
</html>

马来西亚丶之力

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
混合开发增删改查排序

&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8" /&gt; &lt;title&gt;&lt;/title&gt; &lt;script type="text/javascript" src="js/angular.min.js" &gt
复制链接

扫一扫