前端js 節點dom操作 單選 下拉 複選 二級聯動 這一篇都有
阿新 • • 發佈：2018-12-16
<%@ page language="java" pageEncoding="UTF-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/"; %> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%> <c:set var="ctx" value="${pageContext.request.contextPath}" /> <html> <head> <base href=" <%=basePath%>"> <meta charset="UTF-8"> <title>EDU教育雲平臺</title> <link rel="stylesheet" href="${ctx}/css/pc-edu-css/layui.css"> <link rel="stylesheet" href="${ctx}/css/pc-edu-css/xzdd.css"> <%-- <script src="${ctx}/js/jquery-3.0.0.js"></script> --%> <script type="text/javascript" src="${ctx}/js/pc-edu-js/jquery.min.js"></script> <script src="${ctx}/plugins/angularjs/angular.min.js" type="text/javascript"> </script> </head> <body class="layui-layout-body" ng-app="insertOrder" ng-controller="insertOrderController" ng-init="findGradeList()"> <div class="layui-layout layui-layout-admin"> <!-- 功能列表 --> <jsp:include page="header.jsp" flush="true" /> <!-- 功能列表 --> <!-- 內容主體區域 --> <div class="layui-body"> <span id="content-title">賬單錄入</span> <div style="overflow-y:hidden;background:#fff;"> <div style="width:100%;line-height:40px;"> <p class="tit">訂單資訊</p> <div class="title"> <span style="margin-right:30px;">訂單型別選擇:</span> <input type="radio" id="radio1" name="radio" checked="checked" value=1 /><label for="radio1">繳費</label> <input type="radio" id="radio2" name="radio" value=0 /><label for="radio2">退費</label> <button class="sumtit" ng-click="lookOrder();">訂單生成</button> </div> <hr> <div class="left"> 年級名稱：<select size="1" id="grade" onchange="stuClass()"> <option value="">請選擇</option> </select><br> 班級名稱：<select size="1" id="classname"> <option value="">請選擇</option> </select><br> <button class="sumtit" ng-click="findStudentList();">查詢</button> <br> 學生：{{studentList.length}} <div id="div1" class="students"> <div ng-repeat="student in studentList"> <input type="checkbox" style="margin-left:15px;" value="{{student.xsid}}" /><span class="studentName"> {{student.name}}</span><span style="font-size:12px;color:#777;" class="studentIdcard">({{student.sfzhm}})</span> </div> </div> <input id="btn2" type="button" class="all" value="取消" /> <input id="btn1" type="button" class="all" value="全選" /> </div> <div class="middle"></div> <div class="right"> <div class="titname"> 費用名稱<img id="AddMoreFileBox" class="btn btn-info" src="${ctx}/images/pc-edu-images/jfaddicon.png" max-lenght=10> <div id="InputsWrapper" style="overflow:auto;height:326px;"> <div class="addone"> <input type="text" name="mytext[]" id="field_1" placeholder="費用名稱 1" maxlength="10" /><input type="text" name="mytext[]" id="money_1" placeholder="費用金額 1" onchange="if( ! /^(([1-9]\d*)|[1-9])(\.\d{1,2})?$/.test(this.value)){$.alertView('金額格式有誤，小數點後只能保留兩位');this.value='';}" /> <br> <select size="1" id="month_1"><option value="" style="color:#999;">請選擇繳費月份</option> <option value=1>1月份</option> <option value=2>2月份</option> <option value=3>3月份</option> <option value=4>4月份</option> <option value=5>5月份</option> <option value=6>6月份</option> <option value=7>7月份</option> <option value=8>8月份</option> <option value=9>9月份</option> <option value=10>10月份</option> <option value=11>11月份</option> <option value=12>12月份</option> </select><input type="text" name="mytext[]" maxlength="30" id="text_1" placeholder="備註 1" /><a href="#" class="removeclass"><img src="${ctx}/images/pc-edu-images/jfjianicon.png"></a> </div> </div> </div> </div> </div> </div> </div> <!-- 底部固定區域 --> <div class="layui-footer">© 西安遠眺網路科技有限公司</div> </div> <div id="cover"></div> <div id="lookmodal"> <div class="looktit"> <span>檢視訂單</span> </div> <div class="fl width"> <p>訂單型別：{{jtmc}}</p> <p>年級班級： {{gradeName}}{{className}}</p> <p>學生: {{studentListSelect.length}}</p> <div id="div1" class="smallstudents"> <div style="overflow:hidden;" ng-repeat="student in studentListSelect"> {{student.studentName}}<span style="font-size:12px;color:#777;">{{student.studentIdcard}}</span> </div> </div> </div> <div class="fl " style="width:1px;background:#5290da;height:200px;margin-top:15px;"></div> <div class="fl width" style="width:260px;"> <p>賬單明細：</p> <div style="overflow:auto;height:170px;width:100%;margin-top:5px;"> <table class="detail"> <thead> <tr> <th>費用</th> <th>金額(元)</th> <th>月份</th> <th width="50">備註</th> </tr> </thead> <tbody> <tr ng-repeat="order in orders"> <td>{{order.xmmc}}</td> <td>{{order.je}}</td> <td>{{order.ddyf}}</td> <td>{{order.ddbz}}</td> </tr> </tbody> </table> </div> </div> <div class="clearfloat"></div> <div class="closed anbtn" style="right:20px;">取消</div> <div class="anbtn" id="submitOrder" style="right:90px;" ng-click="createOrder();">確認</div> </div> </body> <!-- 選單展開 start --> <script src="${ctx}/js/layui/layui.all.js"></script> <script> //查詢學校的年級情況 stuGrade(); function stuGrade() { $.ajax({ url : "${ctx}/ManagerSchool/findGradeTable", type : "post", success : function(res) { var selGrade = $("#grade"); for (var i = 0; i < res.length; i++) { selGrade.append("<option value="+res[i].gid+">" + res[i].gradeName + "</option>");//新增option } } }) } //查詢學校的年級相應的班級情況 function stuClass() { stuGradeDate = { "gradeId" : $("#grade option:selected").val() } var selName = $("#classname"); $.ajax({ url : "${ctx}/ManagerSchool/findClassTable", dataType : "json", type : "post", data : stuGradeDate, success : function(res) { selName.empty(); selName.append("<option value=''>請選擇</option>"); for (var i = 0; i < res.length; i++) { selName.append("<option value="+res[i].cid+">" + res[i].className + "</option>");//新增option } } }) } $(document).ready(function() { /* $(".sumtit").click(function() { cover.style.display = "block"; //顯示遮罩層 lookmodal.style.display = "block"; //顯示彈出層 }) */ $(".closed").click(function() { cover.style.display = "none"; //隱藏遮罩層 lookmodal.style.display = "none"; //隱藏彈出層 }) /* $("#submitOrder").click(function() { this.style.display = "none"; //確認按鈕隱藏 }) */ }); </script> <script> window.onload = function() {//先從html文件中獲取oDiv元素；再從oDiv元素中獲取input var oBtn1 = document.getElementById('btn1'); var oBtn2 = document.getElementById('btn2'); var oBtn3 = document.getElementById('btn3'); var oDiv = document.getElementById('div1'); var aCh = oDiv.getElementsByTagName('input');//getElementsByTagName容易寫錯 oBtn1.onclick = function() { for (var i = 0; i < aCh.length; i++) {//當上麵條件成立的時候，下面語句會一直執行，直到條件不成立為止 aCh[i].checked = true; } ; }; oBtn2.onclick = function() {//當上麵條件成立的時候，下面語句會一直執行，直到條件不成立為止 for (var i = 0; i < aCh.length; i++) { aCh[i].checked = false; } ; } } </script> <script> var adddoneList=[1]; var FieldCount = 1; //to keep track of text box added $(document) .ready( function() { var MaxInputs = 8; //maximum input boxes allowed var InputsWrapper = $("#InputsWrapper"); //Input boxes wrapper ID var AddButton = $("#AddMoreFileBox"); //Add button ID var x = InputsWrapper.length; //initlal text box count $(AddButton) .click( function(e) //on add input button click { if (x <= MaxInputs) //max input box allowed { FieldCount++; //text box added increment //add input box $(InputsWrapper) .append( '<div class="addone"><input type="text" maxlength="10" name="mytext[]" id="field_'+ FieldCount +'" placeholder="費用名稱 '+ FieldCount +'"/><input type="text" name="mytext[]" id="money_' + FieldCount + '" placeholder="費用金額 ' + FieldCount + '" onchange="if( ! /^(([1-9]\\d*)|\\d)(\\.\\d{1,2})?$/.test(this.value)){$.alertView( '金額格式有誤，小數點後只能保留兩位');this.value='';}"/><br> <select size="1" id="month_'+ FieldCount +'"> <option value="0" style="color:#999;">請選擇繳費月份</option> <option value="1">1月份</option> <option value="2">2月份</option> <option value="3">3月份</option><option value="4">4月份</option> <option value="5">5月份</option> <option value="6">6月份</option><option value="7">7月份</option> <option value="8">8月份</option> <option value="9">9月份</option><option value="10">10月份</option> <option value="11">11月份</option> <option value="12">12月份</option></select><input type="text" name="mytext[]" maxlength="30" id="text_'+ FieldCount +'" placeholder="備註 '+ FieldCount +'"/><a href="#" class="removeclass"><img src="${ctx}/images/pc-edu-images/jfjianicon.png"></a></div>'); x++; //text box increment adddoneList.push(FieldCount); console.log("adddoneList="+adddoneList); } return false; }); $("body").on("click", ".removeclass", function(e) { //user click on remove text if (x > 1) { $(this).parent('div').remove(); //remove text box console.log("進入刪除"); //上一個兄弟節點id var frontBrotherdom = $(this).prev("input"); console.log("獲取上一個兄弟節點"+frontBrotherdom); var frontBrotherId = $(this).prev("input").attr("id"); console.log("獲取上一個兄弟節點id"+frontBrotherId); //擷取後面數字 字尾 var frontBrotherNum=frontBrotherId.substr(frontBrotherId.lastIndexOf("_")+1).trim(); console.log("擷取後面數字"+frontBrotherNum); //取出陣列元素 下標 var index=0; for(var i=0;i<adddoneList.length;i++){ if(frontBrotherNum==adddoneList[i]){ index=i; //alert("下標="+index); continue ; } } //var index = array.indexOf(frontBrotherNum); //alert("下標="+index); if (index > -1) { console.log("開始擷取下標="+index); adddoneList.splice(index, 1); } console.log("開始擷取adddoneList="+adddoneList); x--; //decrement textbox } return false; }) }); </script> <script> //JavaScript程式碼區域 layui.use('element', function() { var element = layui.element; }); layui.use('carousel', function() { var carousel = layui.carousel; //建造例項 carousel.render({ elem : '#test1', width : '100%' //設定容器寬度 , arrow : 'always' //始終顯示箭頭 //,anim: 'updown' //切換動畫方式 }); }); </script> <!-- 選單展開end --> <script type="text/javascript"> var app = angular.module('insertOrder', []); app.config(function($httpProvider) { $httpProvider.defaults.headers.post = { 'Content-Type' : 'application/x-www-form-urlencoded', 'charset' : 'utf-8' } }) app .controller( 'insertOrderController', function($scope, $http) { //頁面初始化的時候，查詢年級資訊 $scope.findGradeList = function() { $http.get("${ctx}/ManagerSchool/findGradeTable") .then(function success(response) { $scope.gradeList = response.data; }, function error(response) { layer.alert('查詢年級資料失敗!!!', { icon : 5 }); }); } /* //根據年級id查詢該年級的班級資料 $scope.findClassList = function(selectGrade) { console.log("查詢班級=" + selectGrade.gid); //獲取班級id var gradeId = selectGrade.gid; $http.get( "${ctx}/ManagerSchool/findClassTable?gradeId=" + gradeId).then( function success(response) { $scope.classList = response.data; }, function error(response) { layer.alert('查詢班級資料失敗!!!', { icon : 5 }); }); } */ //根據年級id查詢該年級的班級資料 $scope.findClassList2 = function() { console.log("查詢班級2"); //獲取班級id var gradeId = $("#grade option:selected").val(); console.log("查詢班級222" + gradeId); $http.get( "${ctx}/ManagerSchool/findClassTable?gradeId=" + gradeId).then( function success(response) { $scope.classList = response.data; }, function error(response) { layer.alert('查詢班級資料失敗!!!', { icon : 5 }); }); } //根據班級id查詢學生List $scope.findStudentList = function() { console.log("查詢學生list"); //獲取班級id var classId = $("#classname option:selected").val(); if (classId == null || classId == "") { $.alertView("請選擇年級和班級！！"); return false; } $http.get( "${ctx}/orderEnter/selectStudentsByClassId?classId=" + classId).then( function success(response) { $scope.studentList = response.data; console.log("學生list=" + $scope.studentList); }, function error(response) { layer.alert('查詢學生資料失敗!!!', { icon : 5 }); }); } //訂單生成方法 $scope.createOrder = function() { //1.獲取選中單選框的值 var jtbs = $("input[name='radio']:checked").val(); console.log("交退費標識=" + jtbs); //2.<!--獲取選中複選框的值--> var studentIdList = new Array(); $("input[type=checkbox]:checked").each(function(i) { studentIdList[i] = $(this).val(); }); console.log("studentIdList=" + studentIdList); if (studentIdList == null || studentIdList == "") { $.alertView("請選擇賬單學生！！"); return false; } //3.獲取訂單list資訊 console.log("費用條數FieldCount=" + FieldCount); console.log("獲取adddoneList=" + adddoneList); var orderList = new Array(); for (var j = 0; j < adddoneList.length; j++) { var i = adddoneList[j]; //1.費用名稱 var xmmc = $("#field_" + i).val(); console.log("費用名稱" + i + "=" + xmmc); if (xmmc == null || xmmc == "") { $.alertView("*請輸入費用名稱！"); return false; } //2.費用金額 var je = $("#money_" + i).val(); console.log("費用金額" + i + "=" + je); if (je == null || je == "") { $.alertView("*請輸入費用金額！"); return false; } var exp = /^(([1-9]\d*)|[1-9])(\.\d{1,2})?$/; if (!exp.test(je)) { $.alertView("*輸入費用金額格式有誤！"); return; } //3.訂單月份 var ddyf = $("#month_" + i + " option:selected") .val(); console.log("訂單月份" + i + "=" + ddyf); if (ddyf == null || ddyf == "") { $.alertView("*請選擇訂單月份！"); return false; } //4.備註 var ddbz = $("#text_" + i).val(); console.log("備註" + i + "=" + ddbz); //組裝訂單 var order = { //費用名稱 "xmmc" : xmmc, //費用金額 "je" : je, //訂單月份 "ddyf" : ddyf, //備註 "ddbz" : ddbz }; orderList.push(order); } if (orderList == null || orderList == "") { $.alertView("*請填寫賬單！"); return false; } var orderEnterBobj = { payBack : jtbs, studentIdList : studentIdList, orderList : orderList } /* 將陣列轉換為json型別的字串 */ //var orderListJSON = JSON.stringify(orderList); var orderEnterBobjJson = JSON .stringify(orderEnterBobj); console.log("訂單list資訊=" + orderList); /* if (isCardNo(managerIdCard) == false) { $.alertView("您輸入的身份證號格式不正確!!"); return false; } */ //確認按鈕隱藏 $("#submitOrder").css({"display":"none"}); $http( { method : 'post', data : $.param({ orderEnterBobj : orderEnterBobjJson }), //transformRequest: angular.identity, //使用angular傳參認證 headers : { 'Content-Type' : 'application/x-www-form-urlencoded;charset=utf-8' //'Content-Type' : 'application/json;charset=utf-8' }, url : '${ctx}/orderEnter/insertOrdetList', }).then(function(response) { var data = response.data; if (data) { $.alertView("賬單錄入成功！！"); cover.style.display = "none"; //隱藏遮罩層 lookmodal.style.display = "none"; //隱藏彈出層 window.location.reload(); } else { $.alertView("賬單錄入失敗！！"); } }); } //訂單預覽 $scope.lookOrder = function() { console.log("預覽顯示"); //1.獲取交退費值 $scope.jtmc = $("input[name='radio']:checked") .next("label").text(); console.log("交退費名稱=" + $scope.jtmc); //2.獲取年級班級 $scope.gradeName = $("#grade option:selected") .text(); $scope.className = $("#classname option:selected") .text(); console.log("獲取年級名稱=" + $scope.gradeName); console.log("獲取班級名稱=" + $scope.className); //3.獲取學生list var studentNameList = new Array(); $("input[type=checkbox]:checked").each( function(i) { var studentName = $(this).next( ".studentName").text(); console.log("獲取學生名稱="+studentName);//nextSibling var studentIdcard = $(this).next( ".studentName").next( ".studentIdcard").text(); console.log("獲取學生idcard=" + studentIdcard); var student = { studentName : studentName, studentIdcard : studentIdcard } studentNameList.push(student); }); if (studentNameList == null || studentNameList == "") { $.alertView("請選擇賬單學生！！"); return false; } $scope.studentListSelect = studentNameList; console.log("獲取學生list=" + $scope.studentListSelect); //4.獲取訂單list資訊 console.log("費用條數FieldCount=" + FieldCount); var orderList = new Array(); console.log("獲取訂單list資訊adddoneList=" + adddoneList); for (var j = 0; j < adddoneList.length; j++) { var i = adddoneList[j]; //1.費用名稱 var xmmc = $("#field_" + i).val(); console.log("費用名稱" + i + "=" + xmmc); if (xmmc == null || xmmc == "") { $.alertView("*請輸入費用名稱！"); return false; } //2.費用金額 var je = $("#money_" + i).val(); console.log("費用金額" + i + "=" + je); if (je == null || je == "") { $.alertView("*請輸入費用金額！"); return false; } var exp = /^(([1-9]\d*)|[1-9])(\.\d{1,2})?$/; if (!exp.test(je)) { $.alertView("*輸入費用金額格式有誤！"); return; } //3.訂單月份 var ddyfValue = $("#month_" + i + " option:selected") .val(); console.log("訂單月份" + i + "=" + ddyfValue); if (ddyfValue == null || ddyfValue == "") { $.alertView("*請選擇訂單月份！"); return false; } var ddyf = $("#month_" + i + " option:selected") .text(); console.log("訂單月份" + i + "=" + ddyf); if (ddyf == null || ddyf == "") { $.alertView("*請選擇訂單月份！"); return false; } //4.備註 var ddbz = $("#text_" + i).val(); console.log("備註" + i + "=" + ddbz); //組裝訂單 var order = { //費用名稱 xmmc : xmmc, //費用金額 je : je, //訂單月份 ddyf : ddyf, //備註 ddbz : ddbz }; orderList.push(order); } if (orderList == null || orderList == "") { $.alertView("*請填寫賬單！"); return false; } $scope.orders = orderList; $("#cover").css('display', 'block');//顯示遮罩層 $("#lookmodal").css('display', 'block'); //顯示彈出層 } //金額校驗方法 $scope.validateMoney = function(money) { console.log("金額校驗=" + money); if (!/^(([1-9]\d*)|[1-9])(\.\d{1,2})?$/.test(money)) { $.alertView('金額格式有誤，小數點後只能保留兩位'); } } }); </script> </html>