添加二次联动批量删除查询请求网络
2018-04-05 09:57
330 查看
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/angular.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jquery-3.2.1.min.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
thead{
background: gray;
}
.tip{
background: red;
}
</style>
</head>
<body ng-app="myapp" ng-controller="myctrl">
<input type="text" name="" id="" value="" placeholder="按电影名称模糊查询" ng-model="searchKey1" />
<input type="button" id="" value="搜索" ng-click="search()" />
<select name="" ng-model="orderKey">
<option value="0">按要求排序</option>
<option value="time">电影时长升序排列</option>
<option value="-time">电影时长降序排列</option>
<option value="price">售价升序排列</option>
<option value="-price">售价降序排列</option>
<option value="playTime">上映时间升序排列</option>
<option value="-playTime">上映时间降序排列</option>
<option value="score">评分升序排列</option>
<option value="-score">评分降序排列</option>
</select>
<input type="button" id="" value="批量删除" ng-click="delAll()" />
<input type="button" id="" value="清空所有数据" ng-click="clearAll()"/>
<input type="button" id="" value="添加数据" ng-click="isShow=!isShow" />
<table border="1" cellspacing="0" cellpadding="0" width="60%">
<thead ><tr>
<th><input type="checkbox" id="" value="" ng-model="checkAll" /></th>
<th>电影名称</th>
<th>类别</th>
<th>时长</th>
<th>导演</th>
<th>售价</th>
<th>上映时间</th>
<th>评分</th>
<th>操作</th>
</tr>
</thead>
<tbody><tr ng-repeat="x in films|filter:searchKey|orderBy:orderKey">
<td><input type="checkbox" id="" value="{{x.name}}" ng-model="checkAll" /></td>
<td>{{x.name}}</td>
<td>{{x.type[0]+","+x.type[1]}}</td>
<td>{{x.time}}</td>
<td>{{x.author}}</td>
<td>{{x.price|currency:"￥："}}</td>
<td>{{x.playTime|date:"MM-dd mm:ss"}}</td>
<td>{{x.score}}</td>
<td>
<input type="button" id="" value="修改" ng-click="modify(x.name)" />
<input type="button" id="" value="删除" ng-click="delfilm(x.name)"/>
</td>
</tr></tbody>
</table>
<div>总价是：{{getTotal()|currency:"￥："}}</div>
<fieldset id="" ng-show="isShow">
<legend>添加电影</legend>
<table border="0" cellspacing="0" cellpadding="0">
<tr><td align="right">电影名称：</td><td><input type="text" name="" id="" value="" ng-model="aname" /></td>
<td><span id="s_name" class="tip"></span></td>
</tr>
<tr><td align="right">类别：</td>
<td>
<select ng-init="select_maintype=filmsType[0]" ng-model="select_maintype" ng-options="x.mainType for x in filmsType"
ng-click="changeType()">
</select>
<select ng-init="select_child=select_maintype.childType[0]" ng-model="select_child" ng-options="y for y in select_maintype.childType">
</select>
</td>
<td><span id="s_type" class="tip"></span></td>
</tr>
<tr><td align="right">时长：</td><td><input type="text" name="" id="" value="" ng-model="atime" /></td>
<td><span id="s_time" class="tip"></span></td>
</tr>
<tr><td align="right">导演：</td><td><input type="text" name="" id="" value="" ng-model="aauthor" /></td>
<td><span id="s_author" class="tip"></span></td>
</tr>
<tr><td align="right">售价：</td><td><input type="text" name="" id="" value="" ng-model="aprice" /></td>
<td><span id="s_price" class="tip"></span></td>
</tr>
<tr><td align="right">上映时间：</td><td><input type="date" name="" id="" value="" ng-model="apaytime" /></td>
<td><span id="s_paytime" class="tip"></span></td>
</tr>
<tr><td align="right">评分：</td><td><input type="text" name="" id="" value="" ng-model="ascore" /></td>
<td><span id="s_score" class="tip"></span></td>
</tr>
<tr><td align="center" colspan="2"><input type="button" id="" value="保存" ng-click="save()"/></td></tr>
</table>
</fieldset>
<fieldset id="" ng-show="isModifyShow">
<legend>修改电影</legend>
<table border="0" cellspacing="0" cellpadding="0">
<tr><td align="right">电影名称：</td><td><input type="text" name="" id="" value="" ng-model="mname" /></td>
</tr>
<tr><td align="right">时长：</td><td><input type="text" name="" id="" value="" ng-model="mtime" /></td>
<td><span id="s_time" class="tip"></span></td>
</tr>
<tr><td align="right">导演：</td><td><input type="text" name="" id="" value="" ng-model="mauthor" /></td>
<td><span id="s_author" class="tip"></span></td>
</tr>
<tr><td align="center" colspan="2"><input type="button" id="" value="修改保存" ng-click="modifySave()"/></td></tr>
</table>
</fieldset>
<script type="text/javascript">
var app=angular.module("myapp",[]);
app.controller("myctrl",function($scope,$http){
$scope.orderKey="0";
$scope.checkAll=false;
//进行初使化
$scope.films=[];
//初使化-添加信息
$scope.isShow=false;
$scope.isModifyShow=false;
$scope.filmsType=[
{"mainType":"喜剧","childType":["喜剧1","喜剧2"]},
{"mainType":"历史","childType":["历史1","历史2","历史3"]},
{"mainType":"科幻","childType":["科幻1"]}];
//请求网络数据
$http({
method:"GET",
url:"newdata.json"
// url:"http://result.eolinker.com/rR1VBtT56a6bb220c10b3d44b65b4787a8aec03c4ec32ce?uri=MonthTest"
}).then(function success(response){
$scope.films=response.data;
},function error(response){
});
//得到总价
$scope.getTotal=function(){
var totalPrice=0;
for (var i = 0; i < $scope.films.length; i++) {
totalPrice+=$scope.films[i].price;
}
return totalPrice;
}
//删除数据
$scope.delfilm=function(fname){
for (var i = 0; i < $scope.films.length; i++) {
if($scope.films[i].name==fname){
$scope.films.splice(i,1);
break;
}
}
}
//清除所有数据
$scope.clearAll=function(){
$scope.films=[];
}
//进行查询
$scope.search=function(){
$scope.searchKey=$scope.searchKey1;
}
//批量删除
$scope.delAll=function(){
//选择出所出选中的checkbox
var checks=$("input:checked");
for (var i = 0; i < checks.length; i++) {
//得到电影名称
var fn=checks[i].value;
for (var j = 0; j < $scope.films.length; j++) {
if(fn==$scope.films[j].name){
//进行删除
$scope.films.splice(j,1);
break;
}
}
}
}
//切换类型
$scope.changeType=function(){
$scope.select_child=$scope.select_maintype.childType[0];
}
$scope.save=function(){
//清空所有的错误提示信息
$(".tip").html("");
//电影名称
var aname=$scope.aname;
if(aname==null || aname.length<3 || aname.length>10){
$("#s_name").html("电影名称不能为空，且长度在3~10之间");
return;
}
var atime=$scope.atime;
if(atime==null){
$("#s_time").html("时长不能为空");
return;
}
var paytime=$scope.apaytime;
if(paytime==null){
$("#s_paytime").html("上映时间不能为空");
return;
}
var newdata={};
newdata.name=aname;
newdata.price=$scope.aprice;
newdata.author=$scope.aauthor;
newdata.time=atime;
//得到类型
var types=[];
types.push($scope.select_maintype.mainType);
types.push($scope.select_child);
newdata.type=types;
newdata.playTime=paytime;
newdata.score=$scope.ascore;
$scope.films.push(newdata);
}
var data="";
$scope.modify=function(fname){
$scope.isModifyShow=!$scope.isModifyShow;
for (var i = 0; i < $scope.films.length; i++) {
if($scope.films[i].name==fname){
data=$scope.films[i];
//进行赋值
$scope.mname=data.name;
$scope.mtime=data.time;
$scope.mauthor=data.author;
break;
}
}
}
//进行修改
$scope.modifySave=function(){
data.name=$scope.mname;
data.time=$scope.mtime;
data.author=$scope.mauthor;
$scope.isModifyShow=!$scope.isModifyShow;
}
});
</script>
</body>
</html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/angular.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jquery-3.2.1.min.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
thead{
background: gray;
}
.tip{
background: red;
}
</style>
</head>
<body ng-app="myapp" ng-controller="myctrl">
<input type="text" name="" id="" value="" placeholder="按电影名称模糊查询" ng-model="searchKey1" />
<input type="button" id="" value="搜索" ng-click="search()" />
<select name="" ng-model="orderKey">
<option value="0">按要求排序</option>
<option value="time">电影时长升序排列</option>
<option value="-time">电影时长降序排列</option>
<option value="price">售价升序排列</option>
<option value="-price">售价降序排列</option>
<option value="playTime">上映时间升序排列</option>
<option value="-playTime">上映时间降序排列</option>
<option value="score">评分升序排列</option>
<option value="-score">评分降序排列</option>
</select>
<input type="button" id="" value="批量删除" ng-click="delAll()" />
<input type="button" id="" value="清空所有数据" ng-click="clearAll()"/>
<input type="button" id="" value="添加数据" ng-click="isShow=!isShow" />
<table border="1" cellspacing="0" cellpadding="0" width="60%">
<thead ><tr>
<th><input type="checkbox" id="" value="" ng-model="checkAll" /></th>
<th>电影名称</th>
<th>类别</th>
<th>时长</th>
<th>导演</th>
<th>售价</th>
<th>上映时间</th>
<th>评分</th>
<th>操作</th>
</tr>
</thead>
<tbody><tr ng-repeat="x in films|filter:searchKey|orderBy:orderKey">
<td><input type="checkbox" id="" value="{{x.name}}" ng-model="checkAll" /></td>
<td>{{x.name}}</td>
<td>{{x.type[0]+","+x.type[1]}}</td>
<td>{{x.time}}</td>
<td>{{x.author}}</td>
<td>{{x.price|currency:"￥："}}</td>
<td>{{x.playTime|date:"MM-dd mm:ss"}}</td>
<td>{{x.score}}</td>
<td>
<input type="button" id="" value="修改" ng-click="modify(x.name)" />
<input type="button" id="" value="删除" ng-click="delfilm(x.name)"/>
</td>
</tr></tbody>
</table>
<div>总价是：{{getTotal()|currency:"￥："}}</div>
<fieldset id="" ng-show="isShow">
<legend>添加电影</legend>
<table border="0" cellspacing="0" cellpadding="0">
<tr><td align="right">电影名称：</td><td><input type="text" name="" id="" value="" ng-model="aname" /></td>
<td><span id="s_name" class="tip"></span></td>
</tr>
<tr><td align="right">类别：</td>
<td>
<select ng-init="select_maintype=filmsType[0]" ng-model="select_maintype" ng-options="x.mainType for x in filmsType"
ng-click="changeType()">
</select>
<select ng-init="select_child=select_maintype.childType[0]" ng-model="select_child" ng-options="y for y in select_maintype.childType">
</select>
</td>
<td><span id="s_type" class="tip"></span></td>
</tr>
<tr><td align="right">时长：</td><td><input type="text" name="" id="" value="" ng-model="atime" /></td>
<td><span id="s_time" class="tip"></span></td>
</tr>
<tr><td align="right">导演：</td><td><input type="text" name="" id="" value="" ng-model="aauthor" /></td>
<td><span id="s_author" class="tip"></span></td>
</tr>
<tr><td align="right">售价：</td><td><input type="text" name="" id="" value="" ng-model="aprice" /></td>
<td><span id="s_price" class="tip"></span></td>
</tr>
<tr><td align="right">上映时间：</td><td><input type="date" name="" id="" value="" ng-model="apaytime" /></td>
<td><span id="s_paytime" class="tip"></span></td>
</tr>
<tr><td align="right">评分：</td><td><input type="text" name="" id="" value="" ng-model="ascore" /></td>
<td><span id="s_score" class="tip"></span></td>
</tr>
<tr><td align="center" colspan="2"><input type="button" id="" value="保存" ng-click="save()"/></td></tr>
</table>
</fieldset>
<fieldset id="" ng-show="isModifyShow">
<legend>修改电影</legend>
<table border="0" cellspacing="0" cellpadding="0">
<tr><td align="right">电影名称：</td><td><input type="text" name="" id="" value="" ng-model="mname" /></td>
</tr>
<tr><td align="right">时长：</td><td><input type="text" name="" id="" value="" ng-model="mtime" /></td>
<td><span id="s_time" class="tip"></span></td>
</tr>
<tr><td align="right">导演：</td><td><input type="text" name="" id="" value="" ng-model="mauthor" /></td>
<td><span id="s_author" class="tip"></span></td>
</tr>
<tr><td align="center" colspan="2"><input type="button" id="" value="修改保存" ng-click="modifySave()"/></td></tr>
</table>
</fieldset>
<script type="text/javascript">
var app=angular.module("myapp",[]);
app.controller("myctrl",function($scope,$http){
$scope.orderKey="0";
$scope.checkAll=false;
//进行初使化
$scope.films=[];
//初使化-添加信息
$scope.isShow=false;
$scope.isModifyShow=false;
$scope.filmsType=[
{"mainType":"喜剧","childType":["喜剧1","喜剧2"]},
{"mainType":"历史","childType":["历史1","历史2","历史3"]},
{"mainType":"科幻","childType":["科幻1"]}];
//请求网络数据
$http({
method:"GET",
url:"newdata.json"
// url:"http://result.eolinker.com/rR1VBtT56a6bb220c10b3d44b65b4787a8aec03c4ec32ce?uri=MonthTest"
}).then(function success(response){
$scope.films=response.data;
},function error(response){
});
//得到总价
$scope.getTotal=function(){
var totalPrice=0;
for (var i = 0; i < $scope.films.length; i++) {
totalPrice+=$scope.films[i].price;
}
return totalPrice;
}
//删除数据
$scope.delfilm=function(fname){
for (var i = 0; i < $scope.films.length; i++) {
if($scope.films[i].name==fname){
$scope.films.splice(i,1);
break;
}
}
}
//清除所有数据
$scope.clearAll=function(){
$scope.films=[];
}
//进行查询
$scope.search=function(){
$scope.searchKey=$scope.searchKey1;
}
//批量删除
$scope.delAll=function(){
//选择出所出选中的checkbox
var checks=$("input:checked");
for (var i = 0; i < checks.length; i++) {
//得到电影名称
var fn=checks[i].value;
for (var j = 0; j < $scope.films.length; j++) {
if(fn==$scope.films[j].name){
//进行删除
$scope.films.splice(j,1);
break;
}
}
}
}
//切换类型
$scope.changeType=function(){
$scope.select_child=$scope.select_maintype.childType[0];
}
$scope.save=function(){
//清空所有的错误提示信息
$(".tip").html("");
//电影名称
var aname=$scope.aname;
if(aname==null || aname.length<3 || aname.length>10){
$("#s_name").html("电影名称不能为空，且长度在3~10之间");
return;
}
var atime=$scope.atime;
if(atime==null){
$("#s_time").html("时长不能为空");
return;
}
var paytime=$scope.apaytime;
if(paytime==null){
$("#s_paytime").html("上映时间不能为空");
return;
}
var newdata={};
newdata.name=aname;
newdata.price=$scope.aprice;
newdata.author=$scope.aauthor;
newdata.time=atime;
//得到类型
var types=[];
types.push($scope.select_maintype.mainType);
types.push($scope.select_child);
newdata.type=types;
newdata.playTime=paytime;
newdata.score=$scope.ascore;
$scope.films.push(newdata);
}
var data="";
$scope.modify=function(fname){
$scope.isModifyShow=!$scope.isModifyShow;
for (var i = 0; i < $scope.films.length; i++) {
if($scope.films[i].name==fname){
data=$scope.films[i];
//进行赋值
$scope.mname=data.name;
$scope.mtime=data.time;
$scope.mauthor=data.author;
break;
}
}
}
//进行修改
$scope.modifySave=function(){
data.name=$scope.mname;
data.time=$scope.mtime;
data.author=$scope.mauthor;
$scope.isModifyShow=!$scope.isModifyShow;
}
});
</script>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- angular 请求网络数据 展示table 查询关键字 过滤 删除 添加 修改
- GreenDao + 请求网络数据添加到数据库 + 新增+删除 +查询
- 用户信息列表 查询+年龄，性别搜索 +全部删除，批量删除+添加用户+修改密码
- 【黑马Android】(05)短信/查询和添加/内容观察者使用/子线程网络图片查看器和Handler消息处理器/html查看器/使用HttpURLConnection采用Post方式请求数据/开源项目
- （angularjs） 数据的增删改查（添加用户，查询年龄，批量删除，全部删除，修改密码） 类似题
- 添加批量删除二级联动②
- Struts2+Ibatis+Spring.30(完整例子，含3.0事务配置，OSCache缓存配置，JreeChart配置,log4j日志输出Sql,对一个表实现完整的查询，批量删除，添加，更新)
- MVP+Retrofit网络请求和添加拦截器+Fresco+全选反选与删除
- 用户名查询、手机号查询、选择城市、选择状态、选择月份、ID排序、添加数据、批量发货、批量删除、敏感字、修改数据）
- 用户信息的增删改查：非空验证添加，模糊查询，修改密码，批量和全部删除
- Sql批量添加，批量查询，批量删除，批量修改。mybatis都有对应标签
- Mybatis批量查询，批量添加，批量删除
- 初学Html5+CSS之表格添加用户+删除用户+修改数据+删除全部+批量删除+查询数据+内容判断
- Angular用户查询，按条件排序，批量删除，添加，敏感字屏蔽
- 订单用户表1（用户查询 、手机号查询 、选择城市 、选择状态、月份查询 、ID排序 、添加数据、批量发货、批量删除）
- 订单用户表2（用户名查询、手机号查询、选择城市、选择状态、选择月份、ID排序、添加数据、批量发货、批量删除、敏感字、修改数据）
- 用户表（查询数据 、添加数据 、排序 、点击删除 、修改密码 、批量删除 、全部删除）
- AngularJS综合用户信息, 表单验证,过滤查询,全选反选,批量删除,修改,添加
- C++使用ADO2数据库类查询、添加、修改、删除操作
- C#实现SQL数据库中的表的查询、添加、修改、删除数据