HBuilder ------混合开发 -----增删改查

最新推荐文章于 2024-09-11 22:14:07 发布

why_111

最新推荐文章于 2024-09-11 22:14:07 发布

阅读量2.1k

点赞数 1

本文链接：https://blog.csdn.net/why_111/article/details/79787045

版权

<!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-1.11.1.js" ></script>
<script>
var app=angular.module("myapp",[]);
app.controller("mycontr",function($scope){
$scope.goods=[{name:'张三',sex:'男',birth:new Date('1995-04-24'),addres:'北京-西二旗' },
{name:'李四',sex:'男',birth:new Date('1995-05-24'),addres:'北京-西二旗' },
{name:'王三',sex:'男',birth:new Date('1995-04-24'),addres:'北京-西二旗' }
];
$scope.tablegoods={};
//添加
$scope.add=function(){
var good={};

if($scope.name=="" || $scope.name==null){
$scope.namenn=true;
return;
}else{
good.name=$scope.name;
$scope.namenn=false;
}

good.sex=$scope.sex;
good.birth=$scope.birth;
good.addres=$scope.pro+"-"+$scope.citys;

$scope.goods.push(good);
$scope.myadd=false;

}
//删除
$scope.dele=function(index){
var a=confirm("你确定删除吗？");
if(a){
$scope.goods.splice(index,1);
}
}
//批量删除
$scope.pl=function(){
if($scope.che){
$scope.goods=[];
}else{
var checked=$("input[type=checkbox]:checked");
for (var i=checked.length-1;i>=0;i--) {
$scope.goods.splice(checked[i].value,1);
}
}

}
//修改回显
$scope.xiu=function(name){
$scope.xiuq=true;
for (var i=0;i<$scope.goods.length;i++) {
if($scope.goods[i].name == name){
$scope.tablegoods=$scope.goods[i];
$scope.name=$scope.goods[i].name;
$scope.sex=$scope.goods[i].sex;
$scope.birth=$scope.goods[i].birth;

// $scope.pro=$scope.goods[i].pro;
// $scope.citys=$scope.goods[i].citys;

break;
}
}

}
//修改
$scope.updata=function(){
$scope.tablegoods.name=$scope.name;
$scope.tablegoods.sex=$scope.sex;
$scope.tablegoods.birth=$scope.birth;
$scope.xiuq=false;

}

});
</script>
<style>
.red{
background-color: red;
}
.yellow{
background-color: yellow;
}
</style>
</head>
<body ng-app="myapp" ng-controller="mycontr" >
<button ng-click="myadd=!myadd">入库</button>
<button ng-click="pl()">批量删除</button>

模糊查询：<input type="text" ng-model="chaxun" />
排序<select ng-model="orderKey">
<option value="">排序</option>
<option value="birth">生日正序</option>
<option value="-birth">生日到序</option>
</select>
<form ng-show="myadd">
姓名：<input type="text" ng-model="name" /><span ng-show="namenn">名字不能为空</span> <br />
性别：<select ng-init="sex='男'" ng-model="sex">
<option>男</option>
<option>女</option>
</select>
<br />
生日：<input type="date" ng-model="birth" /><br />

地址：<select id="pro" ng-init="pro='北京'" ng-model="pro" οnchange="getcitys()">
<option value="">请选择省份</option>
<option>北京</option>
<option>河北</option>
<option>河南</option>
</select>

<select id="city" ng-model="citys" ng-init="citys='昌平'">
<option value="">请选择城市</option>
<option>海淀</option>
<option>昌平</option>

</select>

<br />
<input type="button" value="添加" ng-click="add()" />

</form>

<table border="1">
<tr style="background-color: #ccc;">
<td><input type="checkbox" ng-model="che"/></td>
<td>姓名</td>
<td>性别</td>
<td>生日</td>
<td>地址</td>
<td>操作</td>
</tr>
<tr ng-repeat="x in goods | filter:chaxun |orderBy:orderKey" class="{{$index%2 ? 'red':'yellow'}}">
<td><input type="checkbox" ng-model="che" value="{{$index}}" /></td>
<td>{{x.name}}</td>
<td>{{x.sex}}</td>
<td>{{x.birth | date:"yyyy-MM-dd hh:mm:ss "}}</td>
<td>{{x.addres}}</td>
<td>
<input type="button" value="删除" ng-click="dele($index)"/>
<button ng-click="xiu(x.name)">修改</button>
</td>
</tr>
</table>


<form ng-show="xiuq">

姓名：<input type="text" ng-model="name" /><br />
性别：<select ng-init="sex='男'" ng-model="sex">
<option>男</option>
<option>女</option>
</select>
<br />
生日：<input type="date" ng-model="birth" /><br />


<input type="button" value="修改" ng-click="updata()" />

</form>

<script>
var datas=[{pro:"北京",citys:["海淀","昌平"]},{pro:"河北",citys:["石家庄","张家口"]},{pro:"河南",citys:["安阳","濮阳"]}];
function getcitys(){
//先把之前的数据清空
$("#city option").remove();
var datas_citys=[];//存放对应的省份的城市
//得到选择的省份
var p=$("#pro").val();
for (var i in datas) {
if(datas[i].pro==p){
datas_citys=datas[i].citys;
break;
}
}
//添加到城市中
for(var i in datas_citys){
var op=$("<option>"+datas_citys[i]+"</option>")
$("#city").append(op);

}

}
</script>

</body>
</html>