Chap3:前端
使用myeclipse写代码
1. 创建文件夹
代码整体分为2个文件:
- VPN.jsp:负责VPN表单加载以及查询页面
- VPNForm.jsp:负责VPN申请页面
2. 编写VPN.jsp
根据我们现在的表单以及功能,在显示界面我们需要如下几个功能:
- 表单展示 & 提交申请 界面选择按钮
- 输入姓名&身份证号的搜索框
- 查询按钮
- 导出VPN表单按钮
- 表单展示
- 页面最多显示条数控制 & 加载框(可省略)
<%@ page contentType="text/html;charset=UTF-8"%>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<html>
<head>
<title>VPN表单</title>
<meta name="decorator" content="default" />
<script type="text/javascript">
function loading(){
loading('正在查询,请稍等...');
}
function page(n,s){
$("#pageNo").val(n);
$("#pageSize").val(s);
$("#searchForm").attr("action","${ctx}/VPN/VPNUsers/list");
$("#searchForm").submit();
return false;
}
$(document).ready(function() {
$("#btnSubmit").click(function(){
$("#searchForm").attr("action","${ctx}/VPN/VPNUsers/list");
top.$('.jbox-body .jbox-icon').css('top','55px');
});
$("#btnExport").click(function(){
top.$.jBox.confirm("确认要导出VPN表单数据吗?","系统提示",function(v,h,f){
if(v=="ok"){
$("#searchForm").attr("action","${ctx}/VPN/VPNUsers/export");
$("#searchForm").submit();
}
},{buttonsFocus:1});
top.$('.jbox-body .jbox-icon').css(&