您的位置：首页 > Web前端 > JavaScript

接受json文件,并进行增删该查一系列操作

2018-01-17 20:54 393 查看

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
tr:nth-child(even){
background-color: darkgray;
}
</style>
<script type="text/javascript" src="js/angular-/angular.js" ></script>
<script>

var app=angular.module("myApp",[]);

app.controller("myCtrl",function($scope,$http){
$http.get("http://result.eolinker.com/TucCTQueffdc1d1aaa3be05d8c62e9bb5d3e8b495f97cca?uri=hybrid")
.success(function(result){
$scope.arr=result;
});
//显示真实年龄
$scope.gettime=function(birth){
var y=new Date(birth).getYear();
var newy=new Date().getYear();
return newy-y;
}
//删除
$scope.shan=function(dele){
for (index in $scope.arr) {
if($scope.arr[index].id==dele){
$scope.arr.splice(index,1);
}
}
}
//全选全部选
$scope.selectAll=function(){
for (index in $scope.arr) {
$scope.arr[index].state=$scope.select;
}
}
//批量删除
$scope.plsc=function(){
for (var i=0;i<$scope.arr.length;i++) {
if($scope.arr[i].state){
$scope.arr.splice(i,1);
i--;
}
}
}
//根据部门模糊查询
$scope.depar=function(dname){
if($scope.dsearch==undefined || $scope.desearch==""){
return true;
}
if(dname.indexOf($scope.dsearch)>-1){
return true;
}
return false;
}
//点击列表进行排序
$scope.dianji=function(){
if($scope.RiseOrDrop==""){
$scope.RiseOrDrop="-";
}else{
$scope.RiseOrDrop="";
}
}
//添加\n
$scope.save=function(){
$scope.falage=true;
if($scope.add_name==undefined || $scope.add_name==""){
$scope.addname=true;
$scope.falage=false;
}else{
$scope.addname=false;
}
if($scope.add_money==undefined || $scope.add_money==""){
$scope.addmoney=true;
$scope.falage=false;
}else{
$scope.addmoney=false;
}
if($scope.falage==true){
$scope.arr.push({
name:$scope.add_name,

"birthday": $scope.add_birth.valueOf(), //获取date日期的毫秒数
gender:$scope.add_sex,
salary:$scope.add_money,
department:{id:1,name:"研发部"}
});
}

}
});

</script>
</head>

<body ng-app="myApp" ng-controller="myCtrl">
<center>
<h1 ng-show="arr.length==0">无数据,请勿操作</h1>

<div ng-show="arr.length>0">
<input type="text" placeholder="根据姓名模糊查询" ng-model="nsearch"/>
<input type="text" placeholder="根据部门模糊查询" ng-model="dsearch"/>
<button ng-click="plsc()">批量删除</button>
<button ng-click="isshow=true">入库</button>
<table border="1" width="700px">
<thead>
<th><input type="checkbox"ng-click="selectAll()" ng-model="select"/></th>
<th ng-click="dianji(a.name)">员工姓名</th>
<th ng-click="dianji(a.age)">员工年龄</th>
<th>员工性别</th>
<th ng-click="dianji(a.salary)">员工薪资</th>
<th ng-click="dianji(a.birthday)">出生日期</th>
<th>部门名称</th>
<th>操作</th>
</thead>

<tbody align="center">
<tr ng-repeat=" a in arr | filter:{name:nsearch} | orderBy:(RiseOrDrop+clum)" ng-show="depar(a.department.name)">
<td><input type="checkbox" ng-model="a.state"/></td>
<td>{{a.name}}</td>
<td>{{gettime(a.birthday)}}</td>
<td>{{a.gender}}</td>
<td>{{a.salary}}</td>
<td>{{a.birthday | date:"yyyy-MM-dd"}}</td>
<td>{{a.department.name}}</td>
<td><button ng-click="shan(a.id)">删除</button></td>
</tr>
</tbody>
</table>
<div ng-show="isshow">
<input type="text" placeholder="请输入姓名"ng-model="add_name"/><span ng-show="addname">请先输入姓名</span><br />
<input type="date" ng-model="add_birth"/><span ng-show="addbirth">请先输入姓名</span><br />
<input type="radio" value="男 " ng-model="add_sex"/>男
<input type="radio" value="女 " ng-model="add_sex"/>女<br />
<input type="number" placeholder="请输入薪资"ng-model="add_money"/><span ng-show="addmoney">请先输入薪资</span><br />
<button ng-click="save()">保存</button>
</div>
</div>
</center>

</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航