复选框回显、全选、非全选、cookie处理数据、json数组对象转换处理学习笔记
2018.9.5：复选框回显、全选、非全选、cookie处理、json数组对象转换处理学习笔记
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<%@ page contentType="text/html; charset=UTF-8"%>
<%@include file="/common/head.jsp"%>
<html xmlns="http://www.w3.org/1999/xhtml">
<%@ include file="/common/common.jsp"%>
<head>
<title>兴业银行二手房项目查询</title>
<script type="text/javascript">
function showprojinfo(projid){
var url="<s:url value="/common/projOperFrame!projectDetail.action"/>?projid="+projid;
winOpen(url,'1100','800');
}
$(document).ready( function()
{
// 去掉所有input的autocomplete, 显示指定的除外
$('input:not([autocomplete]),textarea:not([autocomplete]),select:not([autocomplete])').attr('autocomplete', 'off');
var count = <s:property value="result.count"/>;
if(count<=0){
$("#excelExport").hide();
}
$("#excelExport").click(function()
{
var canExport = $("#canExport").val();
if(canExport == false){
$.messager.alert('提示信息','当前查询结果没有数据,不能进行导出！', 'warning');
}
$("#isExport").val("true");
$("#projectQuery").attr("action",'<s:url value="/secHandHouseBatchManager/querySecHandHouseProList.action"/>');
$("#projectQuery").submit();
$("#isExport").val("false");
$("#projectQuery").attr("action",'<s:url value="/secHandHouseBatchManager/querySecHandHouseProList.action"/>');
})
$("#query").click(function()
{
$("#start").val(0);
$("#projectQuery").attr("action",'<s:url value="/secHandHouseBatchManager/querySecHandHouseProList.action"/>');
$("#projectQuery").submit();
})
$('#projectQuery').submit( function () {
var applyProjids = getCookie("applyProjids");
var paramforms = JSON.parse(applyProjids);
//如果查出来的paramforms为null,则new 一个对象
if (null==paramforms) {
paramforms=new Array();
}
if ($(":checkbox:checked").length == 0) {
}else {
$(":checkbox:checked").each(
function() {
var strs = new Array();
strs = $(this).val().split(",");
var projid = strs[0];
var compserialid = strs[1];
var projcode = strs[2];
var projname = strs[3];
var busstype = strs[4];
var assuremoney = strs[5];
var customername = strs[6];
paramforms.push({
projid: projid
});
});
}
//去重处理
paramforms=unique(paramforms);
//设置cookie失效时间为1小时后
setCookie("applyProjids",JSON.stringify(paramforms),60*60*1000);
trimForm(document.getElementById('projectQuery'));
return $(this).form('validate');
});
//当页面加载完成的时候，自动调用该方法
window.onload=function(){
var applyProjids = getCookie("applyProjids");
var checkArray =JSON.parse(applyProjids);
//获得所有的复选框对象
var checkBoxAll = $("input[name='templateID']");
if (null!=checkArray && null!=checkArray.length) {
//获得所有复选框（新闻,微信,论坛，问答，博客，平媒）的value值，然后，用checkArray中的值和他们比较，如果有，则说明该复选框被选中
for(var i=0;i<checkArray.length;i++){
//获取所有复选框对象的value属性，然后，用checkArray[i]和他们匹配，如果有，则说明他应被选中
$.each(checkBoxAll,function(j,checkbox){
//获取复选框的value属性
var checkValue=$(checkbox).val();
checkValue=parseInt(checkValue);
var pr=parseInt(checkArray[i].projid);
if(pr == checkValue){
$(checkbox).attr("checked",true);
}
})
}
}
};
});
//json数组去重
function unique(list) {
var arr = [];
if (null!=list) {
for (var i = 0; i < list.length; i++) {
if (i == 0) arr.push(list[i]);
b = false;
if (arr.length > 0 && i > 0) {
for (var j = 0; j < arr.length; j++) {
if (arr[j].projid == list[i].projid) {
b = true;
//break;
}
}
if (!b) {
arr.push(list[i]);
}
}
}
}
return arr;
}
function moreQuery(btn)
{
var flag = btn.getAttribute("flag");
if(flag == 1)
{
$("[name=morecond]").each(
function (){
this.style.display="";
}
);
$("#queryModel").attr("value",2);
btn.setAttribute("flag",2);
btn.setAttribute("value","基本筛选");
}else if(flag == 2)
{
$("[name=morecond]").each(
function (){
this.style.display="none";
}
);
$("#queryModel").attr("value",1);
btn.setAttribute("flag",1);
btn.setAttribute("value","高级筛选");
}
}
function clearForm(objE){
$(objE).find(':input').each(
function(){
switch(this.type){
case 'text':
if($(this).attr("keep") != 'true')$(this).val('');
break;
case 'hidden':
if($(this).attr("keep") != 'true')$(this).val('');
break;
case 'button': break;
}
}
);
$(objE).find('select option:selected').attr("selected",false);
}
//全选
function selectAll(){
var ids = document.getElementsByName("templateID");
for(var i=0;i<ids.length;i++){
ids[i].checked=true;
}
}
//全不
function selectNone(){
var ids = document.getElementsByName("templateID");
for(var i=0;i<ids.length;i++){
ids[i].checked=false;
}
}
//反选
function selectInvert(){
var ids = document.getElementsByName("templateID");
for(var i=0;i<ids.length;i++){
if(ids[i].checked)
ids[i].checked=false ;
else
ids[i].checked=true ;
}
}
function toaddXyBankPro(){
var toaddXyBankProUrl="<s:url value='/secondhandhous/projectSecondHandHousPage!processPage.action'/>?page=xyBank&isxyyhapply=true"
winOpen(toaddXyBankProUrl,'1024','768');
}
function xyBankApply() {
//从cookie中获取之前选中的项目Id的json字符串
var applyProjids = getCookie("applyProjids");
//将json字符串转换成为json数组对象
var paramforms = JSON.parse(applyProjids);
//如果查出来的paramforms为null,则new 一个对象
if (null==paramforms) {
paramforms=new Array();
}
if ($(":checkbox:checked").length == 0) {
$.messager.alert('提示信息', '请选择需要申请的项目！', 'warning');
return false;
} else {
$(":checkbox:checked").each(
function() {
var projid = $(this).val();
paramforms.push({
projid: projid
});
});
}
//去重处理
paramforms=unique(paramforms);
window.top.loaderMask.show();
//提交的时候设置cookie立即失效,之前的数据清除
setCookie("applyProjids",JSON.stringify(paramforms),-1);
$("#apply").attr("action",'<s:url value="/secHandHouseBatchManager/sendHandHouseBatchApply.action"/>?applyProjids='+JSON.stringify(paramforms));
$("#apply").submit();
}
function isChecked(checkbox){
//从cookie中获取之前选中的项目Id的json字符串
var applyProjids = getCookie("applyProjids");
//将json字符串转换成为json数组对象
var paramforms = JSON.parse(applyProjids);
//如果查出来的paramforms为null,则new 一个对象
if (null==paramforms) {
paramforms=new Array();
}
if (checkbox.checked == true){
paramforms.push({
projid: $(checkbox).val()
});
}else{
paramforms.remove($(checkbox).val(),paramforms);
}
//去重处理
paramforms=unique(paramforms);
//设置cookie失效时间为1小时后
setCookie("applyProjids",JSON.stringify(paramforms),60*60*1000);
}
Array.prototype.indexOf = function (val,listdata) {
if (null!=listdata) {
for (var i = 0; i < listdata.length; i++) {
if (val == listdata[i].projid) {
return i;
}
}
}
return -1;
};
Array.prototype.remove = function (val,listdata) {
var index = this.indexOf(val,listdata);
if (index > -1) {
this.splice(index, 1);
}
};
function getCookie(name) {
// (^| )name=([^;]*)(;|$),match[0]为与整个正则表达式匹配的字符串，match[i]为正则表达式捕获数组相匹配的数组；
var arr = document.cookie.match(new RegExp("(^| )"+name+"=([^;]*)(;|$)"));
if(arr != null) {
return unescape(arr[2]);
}
return null;
}
function setCookie(name,value,time) {
var exp = new Date(); //new Date("December 31, 9998");
exp.setTime(exp.getTime() + time);
if((typeof value == "string")&&(value.length > 0)){
document.cookie = name + "="+ escape(value) + ";expires=" + exp.toGMTString();
}else{
var exp = new Date();
exp.setTime(exp.getTime() - 1);
var cval=getCookie(name);
if(cval!=null)
document.cookie=name +"="+cval+";expires="+exp.toGMTString();
}
}
</script>
</head>
<body>
<div class="MainDiv">
<div class="OperateTileDiv" ><span><h1>兴业银行二手房项目管理</span></div>
<div class="contentDiv">
<form id="projectQuery" action="" method="get"/>
<input type="hidden" keep="true" id="isExport" name="isExport" value="false"/>
<input type="hidden" keep="true" id="start" name="start" value="<s:property value="start"/>"/>
<input type="hidden" keep="true" id="limit" name="limit" value="<s:property value="limit"/>"/>
<input type="hidden" keep="true" id="topage" name="queryCnd.toPage" value="apply" />
<input type="hidden" keep="true" id="queryModel" name="queryCnd.queryModel" value="<s:property value="queryCnd.queryModel"/>" />
<input type="hidden" keep="true" name="queryCnd.projstage" value="<s:property value="%{queryCnd.projstage}"/>" />
<div class="QueryDiv">
<div class="navTitle">> 兴业银行二手房项目查询</div>
<div class="TableDiv">
<table cellspacing=1 border=0 class="tablestyle border1 " id="tbColor">
<tr >
<td class="td_left" >
项目编号：
</td>
<td>
<input type="text" name="queryCnd.projcode" style="width:180px" value="<s:property value="%{queryCnd.projcode}"/>"/>
</td>
<td class="td_left">
银行名称：
</td>
<td>
<input type="text" name="queryCnd.bankName" style="width:180px" value="<s:property value="%{queryCnd.bankName}"/>"/>
</td>
<td class="td_left">
客户名称：
</td>
<td>
<input type="text" name="queryCnd.customername" style="width:180px" value="<s:property value="%{queryCnd.customername}"/>"/>
</td>
</tr>
</table>
<br/>
<div class="ButtonDiv" style="text-align:center"><input class="buttoncls" type="button" value=" 查 询 " id="query"/>
<input class="buttoncls" type="button" value=" 清 除 " id="clearBtn" onclick="clearForm(this.form)"/>
<s:bean name="com.vimtech.ac.domain.AcRole" id="adminPos">
<s:param name="rolecode" value="'admin'"></s:param>
</s:bean>
<s:if test="#session.USERSESSION.info.roles.contains(#adminPos)">
<input class="buttoncls" type="button" value=" 导出 " id="excelExport"/>
</s:if>
</div>
</div>
</div>
</form>
<div class="ResultDiv">
<div class="navTitle">> 项目查询列表</div>
<div class="TableDiv">
<table id="test1" cellspacing=1 border=0 class="tablestyle border1 changeColor blendedColor">
<tr class="tr_title">
<td >
<a href="#" onclick="selectAll();">全选</a>
<a href="#" onclick="selectNone();">全不</a>
<a href="#" onclick="selectInvert();">反选</a>
</td>
<td >
项目编号
</td>
<td >
客户名称
</td>
<td >
业务品种
</td>
<td >
担保金额(万元)
</td>
<td >
币种
</td>
<td >
流转状态
</td>
</tr>
<s:iterator var="role" value="result.list">
<tr>
<td style="text-align: center">
<input type="checkbox" name="templateID" value="<s:property value="projid"/>" onclick="isChecked(this)">
<input type="hidden" name="compserialid" value="<s:property value="customerid"/>"/>
</td>
<td style="text-align: center">
<a href="javascript:void(0)" onclick="showprojinfo('<s:property value="projid"/>')"><s:property value="projcode"/></a>
</td>
<td style="text-align: center">
<s:property value="customername"/>
</td>
<td style="text-align: center">
<conf:config type="busstype" value="%{childbusstype}"/>
</td>
<td style="text-align: center">
<s:number name="assuremoney" groupingUsed="false"/>
</td>
<td style="text-align: center">
<dict:message dictTypeId="BMS_REGCURRID_TYPE" value="%{currency}"/>
</td>
<td style="text-align: center">
<dict:message dictTypeId="FMS_SEC_PROJECT_STAGE" value="%{projstage}"/>
</td>
</tr>
</s:iterator>
</table>
<br />
<form id="apply" method="post" target="commentframe">
<input type="hidden" name="flag" id="flag" value="true"/>
<input type="hidden" id="backurl" name="success" value="<s:url value='/main.jsp'/>?time=2000"/>
<!-- 流程发起人评论参数设置 -->
<input type="hidden" name="commentInfo.bussWfProcess.itemname" value="兴业银行二手房审批流程"/>
<input type="hidden" name="commentInfo.bussWfProcess.handlername" value="<s:property value="result.data.userInfo.emp.empname"/>" />
<input type="hidden" name="commentInfo.bussWfProcess.handlercode" value="<s:property value="result.data.userInfo.emp.empcode"/>" />
<input type="hidden" name="commentInfo.bussWfProcess.projid" value="<s:property value="projid"/>" id="projid"/>
<input type="hidden" name="commentInfo.bussWfProcess.objecttype" value="W0101222" />
<!-- 用于初始化对象，不用再在后台处理了 -->
<input type="hidden" name="sechandHouseBatchGuarantee.applyid" id="objectid" value="<s:property value="result.data.sechandHouseBatchGuarantee.applyid"/>"/>
</form>
<input type="button" class="buttoncls" value="新增项目" onClick="toaddXyBankPro()">
<input type="button" class="buttoncls" value="发起申请" onClick="xyBankApply()">
<br />
<br />
</div>
</div>
<div class="PageDiv" >
<page:pagination count="%{result.count}" start="%{start}" limit="%{limit}" formId="projectQuery"></page:pagination>
</div>
<div id="showModalDailogWindows" class="easyui-window" collapsible="false" minimizable="false" maximizable="false" closed="true" title="窗口" modal="true" style="width:600px;height:400px;overflow:hidden;">
<iframe scrolling="no" id="commentframe" name="commentframe" marginheight="0" marginwidth="0" style="width:580px;height:380px;overflow:hidden" frameborder="0"></iframe>
</div>
</div>
</div>
</body>
</html>
