- 前端
- 使用frameset框架搭建前段界面
<!--clos 左，中，右，左右為網頁兩側留白-->
<frameset cols="*,1010px,*" border="0px" class="fram_set" >
<frame src="cool.html" scrolling="no"/>
<!--rows 上，中，下-->
<frameset rows="100,*,150" border="0px">
<frame name="top" src="top.html" scrolling="no"/>
<frameset cols="150,*" border="0px" >
<!--為網頁左側選擇菜單，網頁正文-->
<frame name="left" src="left.html" scrolling="no" />
<!--右侧目标没写-->
<frame name="right" src="loginsuccess.html" scrolling="no"/>
</frameset>
<frame name="footer" src="footer.html" scrolling="no"/>
</frameset>
<frame src="cool.html" scrolling="no"/>
</frameset>
<!--注意為各個標簽添加name屬性，否則不能正確顯示需要顯示的界面--> 在對應的left選擇菜單中，想要在網頁right顯示，需要在A標簽中添加target='right'屬性，這樣網頁的顯示位置會被確定。
- Ajax的使用，以及傳值
- 前端界面
var xmlHttp;
<!--創建ajax對象-->
function createXMLHttpRequest() {
if (window.ActiveXObject) {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
else if (window.XMLHttpRequest) {
xmlHttp = new XMLHttpRequest();
}
}
<!--因爲參數是輸出的，需要使用JS參數進行傳值，用來確定飾那一條數據-->
function fun(key,num){
<!--一些的JS效果，圖標的顯示隱藏-->
var rea=key+"in_1";
var reb=key+"sp_1";
var rec=key+"fig_in1"
var red=key+"fig_in2"
var ree=key+"fig_in3"
var inp=document.getElementById(rea);
var sp=document.getElementById(reb);
var ina=document.getElementById(rec);
var inb=document.getElementById(red);
var inc=document.getElementById(ree);
if(num=="1"){
inp.style.display="none";
sp.style.display="block";
ina.style.display="block";
inb.style.display="none";
inc.style.display="none";
sp.innerHTML=inp.value;
}else{
inp.value=sp.innerHTML;
}
var info=key+"#"+inp.value+"#"+num;
<!--到這裏才創建Ajax對象-->
createXMLHttpRequest();
<!--使用異步POST方式執行請求-->
xmlHttp.open("POST","/FirstProject/Passdepa",true);
<!--保存请求头-->
xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
<!--保存参数-->
xmlHttp.send("info="+encodeURI(info));
<!--解析返回信息-->
xmlHttp.onreadystatechange=callback;
}
function callback(){
<!--当返回完成并无异常-->
if(xmlHttp.readyState==4&&xmlHttp.status==200){
<!--以XML形式返回，解析xml-->
var flog=xmlHttp.responseXML.getElementsByTagName("flog")[0].firstChild.data;
<!--根据返回值，执行对应条件-->
if(flog=="yes"){
alert("修改完毕");
location.href("/FirstProject/departmentdata");
}else if(flog=="no"){
alert("执行失败");
location.href("/FirstProject/departmentdata");
}
}
}
</script>- servlet中要将请求处理，并以XML方式返回结果
//message 为返回的信息，使用字符串拼接的方式将值传递回去
//以XML形式返回数据
response.setContentType("text/xml;charset=utf-8");
//PrintWriter 输出
PrintWriter out=response.getWriter();
response.setHeader("Cache-Control","no-cache");
out.println("<?xml version='1.0' encoding='"+"utf-8"+"' ?>");
out.println("<response>");
out.println("<passed>" + Boolean.toString(flag) + "</passed>");
out.println("<message>" + message + "</message>");
out.println("</response>");
out.close(); 这里不使用Ajax，真是直接使用onclick="location.href='xxxx?id=${EL}'"的URL形式访问更好，更加简单。
- 多选select选择框，以及左移右移
- 关于select选择框多选
<!--直接在select标签中添加multiple字段 select即为多选 可以用CSS调节大小-->
<select name="select" id="select" multiple></select>使用JS来实现
使用JQ来实现
<script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>
<!--注意ID与JQ的对应关系，两个select标签，两个Input标签-->
<script type="text/javascript">
$(document).ready(function(){
$('#add').click(function(){
var $options = $('#select1 option:selected');
var $remove = $options.remove();
$remove.appendTo('#select2');
});
$('#remove').click(function(){
var $removeOptions = $('#select2 option:selected');
$removeOptions.appendTo('#select1');
});
$('#select1').dblclick(function(){
var $options = $('option:selected', this);
$options.appendTo('#select2');
});
$('#select2').dblclick(function(){
$('#select2 option:selected').appendTo('#select1');
});
});
</script>- 后端
- 对部门员工进行分页管理–基于Oracle数据库
1.Sql语句
a是当前页的第一条
b是当前页的最后一条
"select * from (select row_number() over (order by ename) as rn, f.* from emp f) b where b.rn
between "+a+" and "+b;2.对应dao层代码
//搜索员工
public PageBean indexEmp(int pageNo,String name,String status){
//pageCount 每页的条数
int pageCount=3;
//a 当前页的第一条
int a=(pageNo-1)*pageCount+1;
//b 当前页的最后一条
int b=pageNo*pageCount;
String countSql="select count(*) from employee where employee_name='"+name+"'and status='"+status+"'";
String sql="select * from (select row_number() over (order by employee_id) as rn, "+" f.* from employee f
where employee_name='"+name+"' and status='"+status+"'"+") b where b.rn between "+a+" and "+ b";
ArrayList<Employee> emps = new ArrayList<Employee>();
ResultSet rs=null;
ResultSet countRs=null;
try {
rs=MyConn.query(sql1);
while(rs.next()){
String ename=rs.getString("employee_name");
String eusername=rs.getString("username");
String tel=rs.getString("phone");
String email=rs.getString("email");
emps.add(new Employee(ename,eusername,tel,email));
}
countRs=MyConn.query(countSql);
int totalCount=0;
while(countRs.next()){
totalCount=countRs.getInt(1);
}
System.out.println(totalCount);
return new PageBean(emps,totalCount,pageNo,pageCount);
} catch (SQLException e) {
e.printStackTrace();
}
return null;
}3.对应的分页模型类PageBean
package com.chinasofti.vo;
import java.util.Collection;
public class PageBean {
private Collection<Object> objs;//从数据库中读的集合
private int totalCount;//总的条数
private int pageNo;//当前的页数
private int pageCount;//每页的条数
private int totalPage;
public void setTotalPage(int totalPage) {
this.totalPage = totalPage;
}
//无参构造方法
public PageBean() {
super();
// TODO Auto-generated constructor stub
}
//全参构造方法
public PageBean(Collection<Object> objs, int totalCount, int pageNo, int pageCount) {
this.objs = objs;
this.totalCount = totalCount;
this.pageNo = pageNo;
this.pageCount = pageCount;
}
//属性的set，get 方法
public int getPageCount() {
return pageCount;
}
public void setPageCount(int pageCount) {
this.pageCount = pageCount;
}
public void setPageNo(int pageNo) {
this.pageNo = pageNo;
}
public int getPageNo() {
return pageNo;
}
public Collection<Object> getObjs() {
return objs;
}
public void setObjs(Collection<Object> objs) {
this.objs = objs;
}
public int getTotalCount() {
return totalCount;
}
public void setTotalCount(int totalCount) {
this.totalCount = totalCount;
}
//获取总页数
public int getTotalPage(){
if(totalCount % pageCount == 0){
return totalCount/pageCount;
}else{
return totalCount/pageCount+1;
}
}
//多写一个判断下一页的方法
public boolean isNext(){
return pageNo < getTotalPage();
}
//上一页的方法
public boolean isPrevious(){
return pageNo > 1;
}
}
从数据库中读取的数据（对应的条数） 存在集合中，在JSP页面输出
4.对应JSP
<head>
<script type="text/javascript">
function page(num){
var myform = document.getElementById("myform");
var pageNo = document.getElementById("pageNo");
pageNo.value = num;
myform.submit();
}
</script>
</head>
<body bgcolor="gainsboro">
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<div id="div_right">
<div id="div_login">人员管理 > 搜索员工</div>
<form action="/FirstProject/indexemp" method="post" id="form_login">
<fieldset id="fie_set">
<legend style="font-weight: bold">登录信息</legend>
<table cellspacing="0px" cellpadding="8px" class="from_table">
<tr>
<td>
姓名：
<input type="text" name="name" id="name" />
</td>
<td>
账号名：
<input type="text" name="username" id="username" />
</td>
<td>
状态：
<input type="radio" name="che" value="1" checked/>已批准
<input type="radio" name="che" value="0" />待审批
<input type="radio" name="che" value="2" />已关闭
</td>
</tr>
<tr>
<td colspan="3" class="input_info">
<input class="click_button" type="submit" value="搜索" />
<input class="click_button" type="reset" value="重置" />
</td>
</tr>
</table>
</fieldset>
</form>
<div class="div_info"><center>查询结果</center></div>
<div class="div_info_all">
<div class="div_info_all_text">
共
<span class="span_txt">${requestScope.pagebean.totalCount}</span>
条结果，分成
<span class="span_txt">${requestScope.pagebean.totalPage}</span>页显示，当前第
<span class="span_txt">${requestScope.pagebean.pageNo}</span>页
</div>
<div class="div_input">
<form action="/FirstProject/indexemp" id="myform" method="post">
<input type="button" class="input_scan" value="首页" onclick="page(1);" />
<c:if test="${requestScope.pagebean.previous}">
<input type="button" class="input_scan" value="上页" onclick="page(${requestScope.pagebean.pageNo - 1})"/>
</c:if>
<c:if test="${requestScope.pagebean.next}">
<input type="button" class="input_scan" value="下页" onclick="page(${requestScope.pagebean.pageNo + 1})"/>
</c:if>
<input type="button" class="input_scan" value="末页" onclick="page(${requestScope.pagebean.totalPage})"/>
<span class="span_text">跳到第</span>
<input type="text" name="pageNo" id="pageNo" class="input_text"/>
<span class="span_text">页</span>
<input type="submit" class="input_scan" value="跳转" />
</form>
</div>
</div>
<table border="1px" cellspacing="0px" cellpadding="5px" class="table_txt">
<tr class="table_head">
<th>姓名</th>
<th>账户名</th>
<th>联系电话</th>
<th>电子邮件</th>
<th>操作</th>
</tr>
<c:forEach items="${requestScope.pagebean.objs}" var="key">
<tr>
<td>${key.employee_name}</td>
<td>${key.username}</td>
<td>${key.phone}</td>
<td>${key.email}</td>
<td>
<input type="button" class="fig_in" id="${key.username}" value="关闭帐号" onclick="fun('${key.username}','2')" />
</td>
</tr>
</c:forEach>
</table>
</div>
</body>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
