记录在此~方便自己后面做相似的功能直接有的找
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html>
<html lang="en">
<head>
<base href="<%=basePath%>">
<link rel="stylesheet" href="static/ace/css/chosen.css" />
<link rel="stylesheet" href="static/css/select2.min.css" />
<%@ include file="../../system/index/top.jsp"%>
<style type="text/css">
.div-position{
float: left;
}
.form-position{
float: left;
}
ul{
list-style: none;
}
.selectdOld li{
float: left;
width: 100px;
height:25px;
line-height:20px;
background-color: #f7f7f7;
padding:4px;
margin-top: 8px;
margin-right: 8px;
position:relative;
}
.delOld{
cursor: pointer;
font-weight: bold;
position: absolute;
right:6px;
}
.delOld:HOVER {
color: red;
}
</style>
</head>
<body class="no-skin">
<div class="main-container" id="main-container">
<div class="main-content">
<div class="main-content-inner">
<div class="page-content">
<div class="row">
<div class="col-xs-12">
<form action="spotCheck/update.do" name="form" id="form" method="post">
<input type="hidden" name="sId" value="${pd.sId }" />
<input type="hidden" name="cmCode" value="${pd.cmCode }" />
<input type="hidden" id="status" name="status" value="${pd.status}" />
<div id="zhongxin" style="padding-top: 13px;">
<table id="table_report" class="table table-striped table-bordered table-hover" style="width: 97%;">
<tr>
<td style="width:100px;text-align: right;padding-top: 13px;">计划抽查日期:</td>
<td>
<div class="div-position">
<input class="date-picker" name="startDate" id="startDate" value="${pd.startDate }" type="text" data-date-format="yyyy-mm-dd" readonly="readonly" style="width: 80%;" placeholder="日期" title="日期"/>
<i class=" fa fa-pencil bigger-110 nav-search-icon light-grey form-i-position"></i><span class="red">*</span>
</div>
<div class="div-position" style="width: 50px">至</div>
<div class="div-position">
<input class="date-picker" name="endDate" id="endDate" value="${pd.endDate }" type="text" data-date-format="yyyy-mm-dd" readonly="readonly" style="width: 80%;" placeholder="日期" title="日期"/>
<i class=" fa fa-pencil bigger-110 nav-search-icon light-grey form-i-position"></i><span class="red">*</span>
</div>
</td>
</tr>
<tr>
<td style="width:100px;text-align: right;padding-top: 13px;">核验人员:</td>
<td>
<div class=" form-div-position">
<input name="sPerson" id="sPerson" value="${pd.sPerson}" style="width: 85%;" placeholder="核验人员" />
<i class=" fa fa-pencil bigger-110 nav-search-icon light-grey form-i-position"></i><span class="red">*</span>
</div>
</td>
</tr>
</table>
<div style="width: 100%">
<div><h3>选择抽查对象 </h3> <a onclick="getCheckOld();" style="margin-left: 12px;font-size: 16px;cursor:pointer; float:right;">添加</a></div>
<div style="width:50%;float: left;">
<div style="width:100%;margin: 0;">
<table class="table table-striped table-bordered table-hover" style="margin: 0;">
<thead class="fixedThead">
<th style="width: 8%"><input class="parent_check" style="width:18px;height:18px;" name="checkPro2" type="checkbox"></th>
<th style="width: 15%">老人姓名</th>
<th style="width: 12%">性别</th>
<th style="width: 25%">身份证号</th>
<th style="width: 15%">人员属性</th>
<th style="width: 25%">护理类型</th>
<th style=""></th>
</thead>
</table>
</div>
<div style="width:100%;overflow: auto; max-height: 400px;" class="dataBox">
<table class="table table-striped table-bordered table-hover" style="">
<c:forEach items="${oldmanList }" var="item">
<tr>
<td style="width: 8%"><input class="son_check" style="width:18px;height:18px;" name="checkPro" value="${item.odId },${item.odName }" type="checkbox"></td>
<td style="width: 15%">${item.odName }</td>
<td style="width: 12%">
<c:if test="${item.odSex==0 }">女</c:if>
<c:if test="${item.odSex==1 }">男</c:if>
</td>
<td style="width: 25%">${item.odIdCard }</td>
<td style="width: 15%">
<c:if test="${item.odHelp==0 }">普通</c:if>
<c:if test="${item.odHelp==1 }">优抚</c:if>
<c:if test="${item.odHelp==2 }">低保</c:if>
<c:if test="${item.odHelp==3 }">底边</c:if>
<c:if test="${item.odHelp==4 }">五保</c:if>
</td>
<td style="width: 25%">
<c:if test="${item.odType==0 }">半失能失智</c:if>
<c:if test="${item.odType==1 }">全失能失智</c:if>
<c:if test="${item.odType==2 }">自理</c:if>
</td>
</tr>
</c:forEach>
</table>
</div>
</div>
<div style="width: 250;float: left;margin-left: 22px;">
<h3>已选择的抽查老人</h3>
<div style="height: 300px;width: 400px;border: 1px solid black; overflow: auto;" >
<ul class="selectdOld" id="selectdOld">
<c:forEach items="${oldmanList }" var="item">
<c:forEach items="${oldmanListSave }" var="odId" >
<c:if test="${item.odId eq odId}" ><li>${item.odName }<span class='delOld' onclick='delOldman(this,${item.odId})'>X</span></li></c:if>
</c:forEach>
</c:forEach>
<!-- <li>张三 <span class="delOld">X</span></li> -->
</ul>
</div>
</div>
</div>
<!-- <div class="alert alert-info">
<button type="button" class="close" data-dismiss="alert"><i class="ace-icon fa fa-times"></i></button>
<strong>提示!</strong>
<br />
</div> -->
<div class="navbar navbar-inverse navbar-fixed-bottom" style="opacity:0.95;text-align:center;padding-top:10px;background-color:#F9F9F9;border:1px solid grey;border-top-right-radius: 15px;">
<a class="btn btn-mini btn-success final" data-val="1">提交审核</a>
<a class="btn btn-mini btn-success temp" data-val="0">暂存为草稿</a>
<a class="btn btn-mini btn-danger" onclick="top.Dialog.close();">取消</a>
</div>
</div>
<div id="zhongxin2" class="center" style="display:none"><br/><br/><br/><br/><br/><img src="static/images/jiazai.gif" /><br/><h4 class="lighter block green">提交中...</h4></div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
<%@ include file="../../system/index/foot.jsp"%>
<script src="static/js/select2.min.js"></script>
<script src="static/ace/js/date-time/bootstrap-datepicker.js"></script>
<script type="text/javascript">
var oldmanListSave = [];
if('${odIdList}'!=null && '${odIdList}' !=''&&'${odIdList}'!=undefined){
oldmanListSave = JSON.parse('${odIdList}');
}
//全局的checkbox选中和未选中的样式
$parentChexbox = $('.parent_check'), //全选
$dataBox = $('.dataBox'), //用于判断全局与子类的关系
$sonCheckBox = $('.son_check'); //单个子类选中
var selectOldListId = [];
for(var i=0;i<oldmanListSave.length;i++){
selectOldListId.push(oldmanListSave[i]);
}
console.log(selectOldListId)
//全局全选与单个的关系
$parentChexbox.click(function () {
var $checkboxs = $dataBox.find('input[type="checkbox"]');
if ($(this).is(':checked')) {
$checkboxs.prop("checked", true);
} else {
$checkboxs.prop("checked", false);
}
});
$sonCheckBox.each(function () {
$(this).click(function () {
if ($(this).is(':checked')) {
//判断：所有单个是否勾选
var len = $sonCheckBox.length;
var num = 0;
$sonCheckBox.each(function () {
if ($(this).is(':checked')) {
num++;
}
});
if (num == len) {
$parentChexbox.prop("checked", true);
}
} else {
//单个取消勾选，全局全选取消勾选
$parentChexbox.prop("checked", false);
}
})
})
function getCheckOld(){
var $checkboxs = $dataBox.find('input[type="checkbox"]');
$("input[name='checkPro']:checked").each(function(i){
var idval = $(this).val();
var idvalArry= new Array(); //定义一数组
idvalArry=idval.split(","); //字符分割
var id = idvalArry[0];
var name = idvalArry[1];
if(contains(selectOldListId, id)){
alert("'"+name+"'已添加，请勿重复添加");
return;
}
selectOldListId.push(id);
$("#selectdOld").append("<li>"+name+"<span class='delOld' onclick='delOldman(this,\""+id+"\")'>X</span></li>");
})
$checkboxs.prop("checked", false);
$parentChexbox.prop("checked", false);
console.log(selectOldListId);
}
function delOldman(obj,id){
var index = selectOldListId.indexOf(id);
console.log(index);
if (index > -1) {
selectOldListId.splice(index, 1);
}
$(obj).parent().remove();
}
function contains(arr, obj) {
var i = arr.length;
while (i--) {
if (arr[i] === obj) {
return true;
}
}
return false;
}
$(function(){
$(top.hangge());
$('.navbar-fixed-bottom').css("width", $(window).width() / 3).css("margin-left", $(window).width() / 3);
$('caption').text($('.dialog_title', window.parent.document).find('span:first').text());
$('.chosen-select').chosen({allow_single_deselect:true, no_results_text: "没有搜索到："});
$('.date-picker').datepicker({autoclose: true,todayHighlight: true});
$('.nursingItem').select2({
tags: false,
placeholder : "请选择抽查对象",
});
$("#form").validate({
onfocusout:function(element) {
$(element).valid();
},
rules:{
sPerson:{
required: true
}
},
messages:{
sPerson:{
required: "请输入核验人员姓名！"
}
},
errorPlacement: function(error, element) {
element.removeClass("check-validate-border").addClass("error-validate-border");
var text = error.text();
$(element).next('i').attr("class","fa fa-warning bigger-110 nav-search-icon red2 form-i-position");
if(text != ""){
$(element).tips({
side:3,
msg:text,
bg:'#AE81FF',
time:3
});
}
},
success:function(error, element){
$('#'+element.id).removeClass("error-validate-border").addClass("check-validate-border");
$('#'+element.id).next('i').attr("class","fa fa-check bigger-110 nav-search-icon green form-i-position");
}
});
$('.btn-success').on('click', function(){
$('.btn').attr("disabled", "disabled");
if($('#form').valid()){
if (selectOldListId.length == 0){
Alert("请选择抽查对象",3000);
$('.btn').removeAttr("disabled");
return;
}
var endTime = $('#endDate').val();
var startTime = $('#startDate').val();
if(startTime==null||startTime==''){
Alert("开始时间未填写",3000);
$('.btn').removeAttr("disabled");
return;
}
if(endTime==null||endTime==''){
Alert("结束时间未填写",3000);
$('.btn').removeAttr("disabled");
return;
}
if(endTime<=startTime){
Alert("结束时间不能在开始时间前",3000);
$('.btn').removeAttr("disabled");
return;
}
var value = $(this).data('val');
$.ajax({
type: 'post',
url: $('#form').attr('action'),
data: $('#form').serialize()+"&status="+value+ '&odId=' + selectOldListId,
dataType: 'json',
success: function(data){
prompt(data, function(){
top.Dialog.close();
});
}
});
}else{
$('.btn').removeAttr("disabled");
}
});
});
</script>
</body>
</html>
扫一扫
766
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
