<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>首页</title>
<script src="js/jquery-3.3.1.js"></script>
<script src="js/angular.min.js"></script>
<link href="bootstrap-4.1.3-dist/css/bootstrap.css" rel="stylesheet"/>
<style type="text/css">
table thead tr th {
text-align: center;
}
</style>
<script src="js/jquery-3.3.1.js"></script>
<script src="js/axios.min.js"></script>
</head>
<body ng-app="myApp" ng-controller="myCtrl" style="padding:20px;">
<div id="app" style="padding:20px;" ng-cloak>
<div id="index" class="panel panel-primary">
<div class="panel-heading">
搜索名字: <input type="text" id="name" name="name">
班级号:
<select id="classid" name="classid">
<option value="">请选择</option>
<option ng-repeat="item in clist" ng-value=item.classid>{{item.classname}}</option>
</select>
教师名:
<select id="teacherid" name="teacherid">
<option value="">请选择</option>
<option ng-repeat="item in tlist" ng-value=item.teacherid>{{item.teachername}}</option>
</select>
<input type="button" ng-click="find()" value="搜索" id="find" name="find">
<input type="button" ng-click="add()" value="添加" id="add" name="add">
</div>
<!--width="90%" border="1"-->
<table class="table table-bordered table-striped text-center">
<tr>
<td>编号</td>
<td>名字</td>
<td>班级名</td>
<td>教师名</td>
<td>操作</td>
</tr>
<tr ng-repeat="item in list">
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.classname}}</td>
<td>{{item.teachername}}</td>
<td>
<a href="#" ng-click="remove(item.id)">删除</a>
<a href="#" ng-click="edit(item)">修改</a>
</td>
</tr>
</table>
<br>
<div><a href="#" ng-click="homepage()">首页</a>
<a href="#" ng-click="uppage()">上一页</a>
当前页:{{pagebean.page}}
最大页数:{{pagebean.maxPages}}
<a href="#" ng-click="down()">下一页</a>
<a href="#" ng-click="lastpage()">末页</a>
<input type="number" style="width: 50px" id="pagex" min="1">
<input type="button" value="跳转" ng-click="go()" id="t">
显示数量:
<select id="limit" ng-change="changge()" ng-model="ss">
<option ng-repeat="x in num" value="{{x.id}}">{{x.id}}</option>
</select>
</div>
<input type="hidden" value="" id="page">
</div>
<!--编辑页面-->
<div id="edit">
<table class="table table-bordered table-striped text-center">
<input type="hidden" id="hid">
<tr>
<td>姓名</td>
<td><input type="text" name="ename" id="ename"></td>
</tr>
<tr>
<td>班级</td>
<td>
<select id="eclassid" name="eclassid">
<option value="">请选择</option>
<option ng-repeat="item in clist" ng-value=item.classid>{{item.classname}}</option>
</select>
</td>
</tr>
<tr>
<td>教师</td>
<td><select id="eteacherid" name="eteacherid">
<option value="">请选择</option>
<option ng-repeat="item in tlist" ng-value=item.teacherid>{{item.teachername}}</option>
</select></td>
</tr>
<tr>
<td><input type="button" value="确定" ng-click="confirm()"></td>
<td><input type="button" value="返回" ng-click="back()"></td>
</tr>
</table>
</div>
</div>
<script>
$('#edit').hide();
var app = angular.module("myApp", []);//myapp为ng-app的名字
app.controller("myCtrl", function ($scope) {//myctrl为控制器的名字,scope为内置对象
$scope.num = [{id:"10"},{id:"20"},{id:"30"}];//下拉框的值
$scope.ss=$scope.num[0].id;
$scope.list = find().list;//学生数据
$scope.clist = class_bind();//班级数据
$scope.tlist = teacher_bind();//教员信息
$scope.pagebean = find().pagebean;//分页信息
$scope.find = function () {//查询方法
this.list = find().list
this.pagebean = find().pagebean
};
$scope.remove = function (id) {//删除
if (confirm('确定删除吗?')) {
remove(id);
this.list = find().list
this.pagebean = find().pagebean
}
};
$scope.back = function () {//返回
$('#index').show();
$('#edit').hide();
};
$scope.edit = function (item) {//点击修改
$('#index').hide();
$('#edit').show();
$('#hid').val(item.id);
$('#ename').val(item.name);
$('#eclassid').val(item.classid);
$('#eteacherid').val(item.teacherid);
};
$scope.add = function () {//点击添加
$('#index').hide();
$('#edit').show();
};
$scope.confirm = function () {//确定按钮
if ($('#hid').val() == "") {//为空则是添加
add('add');
} else {
add('edit');//修改
}
this.list = find().list
this.pagebean = find().pagebean
};
$scope.homepage = function () {//点击首页
$('#page').val(1);
this.list = find().list
this.pagebean = find().pagebean
};
$scope.uppage = function () {//上一页
var up = $('#page').val() == 1 ? 1 : parseInt($('#page').val()) - 1;
$('#page').val(up);
this.list = find().list
this.pagebean = find().pagebean
};
$scope.down = function () {//下一页
var dowm = $('#page').val() == this.pagebean.maxPages ? this.pagebean.maxPages : parseInt($('#page').val()) + 1;
$('#page').val(dowm);
this.list = find().list
this.pagebean = find().pagebean
};
$scope.lastpage = function () {//末页
$('#page').val(this.pagebean.maxPages);
this.list = find().list
this.pagebean = find().pagebean
};
$scope.go = function () {//跳转
if ($('#pagex').val() >= 0 && $('#pagex').val() <= this.pagebean.maxPages) {
$('#page').val($('#pagex').val());
this.list = find().list
this.pagebean = find().pagebean
} else {
alert('请输入正确页数');
}
};
$scope.changge = function () {//换数量
this.list = find().list
this.pagebean = find().pagebean
}
});
/**
* 查询方法
* @returns {*}
*/
function find() {
var data2;
var limit=$('#limit').val();
if($('#limit').val()==""||$('#limit').val()==null){
limit=10;
}
$.ajax({
type: "post",
url: "studentaction.action?methodName=find",
dataType: "json",
data: {//传给servlet的数据,
name: $('#name').val(),
classid: $('#classid').val(),
teacherid: $('#teacherid').val(),
page: $('#page').val(),
limit: limit,
d: new Date()
},
async: false,//加上这个ajax先执行
success: function (data) {
$('#page').val(data.pagebean.page);
//返回处理的方法
console.log(data);
data2 = data;
}
});
return data2;
}
/**
* 班级数据绑定
*/
function class_bind() {
var data2;
$.ajax({
type: "post",
url: "studentaction.action?methodName=cfind",
dataType: "json",
data: {//传给servlet的数据,
d: new Date()
},
async: false,//加上这个ajax先执行
success: function (data) {
//返回处理的方法
data2 = data;
}
});
return data2;
}
/**
* 教员数据绑定
*/
function teacher_bind() {
var data2;
$.ajax({
type: "post",
url: "studentaction.action?methodName=tfind",
dataType: "json",
data: {//传给servlet的数据,
d: new Date()
},
async: false,//加上这个ajax先执行
success: function (data) {
//返回处理的方法
data2 = data;
}
});
return data2;
}
/**
* 添加和修改
*/
function add(index) {
var ur = "studentaction.action?methodName=add";
if (index == 'edit') {
ur = "studentaction.action?methodName=edit";
}
$.ajax({
type: "post",
url: ur,
dataType: "json",
data: {//传给servlet的数据,
id: $('#hid').val(),
name: $('#ename').val(),
classid: $('#eclassid').val(),
teacherid: $('#eteacherid').val(),
d: new Date()
},
async: false,//加上这个ajax先执行
success: function (data) {
if (data) {
alert('操作成功');
$('#index').show();
$('#edit').hide();
$('#hid').val("");
$('#ename').val("");
$('#eclassid').val("");
$('#eteacherid').val("");
} else {
alert('操作失败')
}
}
});
}
/**
* 删除
*/
function remove(id) {
$.ajax({
type: "post",
url: "studentaction.action?methodName=remove",
dataType: "json",
data: {//传给servlet的数据,
id: id,
d: new Date()
},
async: false,//加上这个ajax先执行
success: function (data) {
//返回处理的方法
if (data) {
alert('删除成功')
} else {
alert('删除失败');
}
}
});
}
</script>
</body>
</html>Angular.js 用Angular.js加Jquery做增删改查
猜你喜欢
转载自blog.csdn.net/qq_41594146/article/details/83046001
今日推荐
周排行