管理信息增删改查

最新推荐文章于 2022-12-04 22:28:22 发布

wanglinuo521

最新推荐文章于 2022-12-04 22:28:22 发布

阅读量476

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/wanglinuo521/article/details/79056153

版权

前端专栏收录该内容

14 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="../libs/angular.min.js"></script>
<script src="../libs/jquery-1.11.0.min.js"></script>
<style type="text/css">
.tab1 {
width: 500px;
}

.tab2 {
margin-top: 20px;
width: 700px;
}

fieldset {
margin-top: 20px;
width: 700px;
}
</style>

</head>
<body ng-app="myapp" ng-controller="mycontroller">
<div class="div1">
<h5>管理信息</h5>
<table class="tab1">
<tr>
<td> <input type="button" value="批量删除" ng-click="pldele()" /></td>
<td>用户名：<input type="text" ng-keydown="huiche($event)" ng-model="name_1" /></td>
<td>
<select ng-change="xl()" ng-model="xlname" ng-init="xlname=ags[0]">
<option ng-repeat="ag in ags">{{ag}}</option>

</select>
</td>
<td><input type="button" value="添加" ng-click="add()" /></td>
</tr>
</table>

<table border="1px" cellspacing="0" cellpadding="0" class="tab2">

<tr>
<td><input type="checkbox" ng-click="qu()" ng-model="fla" /></td>
<td>姓名</td>
<td>年龄</td>
<td>城市</td>
<td>录入日期</td>
<td>操作</td>
</tr>

<tr ng-repeat="emp in emps">
<td><input type="checkbox" ng-checked="dx1" ng-model="dx" ng-click="ck($index)" /></td>
<td>{{emp.ename}}</td>
<td>{{emp.eage}}</td>
<td>{{emp.esite}}</td>
<td>{{emp.edate|date:"yyyy-MM-dd HH-mm-ss"}}</td>
<td>
<input type="button" value="修改" ng-click="xiugai($index)" ng-model="i" />
<input type="button" value="删除" />
</td>
</tr>

</table>

<fieldset ng-show="sos">
<legend>用户添加</legend>
姓名<input type="text" ng-model="name_2" /> <br/> 年龄
<input type="text" ng-model="age_2" /> <br/> 城市
<input type="text" ng-model="site_2" /> <br/> 录入日期
<input type="date" ng-model="date_2" /> <br/>
<input type="button" value="保存" ng-click="bz()" ng-model="i" />
</fieldset>
</div>

</body>
<script type="text/javascript">
var mo = angular.module("myapp", []);
mo.controller("mycontroller", function($scope) {

$scope.ags = ["年龄正序", "年龄倒序"];

var empss = [{
"ename": "张三",
"eage": "20",
"esite": "北京",
"edate": new Date(),
"flas": false
}, {
"ename": "李四",
"eage": "25",
"esite": "北京",
"edate": new Date(),
"flas": false
}

]

$scope.emps = empss;
//每行的checkbox选择状态要改变数组的值
$scope.ck = function($index) {
$scope.emps[$index].dx = !$scope.emps[$index].dx;
};

//批量删除
$scope.pldele = function() {
//删除之后数组会改变所以要反着遍历
for(var i = $scope.emps.length - 1; i >= 0; i--) {
var g = $scope.emps[i];
if(g.dx) {
$scope.emps.splice(i, 1);
}
}
};

//模糊查询
$scope.huiche = function($event) {
var key = $event.keyCode;
var enames = [];
var name1 = $scope.name_1;
if(key == 13) {
for(var i = 0; i < empss.length; i++) {
if(empss[i].ename.indexOf(name1) != -1) {
enames.push(empss[i]);

}
}
$scope.emps = enames;
}
}

//排序
$scope.xl = function() {
var xlnames = $scope.xlname;
alert(xlnames)
if(xlnames == "年龄正序") {
$scope.emps.sort(function(a, b) {
return a.eage - b.eage;
})

} else {

$scope.emps.sort(function(a, b) {
return b.eage - a.eage;
})
}

}
//点击添加显示点加的div输入框
$scope.add = function() {
$scope.sos = true;
}

//全选/全不选
$scope.qu = function() {
//删除之后数组会改变所以要反着遍历

for(var i = $scope.emps.length - 1; i >= 0; i--) {
$scope.emps[i].flas = $scope.fla;
}
//通过获取ng-model的值给ng-checked复制
$scope.dx = $scope.fla;

//批量删除
$scope.pldele = function() {
//删除之后数组会改变所以要反着遍历
for(var i = $scope.emps.length - 1; i >= 0; i--) {
var g = $scope.emps[i].flas;
if(g) {
$scope.emps.splice(i, 1);
}
}
//全选框赋我faalse
$scope.fla = false;
};
}

$scope.xiugai = function($index) {
$scope.sos = true;
var nn = $scope.emps[$index].ename;
var ee = $scope.emps[$index].eage;
var ss = $scope.emps[$index].esite;
var dd = $scope.emps[$index].edate;
var ff = $scope.emps[$index].flas;
//$scope.i会赋值下标
$scope.i = $index;
alert($scope.i)
$scope.name_2 = nn;
$scope.age_2 = ee;
$scope.site_2 = ss;
$scope.date_2 = dd;

}

$scope.bz = function() {
alert($scope.i)
//把添加和修改设同一个值点击修改时$scope.i会赋值下标
//点击添加时$scope.i 没有被赋值所以是undefined
//根据她来使用同一个布局

if($scope.i == undefined) {
// 添加
var empes = {
"ename": $scope.name_2,
"eage": $scope.age_2,
"esite": $scope.site_2,
"edate": $scope.date_2,
"flas": false
}

empss.push(empes);
$scope.emps = empss;
//添加完成隐藏div
$scope.sos = false;
$scope.name_2 = "";
$scope.age_2 = "";
$scope.site_2 = "";
$scope.date_2 = "";

} else {
//修改
var newpenson = {
"ename": $scope.name_2,
"eage": $scope.age_2,
"esite": $scope.site_2,
"edate": $scope.date_2,
"flas": false
}

empss.splice($scope.i, 1, newpenson);
$scope.emps = empss;
$scope.sos = false;
//修改后从新给 $scope.i赋值undefined
$scope.i = undefined

}

}

})
</script>

</html>

wanglinuo521

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
管理信息增删改查

.tab1 {width: 500px;}.tab2 {margin-top: 20px;width: 700px;}fieldset {margin-top: 20px;width: 700px;}管理信息用户名：{{ag}}姓名
复制链接

扫一扫