YLZ开发外网前端
YLZ外网前端使用的是boottstrap和layer和validform等插件
表格是用boottstrap的tablle加上框架人员开发的ajaxpageresponse进行协调开发
弹窗使用的layer的confirm
验证使用的balidform
按钮的事件使用绑定的形式
编码code使用 syscode
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@include file="/WEB-INF/jsp/common/taglibs.jspf"%>
<!DOCTYPE html>
<html lang="en">
<head>
<base:meta />
<title>人事代理</title>
<!-- 插件样式库 -->
<base:base></base:base>
<syscode:sysCode sysCode="RSDL_SH_STATUS"/>
<!-- <syscode:sysCode sysCode="bysjs_status"/> -->
</head>
<body>
<div class="wrapper-content">
<div class="box">
<!-- 猜测这里是用个box -->
<div class="box-header with-border">
<!-- 现在用的是box的header部分，在header部分写上内容 -->
</div> <div class="box-body">
<div class="btn-group-sm" id="myop">
<button id="sign" type="button" class="btn btn-success btn-sm"
>
<i class="iconfont icon-xinzeng-copy"></i>签约
</button>
<button id="cancle" type="button" class="btn btn-success">
<i class="iconfont icon-shanchu"></i>解约
</button>
<button id="modify" type="button" class="btn btn-primary">
<i class="iconfont icon-xiugai"></i>修改申请
</button>
<button id="repeal" type="button" class="btn btn-info">
<i class="iconfont icon-quxiao"></i>撤销申请
</button>
<button id="change" type="button" class="btn btn-danger">
<i class="iconfont icon-xiugai"></i>变更代理中心
</button>
<button id="report" type="button" class="btn btn-danger">
<i class="iconfont icon-upload"></i>重新上报
</button>
<button id="view" type="button" class="btn btn-success">
<i class="iconfont icon-207"></i>查看
</button>
</div> <table id="table"></table>
<div style="display:none">
<textarea id="u52_input" >"网上人事代理服务平台"是厦门市人才服务中心为广大代理单位和代理人员推出的集注册、查询、修改、打印、互动功能为一体的人事代理电子服务平台。代理单位和代理人员使用本平台信息服务，须了解并遵守以下规定： <p>一、信息的发布</p> <p>·信息发布须真实有效，符合法律规定；</p> <p>·不能借助本服务平台发布任何与人事代理无关的信息；</p> <p>·不能在所发布的信息内嵌入恶意的程序代码；</p> <p>·代理单位和代理人员对所发布的信息承担完全责任。</p> <p>二、信息的使用</p> <p>·为了您的信息安全，请及时修改初始密码。</p> <p>·请单位指定专人负责网上人事代理信息查询业务。负责网上人事代理信息查询业务人员必须是责任心强且有保密意识的人员。</p> <p>·单位负责查询人员应妥善保管好密码，遇负责查询人员变动时，请单位及时更改查询密码。</p> <p>·单位负责查询人员必须正当使用所查询的信息，对因使用不当或故意泄露代理人员信息所造成的后果，单位和查询人员应承担相应的法律责任。</p> <p>·如网上查询的信息与单位或个人的真实情况不相符，请及时与我中心代理部联系并提供依据，以便更改。</p> <p>三、服务中断和终止</p> <p>·我中心有权在代理单位或代理人员违反以上信息管理规定的情况下终止提供本电子信息平台服务。</p> <p>·我中心有权在预先通知或不予通知的情况下终止任何免费服务。</p> <p>·本网站因正常的系统维护、系统升级，或者因网络拥塞、外力干预而导致网站不能访问，本网站不承担任何责任。</p> <p>厦门市人才服务中心对本规定拥有最终解释权。</p> </textarea>
</div>
</div> </div>
</div>
<script type="text/javascript">
$(function() {
var $table;
//网格实现
$table = $('#table').bootstrapTable({
height : 'auto',
dataType : 'json',
dataField : 'data',
url : ctx + "/unit/rsdl/qyjy/queryBydwId",
striped : true, //是否显示行间隔色
cache : false, //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
clickToSelect : true,//是否启用点击选中行
showToggle : true, //是否显示详细视图和列表视图的切换按钮
cardView : false, //是否显示详细视图
showRefresh : true, //是否显示刷新按钮
undefinedText : '',//当数据为 undefined 时显示的字符
pagination : true, //开启分页
sidePagination : 'server',//服务器端分页
queryParamsType : '',//分页参数类型，默认为limit（参数即为limit、offset）,此处设置为空(参数即为pageNumber、pageSize)
pageNumber : 1,//默认加载页
pageSize : 10,//每页数据
pageList : [ 10, 20, 50 ],//可选的每页数据
toolbar : '#myop',
method : 'post',
columns : [ {
field : 'state',
checkbox : true,
width : 10
}, {
field : 'ydwjg.name',//？？？
title : '代理中心',
width : 100,
halign : 'center',//表格居中
align : 'left'//数据的对齐方式
}, {
field : 'ydlstate',
title : '状态',
width : 30,
code : "RSDL_SH_STATUS",
halign : 'center',//表格居中
align : 'right'//数据的对齐方式
}, {
field : 'xdwjg.name',//？？？
title : '变更后代理中心',
width : 100,
halign : 'center',//表格居中
align : 'left'//数据的对齐方式
}, {
field : 'xdlstate',
title : '状态',
width : 30,
code:"RSDL_SH_STATUS",
halign : 'center',//表格居中
align : 'right'//数据的对齐方式
}, {
field : 'sbsj',
title : '上报时间',
width : 50,
halign : 'center',//表格居中
align : 'right'//数据的对齐方式
} ]
});
$(window).resize(function() {
$table.bootstrapTable('resetView', {
height : 'auto'
});
}); //签约
var star = $('#u52_input').val();
$("#sign").click(function() {
layer.confirm(star, {title: '单位委托人事代理协议',
btn: ['我接受', '我不接受'],
area:['75%','90%'],
shade: false}, function () { $.ajax({
type: "post",
url: ctx + "/unit/rsdl/qyjy/sianProtocol",
success: function (data) { if (data.code == "success") {
var index = layer.open({
type: 2 //Page层类型
, shadeClose: true
, area: 'auto'
, maxWidth: true
, title: '人事代理材料上传'
, shade: 0.6 //遮罩透明度
, maxmin: true //允许全屏最小化
, anim: 1 //0-6的动画形式，-1不开启
, content: ctx + '/unit/rsdl/qyjy/turnSignPage'
, end: function () {
layer.msg("已关闭页面", {icon: 1});
$table.bootstrapTable("refresh");
}
});
layer.full(index);
} else {
layer.msg(data.message, {icon: 5});
} }
});
})
}); //解约
$("#cancle").click(function() {
layer.confirm('无需选择记录，对当前已经签约代理中心直接解约，是否解约？', {title: '单位委托人事代理协议', btn: ['接受', '不接受'], shade: false}, function () { $.ajax({
type: "post",
url: ctx + "/unit/rsdl/qyjy/sianProtocol",
success: function (data) { if (data.code == "success") {
var index = layer.open({
type: 2 //Page层类型
, shadeClose: true
, area: 'auto'
, maxWidth: true
, title: '人事代理材料上传'
, shade: 0.6 //遮罩透明度
, maxmin: true //允许全屏最小化
, anim: 1 //0-6的动画形式，-1不开启
, content: ctx + '/unit/rsdl/qyjy/turnSignPage'
, end: function () {
layer.msg("返回页面", {icon: 1});
$table.bootstrapTable("refresh");
}
});
layer.full(index);
} else {
layer.msg("您已经有签约，无需再签。", {icon: 5});
} }
});
})
}); //修改申请
$("#modify").click(function() {
var data = $table.bootstrapTable('getSelections');
if (data.length == 0) {
layer.msg("请选择记录", {
icon : 5
});
} else if (data.length > 1) {
layer.msg("选择记录太多，请选择一条。", {
icon : 5
});
} else {
layer.msg("等待添加功能", {
icon : 5
});
}
}); //撤销申请
$("#repeal").click(function() {
var data = $table.bootstrapTable('getSelections');
if (data.length == 0) {
layer.msg("请选择记录", {
icon : 5
});
} else if (data.length > 1) {
layer.msg("选择记录太多，请选择一条。", {
icon : 5
});
} else {
layer.msg("等待添加功能", {
icon : 5
});
}
}); //变更代理
$("#change").click(function() {
layer.confirm('当前已有签约且没有其他审核进行才可变更代理，是否变更代理中心？',
{title: '变更代理中心', btn: ['变更代理', '不了'], shade: false}, function () {
layer.closeAll('dialog');
$.ajax({
type: "post",
url: ctx + "/unit/rsdl/qyjy/bgconfirm",
success: function (data) { if (data.code == "success") {
//layer.msg("您可以重新上报了"+data.data[0].id, {icon: 1});
var index = layer.open({
type: 2 //Page层类型
, shadeClose: true
, area: 'auto'
, maxWidth: true
, title: '重新审核'
, shade: 0.6 //遮罩透明度
, maxmin: true //允许全屏最小化
, anim: 1 //0-6的动画形式，-1不开启
, content: ctx + "/unit/rsdl/qyjy/turnBg"
, end: function () {
$table.bootstrapTable("refresh");
}});
layer.full(index);
} else {
layer.msg(data.message, {icon: 5});
} }
});
})
}); //重新上报
$("#report").click(function() {
layer.confirm('无需选择记录，当前有被退回的记录才能重新上报，是否重新上报？',
{title: '重新上报', btn: ['重新上报', '不上报'], shade: false}, function () {
layer.closeAll('dialog');
$.ajax({
type: "post",
url: ctx + "/unit/rsdl/qyjy/isBack",
success: function (data) { if (data.code == "success") {
//layer.msg("您可以重新上报了"+data.data[0].id, {icon: 1});
var index = layer.open({
type: 2 //Page层类型
, shadeClose: true
, area: 'auto'
, maxWidth: true
, title: '重新审核'
, shade: 0.6 //遮罩透明度
, maxmin: true //允许全屏最小化
, anim: 1 //0-6的动画形式，-1不开启
, content: ctx + "/unit/rsdl/qyjy/turnBack?id="+data.data[0].id
, end: function () {
$table.bootstrapTable("refresh");
}});
layer.full(index);
} else {
layer.msg(data.message, {icon: 5});
} }
});
})
}); //查看
$("#view").click(function() {
var data = $table.bootstrapTable('getSelections');
if (data.length == 0) {
layer.msg("请选择记录", {
icon : 5
});
} else if (data.length > 1) {
layer.msg("选择记录太多，请选择一条。", {
icon : 5
});
} else { var index = layer.open({
type: 2 //Page层类型
, shadeClose: true
, area: 'auto'
, maxWidth: true
, title: '查看'
, shade: 0.6 //遮罩透明度
, maxmin: true //允许全屏最小化
, anim: 1 //0-6的动画形式，-1不开启
, content: ctx + "/unit/rsdl/qyjy/view?id="+data[0].id
, end: function () {
$table.bootstrapTable("refresh");
}});
layer.full(index);
}
}); });
</script>
</body>
</html>
一个提交页面，用来展示动态select和数据验证
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@include file="/WEB-INF/jsp/common/taglibs.jspf"%>
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<base:meta/>
<base:page/>
<title>人事代理上传</title>
<!-- 插件样式库 -->
</head>
<style type="text/css">
.span87 {
width: 87.33333333%;
position: relative;
min-height: 1px;
padding-right: 10px;
padding-left: 10px;
float: left;
box-sizing: border-box;
}
</style>
<body>
<div class="wrapper-content">
<div class="box">
<form class="form-horizontal" id="rsdlForm" method="post">
<input type="hidden" name="id" value="${data.id}">
<input id="ylzd1" type="hidden" name="ylzd1" value="${data.ylzd1}">
<div class="box-body">
<div class="widget-box">
<div class="widget-header">
<div class="widget-title">变更重新提交</div>
<div class="widget-toolbar">
<a class="widget-shrink"><i class="iconfont icon-down"></i></a>
</div>
</div>
<div class="widget-body"> <div class="form-group form-group-sm">
<label class="span1-5 control-label"><b
class="mr5 red500">*</b>单位名称：</label>
<div class="span6">
<input type="text" placeholder="请输入单位名称" class="form-control"
name="dwname" value="${data.dwname}" nullmsg="单位名称不能为空"
datatype="*" maxlength="20" readonly />
</div>
</div>
<div class="form-group form-group-sm">
<label class="span1-5 control-label"><b
class="mr5 red500">*</b>证件号码：</label>
<div class="span6">
<input type="text" placeholder="请输入证件号码" class="form-control"
value="${data.zjhm}" name="zjhm" nullmsg="证件号码不能为空"
datatype="*" maxlength="20" />
</div>
</div>
<div class="form-group form-group-sm">
<label class="span1-5 control-label"><b
class="mr5 red500">*</b>单位类型</label>
<div class="span2-5">
<syscode:sysCode sysCode="TWJX_EDUCATION" name="dyType"
type="select" required="1" value="${data.dyType}"
cssclass="form-control selectpicker" />
</div>
</div>
<br/>
<div class="form-group form-group-sm" disabled="true">
<label class="span1-5 control-label"><b
class="mr5 red500">*</b>原人事代理机构</label>
<input cssclass="form-control" name="ydljgId" hidden="true" value="${data.ydljgId}"></select>
<select id ="ycode" cssclass="form-control selectpicker" disabled="disabled"></select>
<!-- <div class="span2-5">
<syscode:sysCode sysCode="TWJX_EDUCATION" name="ydljgId" required="1" type="select" value="${data.ydljgId}" cssclass="form-control selectpicker" />
</div>-->
<!--
<syscode:sysCode sysCode="education" name="education" required="1"
cssclass="form-control selectpicker" value="${identification.education}" type="select"/> --> </div>
<div class="form-group form-group-sm">
<label class="span1-5 control-label"><b
class="mr5 red500">*</b>审核状态：</label>
<div class="span2-5">
<syscode:sysCode sysCode="RSDL_SH_STATUS" name="ydlstate"
type="select" required="1" value="${data.ydlstate}"
cssclass="form-control selectpicker" />
</div>
</div>
<div class="form-group form-group-sm" id="tryHide">
<label class="span1-5 control-label"><b
class="mr5 red500">*</b>审核意见：</label>
<div class="span6">
<input type="text" class="form-control" name="ydlopnion"
value="${data.ydlopnion}" readonly/>
</div>
</div>
<br/>
<div class="form-group form-group-sm">
<label class="span1-5 control-label"><b
class="mr5 red500">*</b>变更人事代理机构</label>
<div class="span2-5">
<input cssclass="form-control" name="xdljgId" hidden="true" value="${data.xdljgId}"></select>
<select id ="xcode" cssclass="form-control selectpicker" disabled="disabled"></select>
<!--<syscode:sysCode sysCode="TWJX_EDUCATION" name="xdljgId"
type="select" required="1" value="${data.xdljgId}"
cssclass="form-control selectpicker" />-->
</div>
</div>
<div class="form-group form-group-sm">
<label class="span1-5 control-label"><b
class="mr5 red500">*</b>审核状态：</label>
<div class="span2-5">
<syscode:sysCode sysCode="RSDL_SH_STATUS" name="xdlstate"
type="select" required="1" value="${data.xdlstate}"
cssclass="form-control selectpicker" />
</div>
</div>
<div class="form-group form-group-sm" id="tryHide">
<label class="span1-5 control-label"><b
class="mr5 red500">*</b>审核意见：</label>
<div class="span6">
<input type="text" class="form-control" name="xdlopnion"
value="${data.xdlopnion}" readonly/>
</div>
</div> </div>
</div>
<div class="btn-group-sm text-center">
<div class="layui-form-item">
<div class="layui-input-block">
<button type="submit" id="btn-save" class="btn btn-success">
<i class="iconfont icon-baocun"></i>重新提交
</button>
<button type="reset" id="btn-reset" class="btn btn-default">
<i class="iconfont icon-reset"></i>取消
</button>
</div>
</div>
</div>
<br />
</form>
</div>
</div> <script>
$(function() {
$.ajax({
url: ctx + "/unit/rsdl/qyjy/getDljgCode",
type: "post",
success: function (data) {
console.log(data.data[0]);
for(var x=0;x<data.data[0].length;x++){
console.log(data.data[0][x]);
if(data.data[0][x].dwid=="${data.ydljgId}"){
$("#ycode").append("<option selected = 'selected' value='"+data.data[0][x].dwid+"'>"+ data.data[0][x].dwname+"</option>");
}else{
$("#ycode").append("<option value='"+data.data[0][x].dwid+"'>"+ data.data[0][x].dwname+"</option>");
}
};
for(var x=0;x<data.data[0].length;x++){
console.log(data.data[0][x]);
console.log("xdljgid:"+"${data.xdljgId}");
if(data.data[0][x].dwid=="${data.xdljgId}"){
$("#xcode").append("<option selected = 'selected' value='"+data.data[0][x].dwid+"'>"+ data.data[0][x].dwname+"</option>");
}else{
$("#xcode").append("<option value='"+data.data[0][x].dwid+"'>"+ data.data[0][x].dwname+"</option>");
}
};
/*var obj = data.data[0];
var str="";
for (var item in obj){
str += item+":"+ obj[item]+";"
$("#testCode").append("<option value='"+item+"'>"+ obj[item]+"</option>");
}
console.log(str); */
}
})
/* var isEdit = $("#ylzd1").val();
if(isEdit==1){
debugger;
}else{
debugger;
}//测试页面通用
*/
/*点击保存*/
var mform = $("#rsdlForm");
var url = ctx + "/unit/rsdl/qyjy/updataReport"; Validform(
mform,
url,
function() {
},
function() {
},
function(data) {
if (data.code == "success") {
$("#btn-save").hide();
layer.msg("重新上传成功，等待代理中心审核，5秒后自动返回页面。", {
icon : 1
});
setTimeout(
"var index = parent.layer.getFrameIndex(window.name);parent.layer.close(index);",
5000); } else {
layer.msg("上传失败：" + data.message, {
icon : 5
});
}
});
/* mform.Validform({
ajaxPost:true,
callback:function(data){
if (data.code=="success") {
// $("#btn-save").hide();
// layer.msg("上传成功，等待代理中心审核签约。",{icon:5});
debugger;
}else{
//layer.msg(data.message,{icon:5});
// debugger;
debugger;
console.log(data.message);
}
} }); */ /*上报*/
$("#btn-report").click(
function() {
$.ajax({
type : "post",
url : ctx + "/unit/twsxjx/jxgwsb/report",
data : {
"id" : $("#id").val()
},
datatype : "json",
success : function(data) {
if (data.code == "0") {
layer.msg(data.message, {
icon : 1
});
//跳转到详情页
window.location.href = ctx
+ "/unit/twsxjx/jxgwsb/detail?id="
+ $("#id").val();
} else {
layer.msg(data.message, {
icon : 5
});
}
}
})
}); $('#btn-reset').click(function(){
var index = parent.layer.getFrameIndex(window.name);parent.layer.close(index);//关闭当前页面
}) //日期控件点击事件
$(".My97DatePicker").click(function() {
WdatePicker({
dateFmt : 'yyyy-MM-dd',
});
});
});
</script>
</body>
</html>
YLZ开发外网前端的更多相关文章
- Java微信公众号开发-外网映射工具配置
一.开发环境准备 1.一个微信公众号 2.外网映射工具(开发调试)如花生壳.ngrok工具 注:与微信对接的URL要具备以下条件a:在公网上能够访问 b:端口只支持80端口 这里使用ngrok.cc: ...
- ylz框架外网之JSP 自定义TAG
首先用到了ServletContext,全局容器的概念,之前不知道哪里有用,现在用到,这里解析的是一个sysCode的TAG,用于下拉框等选项的时候自动显示要选的内容.大致思路是,利用前一篇所说到的E ...
- 如何在自己的Windows系统上 架设服务器并开发网站，然后连入外网供外界访问？(JDK+Tomcat+花生壳)
<目前百度谷歌上都木有我这么完整的笔记,虽然各个部分都是来自百度的,然后自己实践,自己做截图笔记,嘻嘻 Made By HeYang> 环境:Windows 7 工具:JDK,Apache ...
- 关于开发板不能ping通外网IP
最近在做远程监控的项目,打算用开发板给一个网站发送数据包.不过发现开发板只能ping通同一局域网内的ip,外网的ip不能ping通.纠结了半天发现是网关没有设置的原因.下面来说说如何解决这个问题. 首 ...
- 内网穿透+VS2015自带IIS express实现本地调试（微信等需要将开发环境暴漏到外网的情况使用）
今天一个兼职结束了,又要开始寻找新的兼职公司了 ,为了贴补家用啊,为了给儿子更好的生活加油! 抒情完毕进入正题,本篇文章要解决的问题是其实在开发微信支付,微信公众号等回调地址必须是外网可访问的80端口 ...
- Java微信开发_02_本地服务器映射外网
一.工具列表 内网穿透的相关工具有: (1)natapp 官网 :https://natapp.cn/ (2)花生壳 官网:https://console.oray.com/ (2)ngrok 官网: ...
- Java微信公众平台开发_01_本地服务器映射外网
做微信开发之前,我们需要先做一个内网穿透,让我们的工程可以在公网上被访问. 一.工具列表 内网穿透的相关工具有: (1)natapp 官网 :https://natapp.cn/ (2)花生壳 官网: ...
- 3 微信开发本地代理环境的搭建--实现将内网ip映射到外网
微信公众号的开发,要搭建网站,并且随时都有可能修改网站内容进行调试,这就需要临时外网能返回本地开发环境搭建的项目进行测试,即内网映射到公网,但是好多开发者没有自己的域名和服务器,这里我们先来搭建一个本 ...
- 微信公众号开发之怎样将本机IP映射成外网域名
近期一个项目须要用到微信公众号的网页授权登录,在研究这个公众号的时候遇到各种困难,现将自己的一些心得总结一下. 我想进行微信公众号开发遇到的第一个困难就是微信公众号必须输入一个外网能够訪问的域名,在网 ...
随机推荐
- win10+cpu+tensorflow+pycharm
1.安装64位的python3.5 选择windowsx86-64 executable installer安装 2.安装tensorflow cmd->进入到安装python的Scripts文 ...
- 2 爬虫 requests模块
requests模块 Requests是用python语言基于urllib编写的,采用的是Apache2 Licensed开源协议的HTTP库,Requests它会比urllib更加方便,reques ...
- 微信小程序发起微信支付
点击链接查看详情:(支付中配置参数需要从后台得到->签名需要从微信申请才可以得到) https://mp.weixin.qq.com/debug/wxadoc/dev/api/api-pay.h ...
- php根据时间显示刚刚,几分钟前,几小时前的实现代码
发布时间距现在的时间 function tranTime($time) { $rtime = date("m-d H:i", $time); $htime = date(" ...
- Single Number III leetcode java
问题描述: Given an array of numbers nums, in which exactly two elements appear only once and all the oth ...
- 操作远程RabbitMQ
1.连接远程RabbitMQ 访问 http://your ip address:15672 通用帐号为guest,密码为guest:也可以使用自己创建的账号 注:your ip address只你 ...
- Python条件判断和循环,range()函数
条件判断经常使用if语句进行判断,表达方式为:if 条件语句: :elif:else if...用于执行第一条不满足if的判断,继续执行其它的判断.比如一个简单的if判断 Python3取消 ...
- Oracle Log Block Size
Although the size of redo entries is measured in bytes, LGWR writes the redo to the log files on dis ...
- MySQL自带功能介绍
前言: 数据库相关的操作 1.SQL语句 *****(MySql(一)已经介绍): 2.利用mysql内部提供的功能(视图.触发器.函数.存储过程: 一.视图: 把经常使用的查询结果,做成临时视图表, ...
- 剑指 offer 面试题31 连续子数组的最大和（动态规划）
求连续子数组的最大和 题目描述 给定一个整形数组,有正数也有负数,数组中连续一个或多个组成一个子数组,求所有子数组的和的最大值,要求时间复杂度为O(n); 测试用例 给定数组 {1,-2,3,10,- ...