Angular.js 用Angular.js加Jquery做增刪改查
阿新 • • 發佈:2018-11-12
<!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>