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映射成外网域名
近期一个项目须要用到微信公众号的网页授权登录,在研究这个公众号的时候遇到各种困难,现将自己的一些心得总结一下. 我想进行微信公众号开发遇到的第一个困难就是微信公众号必须输入一个外网能够訪问的域名,在网 ...
随机推荐
- vi常用快捷键
vi常用快捷键 1)移动光标 h :光标左移一个字符k :光标上移一个字符j :光标下移一个字符l :光标右移一个字符 0 :光标移至行首$ :光标移至行尾 H :光标移至屏幕首行M :光标移至屏幕中 ...
- 【洛谷p1932】A+B A-B A*B A/B A%B Problem
(emmmm) 这道题成功让我见识到了Dev撤回的高端大气上档(dàng)次. A+B A-B A*B A/B A%B Problem[传送门](真是个优秀的高精) 算法:::::::(模板题弄这么费 ...
- jquery 根据自定义属性选择
<div myattr="test">text</div> 使用$("div[myattr='test']")进行选择
- element-ui table中排序 取消表格默认排序问题
sortTable 设置为 custom 一定要设置在列上
- 借助python工具从word文件中抽取相关表的定义，最后组装建表语句-非常好
借助python工具从word文件中抽取表的定义,最后组装建表语句-非常好 --如有转载请以超链接的方式注明原文章出处,谢谢大家.请尊重每一位乐于分享的原创者 1.python脚本 ## -*- co ...
- E - Let's Go Rolling!
题目描述:数轴上有nn个质点,第ii个质点的坐标为xixi,花费为cici,现在要选择其中一些点固定,代价为这些点的花费,固定的点不动,不固定的点会向左移动直至遇到固定的点,代价是这两点的距离,如果左 ...
- 微信小程序页面无法跳转
推荐网址:https://www.jianshu.com/p/e56b55334585 1.无法跳转原因分析 要跳转的路径在app.js里未注册过或路径写错 要跳转的路径是否位于TabBar中 页 ...
- PyCharm调试运行Scrapy教程
一.使用scrapy创建一个项目 这里使用scrapy官方第一个示例 scrapy startproject tutorial 使用PyCharm打开项目,在tutorial/tutorial/spi ...
- mybatis标签之——<trim>及 <foreach collection>
https://www.cnblogs.com/zjfjava/p/8882614.html trim标记是一个格式化的标记,主要用于拼接sql的条件语句(前缀或后缀的添加或忽略),可以完成set或者 ...
- mysql查看和修改密码策略
8.X版本: #查看密码策略 show variables like '%validate_password.policy%'; show variables like '%validate_pass ...