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>