div 设置样式 显示滚动条
2014-08-14 11:35
507 查看
<div style="PADDING-RIGHT: 10px;
OVERFLOW-Y: auto; PADDING-LEFT: 10px;
SCROLLBAR-FACE-COLOR: #ffffff; FONT-SIZE: 11pt; PADDING-BOTTOM: 0px;
SCROLLBAR-HIGHLIGHT-COLOR: #ffffff; OVERFLOW: auto; WIDTH: 200px;
SCROLLBAR-SHADOW-COLOR: #919192; COLOR: blue;
SCROLLBAR-3DLIGHT-COLOR:#ffffff; LINE-HEIGHT: 100%;
SCROLLBAR-ARROW-COLOR: #919192; PADDING-TOP: 0px;
SCROLLBAR-TRACK-COLOR: #ffffff; FONT-FAMILY: 宋体;
SCROLLBAR-DARKSHADOW-COLOR: #ffffff; LETTER-SPACING: 1pt; HEIGHT: 500px; TEXT-ALIGN: left; background-repeat: no-repeat;">
$("#openPopupForcarModel table td li a[value='<%=bean.getModel_id()%>']").addClass("current"); //根据a标签 value的值找控件
冻结
OVERFLOW-Y: auto; PADDING-LEFT: 10px;
SCROLLBAR-FACE-COLOR: #ffffff; FONT-SIZE: 11pt; PADDING-BOTTOM: 0px;
SCROLLBAR-HIGHLIGHT-COLOR: #ffffff; OVERFLOW: auto; WIDTH: 200px;
SCROLLBAR-SHADOW-COLOR: #919192; COLOR: blue;
SCROLLBAR-3DLIGHT-COLOR:#ffffff; LINE-HEIGHT: 100%;
SCROLLBAR-ARROW-COLOR: #919192; PADDING-TOP: 0px;
SCROLLBAR-TRACK-COLOR: #ffffff; FONT-FAMILY: 宋体;
SCROLLBAR-DARKSHADOW-COLOR: #ffffff; LETTER-SPACING: 1pt; HEIGHT: 500px; TEXT-ALIGN: left; background-repeat: no-repeat;">
$("#openPopupForcarModel table td li a[value='<%=bean.getModel_id()%>']").addClass("current"); //根据a标签 value的值找控件
冻结
<%@ page language="java" errorPage="/error.jsp" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<%@page import="org.apache.commons.lang.StringUtils"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
String id = (String)request.getAttribute("id");
String text = (String)request.getAttribute("text");
String topName =text.split(",")[0];
String topId =id.split(",")[0];
String bottomName =text.split(",")[1];
String bottomId =id.split(",")[1];
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="shortcut icon" href="<%=path%>/assets/images/favicon.ico" />
<link charset="utf-8" rel="stylesheet" href="<%=path%>/assets/stylesheets/common.css" />
<link charset="utf-8" rel="stylesheet" href="<%=path%>/assets/stylesheets/product.css" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width" />
<title>产品 - 车型对比分析</title>
<!--[if IE]>
<script src="${ctx}/assets/javascripts/libs/ie.js"></script>
<![endif]-->
<![if IE]>
<script src="${ctx}/assets/javascripts/libs/ie.js"></script>
<![endif]>
<!-- <script type="text/javascript" src="${ctx}/js/waysdata/common/chartUtils.js"></script>-->
<style type="text/css">
.title{
background-color: #D4E0EC;
height: 45px;
width: 200px;
border-right: white 2px solid;
font-size: 14px;
color: #4F81D2;
text-align: center;
}
.msrp{
background-color: #EBF0F6;
height: 30px;
width: 200px;
border-right: white 2px solid;
font-size: 14px;
color: #4F81D2;
}
.msrp-value{
background-color: #F1F1F1;
height: 30px;
width: 200px;
border-right: white 2px solid;
text-align: center;
font-size: 12px;
color: #4F81D2;
}
.Advantage{
background-color:#BBF2AE;
height: 80px;
width: 200px;
font-size: 14px;
}
.Advantage-value{
height: 80px;
width: 200px;
border-bottom:#ECECEC 2px solid;
border-right:#ECECEC 2px solid;
border-top: #BBF2AE 2px solid;
vertical-align: top;
}
.Inferiority{
background-color: #FFCCCB;
height: 80px;
width: 200px;
font-size: 14px;
}
.Inferiority-value{
height: 80px;
width: 200px;
border-bottom:#ECECEC 2px solid;
border-right:#ECECEC 2px solid;
border-top: #FFCCCB 2px solid;
vertical-align: top;
}
.Same{
background-color: #ECECEC;
height: 80px;
width: 200px;
font-size: 14px;
}
.Same-value{
height: 80px;
width: 200px;
border:#ECECEC 2px solid;
vertical-align: top;
}
.delete {
}
.hide{
display:none;
font-size: 14px;
}
</style>
</head>
<body>
<!-- page loading... begin -->
<div class="popup" id="page_loading"><div class="warm-tips loading-box">页面加载中，请稍等...</div></div>
<div id="pop_mask" class="pop-mask"></div>
<script>var page_loading={show:function(){var e,t,n;e=document.documentElement,t=document.getElementById("pop_mask"),t.style.display="block",t.style.height=e.clientHeight+"px",n=document.getElementById("page_loading"),n.style.display="block",n.style.top=(e.clientHeight-n.offsetHeight)/2+"px",n.style.left=(e.clientWidth-n.offsetWidth)/2+"px"}};page_loading.show();</script>
<!-- page loading... end -->
<section class="page-wrapper">
<%@ include file="/common/top.jsp"%>
<section class="page-body clearfix">
<%@ include file="/common/leftside.jsp"%>
<!-- 主内容栏 -->
<section class="main pt121" id="main" style="padding-top: 43px;">
<header class="main-header tool-bar" fixed-block="true" style="padding: 8px 10px;">
<a class="btn-fixed fixed" block=".main-header" style="top: 10px;display: none;"></a>
<button class="btn-submit fr mr50" id="selectModel" onclick="selectedModel()">选择车型</button>
<div>
<span class="fl">已选车型(${modelCount})：</span>
<div style="margin-left: 100px;margin-right: 200px;">
<div class="btn-group circle-style noborder" data-upper-limit="2" required="" store="models" id="models" style="height: auto;">
<c:forEach var="model" items="${modelJson}">
<a class="btn toggle ${model.active}" data-value="${model.id}">${model.text}</a>
</c:forEach>
<input type="hidden" name="models" value="${id}" text="${text}">
</div>
</div>
</div>
</header>
<section class="analysis" style="padding-top: 342px;">
<header class="tool-bar" id="tool-bar" style="position: fixed;top:89px;">
<form method="get" id="form-sales">
<a class="download-excel" id="line-download-excel" data-url="<%=path%>/product/modelConfigContrastExport.do"></a>
<span><h1>车型配置对比</h1></span>
<span style="margin-left: 50px">显示设置</span>
<div class="btn-group" store="displaySetting" required id="displaySetting" >
<a class="b
4000
tn dropdown-toggle"></a>
<ul class="dropdown-menu">
<li data-value="0"><a>显示所有配置</a></li>
<li data-value="1" class="selected"><a>隐藏相同配置</a></li>
<li data-value="2"><a>仅显示优势配置</a></li>
<li data-value="3"><a>仅显示劣势配置</a></li>
</ul>
<input type="hidden" name="displaySetting"/>
<input type="hidden" name="url" id="url" value=<%=path%>/>
</div>
</form>
</header>
<div id="compareTableWrapper" style="position: fixed;top: 130px; overflow: hidden;margin-top: -1px;">
<table id="compareTable">
<tr>
<!-- 第一列 -->
<td class="title" id="topName"><div class="gridWidth" style="width: 200px" > </div><center><%=topName%></center>
<input type="hidden" name="topId" id="topId" value=<%=topId%>></td>
<!-- 第二列 -->
<td class="title tc" id="col1"><div class="gridWidth" style="width: 200px";></div><div class="isAvailable" style="width: 200px;height: 80px;position: absolute;z-index:-999" ></div>
<center class="hide" onmouseover="showSelect('top1');"></center>
<div class="btn-group dropdown-group mr20" dialogid="top-1" required id="top1" data-url="<%=path%>/product/versionData.do?modelId=<%=topId%>" >
<a class="btn dropdown-toggle" onmouseout="showText('top1');">选择型号</a>
<input type="hidden" name="version" id="versionId"/>
</div>
<div class="delete" style="padding-left:187px;margin-top:-34px;position:absolute"><a style="display: none" onclick="deleteModelCongfig(1)" >×</a></div>
</td>
<!-- 第三列 -->
<td class="title tc" id="col2"><div class="gridWidth" style="width: 200px";></div><div class="isAvailable" style="width: 200px;height: 80px;position: absolute;z-index:-999" ></div>
<center class="hide" onmouseover="showSelect('top2');"></center>
<div class="btn-group dropdown-group mr20" dialogid="top-2" required id="top2" data-url="${ctx}/product/versionData.do?modelId=<%=topId%>" >
<a class="btn dropdown-toggle" onmouseout="showText('top2');">选择型号</a>
<input type="hidden" name="version" id="versionId"/>
</div>
<div class="delete" style="padding-left:187px;margin-top:-34px;position:absolute"><a style="display: none" onclick="deleteModelCongfig(2)" >×</a></div>
</td>
<!-- 第四列 -->
<td class="title tc" id="col3"><div class="gridWidth" style="width: 200px";></div><div class="isAvailable" style="width: 200px;height: 80px;position: absolute;z-index:-999" ></div>
<center class="hide" onmouseover="showSelect('top3');"></center>
<div class="btn-group dropdown-group mr20" dialogid="top-3" required id="top3" data-url="${ctx}/product/versionData.do?modelId=<%=topId%>" >
<a class="btn dropdown-toggle" onmouseout="showText('top3');">选择型号</a>
<input type="hidden" name="version" id="versionId"/>
</div>
<div class="delete" style="padding-left:187px;margin-top:-34px;position:absolute"><a style="display: none" onclick="deleteModelCongfig(3)" >×</a></div>
</td>
<!-- 第五列 -->
<td class="title tc" id="col4"><div class="gridWidth" style="width: 200px";></div><div class="isAvailable" style="width: 200px;height: 80px;position: absolute;z-index:-999" ></div>
<center class="hide" onmouseover="showSelect('top4');"></center>
<div class="btn-group dropdown-group mr20" dialogid="top-4" required id="top4" data-url="${ctx}/product/versionData.do?modelId=<%=topId%>" >
<a class="btn dropdown-toggle" onmouseout="showText('top4');">选择型号</a>
<input type="hidden" name="version" id="versionId"/>
</div>
<div class="delete" style="padding-left:187px;margin-top:-34px;position:absolute"><a style="display: none" onclick="deleteModelCongfig(4)" >×</a></div>
</td>
<!-- 第六列 -->
<td class="title tc" id="col5"><div class="gridWidth" style="width: 200px";></div><div class="isAvailable" style="width: 200px;height: 80px;position: absolute;z-index:-999" ></div>
<center class="hide" onmouseover="showSelect('top5');"></center>
<div class="btn-group dropdown-group mr20" dialogid="top-5" required id="top5" data-url="${ctx}/product/versionData.do?modelId=<%=topId%>" >
<a class="btn dropdown-toggle" onmouseout="showText('top5');">选择型号</a>
<input type="hidden" name="version" id="versionId"/>
</div>
<div class="delete" style="padding-left:187px;margin-top:-34px;position:absolute"><a style="display: none" onclick="deleteModelCongfig(5)" >×</a></div>
</td>
<!-- 第七列 -->
<td class="title tc" id="col6"><div class="gridWidth" style="width: 200px";></div><div class="isAvailable" style="width: 200px;height: 80px;position: absolute;z-index:-999" ></div>
<center class="hide" onmouseover="showSelect('top6');"></center>
<div class="btn-group dropdown-group mr20" dialogid="top-6" required id="top6" data-url="${ctx}/product/versionData.do?modelId=<%=topId%>" >
<a class="btn dropdown-toggle" style="z-index:9999" onmouseout="showText('top6');">选择型号</a>
<input type="hidden" name="version" id="versionId"/>
</div>
<div class="delete" style="padding-left:187px;margin-top:-34px;position:absolute"><a style="display: none" onclick="deleteModelCongfig(6)" >×</a></div>
</td>
</tr>
<tr>
<td class="msrp"><center>MSRP</center></td>
<td class="msrp-value" id="top1-price"></td>
<td class="msrp-value" id="top2-price"></td>
<td class="msrp-value" id="top3-price"></td>
<td class="msrp-value" id="top4-price"></td>
<td class="msrp-value" id="top5-price"></td>
<td class="msrp-value" id="top6-price"></td>
</tr>
<tr height="50px" style="background-color: white;">
<td ></td>
<td id="col1" ><center><font size="7px" color="#E4E4E4">⇩</font></center></td>
<td id="col2" ><center><font size="7px" color="#E4E4E4">⇩</font></center></td>
<td id="col3" ><center><font size="7px" color="#E4E4E4">⇩</font></center></td>
<td id="col4" ><center><font size="7px" color="#E4E4E4">⇩</font></center></td>
<td id="col5" ><center><font size="7px" color="#E4E4E4">⇩</font></center></td>
<td id="col6" ><center><font size="7px" color="#E4E4E4">⇩</font></center></td>
</tr>
<tr>
<!-- 第一列 -->
<td class="title" id="bottomName"><center><%=bottomName%></center>
<input type="hidden" name="bottomId" id="bottomId" value=<%=bottomId%>>
</td>
<!-- 第二列 -->
<td class="title tc" id="col1"><div class="isAvailable" style="width: 200px;height: 80px;position: absolute;z-index:-999" ></div>
<center class="hide" onmouseover="showSelect('bottom1');"></center>
<div class="btn-group dropdown-group mr20" dialogid="bottom-1" required id="bottom1" data-url="${ctx}/product/versionData.do?modelId=<%=bottomId%>" >
<a class="btn dropdown-toggle" onmouseout="showText('bottom1');">选择型号</a>
<input type="hidden" name="version" id="versionId"/>
</div>
</td>
<!-- 第三列 -->
<td class="title tc" id="col2"><div class="isAvailable" style="width: 200px;height: 80px;position: absolute;z-index:-999" ></div>
<center class="hide" onmouseover="showSelect('bottom2');"></center>
<div class="btn-group dropdown-group mr20" dialogid="bottom-2" required id="bottom2" data-url="${ctx}/product/versionData.do?modelId=<%=bottomId%>" >
<a class="btn dropdown-toggle" onmouseout="showText('bottom2');">选择型号</a>
<input type="hidden" name="version" id="versionId"/>
</div>
</td>
<!-- 第四列 -->
<td class="title tc" id="col3"><div class="isAvailable" style="width: 200px;height: 80px;position: absolute;z-index:-999" ></div>
<center class="hide" onmouseover="showSelect('bottom3');"></center>
<div class="btn-group dropdown-group mr20" dialogid="bottom-3" required id="bottom3" data-url="${ctx}/product/versionData.do?modelId=<%=bottomId%>" >
<a class="btn dropdown-toggle" onmouseout="showText('bottom3');">选择型号</a>
<input type="hidden" name="version" id="versionId"/>
</div>
</td>
<!-- 第五列 -->
<td class="title tc" id="col4"><div class="isAvailable" style="width: 200px;height: 80px;position: absolute;z-index:-999" ></div>
<center class="hide" onmouseover="showSelect('bottom4');"></center>
<div class="btn-group dropdown-group mr20" dialogid="bottom-4" required id="bottom4" data-url="${ctx}/product/versionData.do?modelId=<%=bottomId%>" >
<a class="btn dropdown-toggle" onmouseout="showText('bottom4');">选择型号</a>
<input type="hidden" name="version" id="versionId"/>
</div>
</td>
<!-- 第六列 -->
<td class="title tc" id="col5"><div class="isAvailable" style="width: 200px;height: 80px;position: absolute;z-index:-999" ></div>
<center class="hide" onmouseover="showSelect('bottom5');"></center>
<div class="btn-group dropdown-group mr20" dialogid="bottom-5" required id="bottom5" data-url="${ctx}/product/versionData.do?modelId=<%=bottomId%>" >
<a class="btn dropdown-toggle" onmouseout="showText('bottom5');">选择型号</a>
<input type="hidden" name="version" id="versionId"/>
</div>
</td>
<!-- 第七列 -->
<td class="title tc" id="col6"><div class="isAvailable" style="width: 200px;height: 80px;position: absolute;z-index:-999" ></div>
<center class="hide" onmouseover="showSelect('bottom6');"></center>
<div class="btn-group dropdown-group mr20" dialogid="bottom-6" required id="bottom6" data-url="${ctx}/product/versionData.do?modelId=<%=bottomId%>" >
<a class="btn dropdown-toggle" onmouseout="showText('bottom6');">选择型号</a>
<input type="hidden" name="version" id="versionId"/>
</div>
</td>
</tr>
<tr>
<td class="msrp"><center>MSRP</center></td>
<td class="msrp-value" id="bottom1-price"></td>
<td class="msrp-value" id="bottom2-price"></td>
<td class="msrp-value" id="bottom3-price"></td>
<td class="msrp-value" id="bottom4-price"></td>
<td class="msrp-value" id="bottom5-price"></td>
<td class="msrp-value" id="bottom6-price"></td>
</tr>
<tr height="30px" style="background-color: white;">
<td id="col1"><center></center></td>
<td id="col2"><center></center></td>
<td id="col3"><center></center></td>
<td id="col4"><center></center></td>
<td id="col5"><center></center></td>
<td id="col6"><center></center></td>
<td id="col7"><center></center></td>
</tr>
<tr height="30px">
<td class="msrp"><center>价格差异</center></td>
<td class="msrp-value" id="price-differ1"><center></center></td>
<td class="msrp-value" id="price-differ2"><center></center></td>
<td class="msrp-value" id="price-differ3"><center></center></td>
<td class="msrp-value" id="price-differ4"><center></center></td>
<td class="msrp-value" id="price-differ5"><center></center></td>
<td class="msrp-value" id="price-differ6"><center></center></td>
</tr>
<tr height="30px" style="background-color: white;">
<td id="col1"><center></center></td>
<td id="col2"><center></center></td>
<td id="col3"><center></center></td>
<td id="col4"><center></center></td>
<td id="col5"><center></center></td>
<td id="col6"><center></c
128fa
enter></td>
<td id="col7"><center></center></td>
</tr>
</table>
</div>
<table id="config" >
<tr id="Advantage"><td class="Advantage"><div class="gridWidth" style="width: 200px" ></div><center>优势配置</center></td>
<td class="Advantage-value" id="Advantage-value1"><div class="gridWidth" style="width: 200px" > </div></td>
<td class="Advantage-value" id="Advantage-value2"><div class="gridWidth" style="width: 200px" > </div></td>
<td class="Advantage-value" id="Advantage-value3"><div class="gridWidth" style="width: 200px" > </div></td>
<td class="Advantage-value" id="Advantage-value4"><div class="gridWidth" style="width: 200px" > </div></td>
<td class="Advantage-value" id="Advantage-value5"><div class="gridWidth" style="width: 200px" > </div></td>
<td class="Advantage-value" id="Advantage-value6"><div class="gridWidth" style="width: 200px" > </div></td>
</tr>
<tr id="Advantage-blank" height="15px">
</tr>
<tr id="Inferiority">
<td class="Inferiority"><center>劣势配置</center></td>
<td class="Inferiority-value" id="Inferiority-value1"></td>
<td class="Inferiority-value" id="Inferiority-value2"></td>
<td class="Inferiority-value" id="Inferiority-value3"></td>
<td class="Inferiority-value" id="Inferiority-value4"></td>
<td class="Inferiority-value" id="Inferiority-value5"></td>
<td class="Inferiority-value" id="Inferiority-value6"></td>
</tr>
<tr id="Inferiority-blank" height="15px"></tr>
<tr id="Same" style="display: none" ><td class="Same"><center>相同配置</center></td>
<td class="Same-value" id="Same-value1"></td>
<td class="Same-value" id="Same-value2"></td>
<td class="Same-value" id="Same-value3"></td>
<td class="Same-value" id="Same-value4"></td>
<td class="Same-value" id="Same-value5"></td>
<td class="Same-value" id="Same-value6"></td>
</tr>
</table>
</section>
</section>
<a class="back-top">返回顶部</a>
</section>
<footer class="page-footer"> © 2013 -2015,技术支持 广州威尔森企业管理咨询有限公司<a href="http://www.miibeian.gov.cn" target="_blank">粤ICP备09206296号</a></footer>
</section>
<script src="<%=path%>/assets/javascripts/seajs/2.1.1/sea.js" id="seajsnode"></script>
<script src="<%=path%>/assets/javascripts/seajs/sea-config.js"></script>
<script>
seajs.use(["appc/product/product","appc/product/popbox"], function(product,popbox) {
//默认给6列
var tdNum=6;
$(function() {
//显示设置
$("#displaySetting").change(function(event, value) {
//显示所有配置
if(value==0){
$("#Advantage").css("display","block");
$("#Advantage-blank").css("display","block");
$("#Inferiority").css("display","block");
$("#Inferiority-blank").css("display","block");
$("#Same").css("display","block");
}else
//隐藏相同配置
if(value==1){
$("#Advantage").css("display","block");
$("#Advantage-blank").css("display","block");
$("#Inferiority").css("display","block");
$("#Inferiority-blank").css("display","block");
$("#Same").css("display","none");
}else
//仅显示优势配置
if(value==2){
$("#Advantage").css("display","block");
$("#Advantage-blank").css("display","block");
$("#Inferiority").css("display","none");
$("#Inferiority-blank").css("display","none");
$("#Same").css("display","none");
}
else
//仅显示劣势配置
if(value==3){
$("#Advantage").css("display","none");
$("#Advantage-blank").css("display","none");
$("#Inferiority").css("display","block");
$("#Inferiority-blank").css("display","block");
$("#Same").css("display","none");
}
$("#tool-bar").css("z-index","0");
});
$(window).scroll(function() {
//alert(1);
$("#compareTableWrapper").scrollLeft($(this).scrollLeft());
});
//隐藏loading
window.page_loading.hide();
changeToolWidth();
});
$(function() {
$("#compareTable").on("click", ".btn-group", function() {
var frameName=$(this).attr("id");
//alert(frameName);
$("#"+frameName).prev(".hide").text("");
popbox.selectVersionBySalesStatus({target: this, onsubmit: function(value) {
if(value==null){
return false;
}
var tempNum="";
var url="";
var flag=false;//记录 一列 两个 型号是否都已经选中
var isbase =""; //判断 是否基准型号
var isfull=false; //记录 型号选择框是否全部选中
var array = new Array(); //装载型号选择框全部
//alert();
//alert(value);
//alert(frameName);
//判断属于上还是下的型号框
if(frameName.indexOf("top")!="-1"){
//判断上和下框是否全部选中
tempNum =frameName.split("top")[1];
if($("#bottom"+tempNum).attr("value")=="undefined" || $("#bottom"+tempNum).attr("value")==null){
//未选中就只查价格
url=$("#url").val()+"product/modelMSRP.do";
}else{
//选中查配置和价格
flag=true;
value=value+","+$("#bottom"+tempNum).attr("value");
url=$("#url").val()+"product/modelConfig.do";
}
isbase=false;
}else{
//未选中就只查价格
tempNum =frameName.split("bottom")[1];
if($("#top"+tempNum).attr("value")=="undefined" || $("#top"+tempNum).attr("value")==null){
url=$("#url").val()+"product/modelMSRP.do";
}else{
//选中查配置和价格
flag=true;
value=value+","+$("#top"+tempNum).attr("value");
url=$("#url").val()+"product/modelConfig.do";
}
isbase=true;
}
$.ajax({
type: "GET",
url: url,
data: {modelId:value,isBase:isbase},
dataType: "json",
success: function(data){
console.log(JSON.stringify(data));
//填写配置项与价格差
if(flag==true){
//填价格
$("#"+frameName+"-price").text(format(parseInt(data.msrp)));
if(frameName.indexOf("top")!="-1"){
//负数为红色 ，正数为绿色
if(parseInt(data.msrp)-parseInt($("#bottom"+tempNum+"-price").text().replace(/,/gi,''))<0){
$("#price-differ"+tempNum).css("color","#CD5C5D");
}else{
$("#price-differ"+tempNum).css("color","#7CC41F");
}
//价格差价
$("#price-differ"+tempNum).text(format(parseInt(data.msrp)-parseInt($("#bottom"+tempNum+"-price").text().replace(/,/gi,''))));
}else{
//负数为红色 ，正数为绿色
if(parseInt($("#top"+tempNum+"-price").text().replace(/,/gi,''))-parseInt(data.msrp)<0){
$("#price-differ"+tempNum).css("color","#CD5C5D");
}else{
$("#price-differ"+tempNum).css("color","#7CC41F");
}
//价格差价
$("#price-differ"+tempNum).text(format(parseInt($("#top"+tempNum+"-price").text().replace(/,/gi,''))-parseInt(data.msrp)));
}
//填写配置
//如果之前已经查过 清空之前配置项
$("#"+frameName).attr("value",data.id);
if($("#Advantage-value"+tempNum+" p").length>0){
$("#Advantage-value"+tempNum).empty();
if($("#btn-zoom-main").attr("class").indexOf("close")==-1){
$("#Advantage-value"+tempNum).append("<div class='gridWidth' style='width: 200px'></div>");
}else{
$("#Advantage-value"+tempNum).append("<div class='gridWidth' style='width: 223px'></div>");
}
}
if($("#Inferiority-value"+tempNum+" p").length>0){
$("#Inferiority-value"+tempNum).empty();
if($("#btn-zoom-main").attr("class").indexOf("close")==-1){
$("#Inferiority-value"+tempNum).append("<div class='gridWidth' style='width: 200px'></div>");
}else{
$("#Inferiority-value"+tempNum).append("<div class='gridWidth' style='width: 223px'></div>");
}
}
if($("#Same-value"+tempNum+" p").length>0){
$("#Same-value"+tempNum).empty();
if($("#btn-zoom-main").attr("class").indexOf("close")==-1){
$("#Same-value"+tempNum).append("<div class='gridWidth' style='width: 200px'></div>");
}else{
$("#Same-value"+tempNum).append("<div class='gridWidth' style='width: 223px'></div>");
}
}
//填写优势配置
for(var i =0;i<data.Advantage.length;i++){
$("#Advantage-value"+tempNum).append("<P>"+data.Advantage[i]+"</P>");
}
//填写劣势配置
for(var i =0;i<data.Inferiority.length;i++){
$("#Inferiority-value"+tempNum).append("<P>"+data.Inferiority[i]+"</P>");
}
//填写相同配置
for(var i =0;i<data.Same.length;i++){
$("#Same-value"+tempNum).append("<P>"+data.Same[i]+"</P>");
}
}else{
//填写价格
$("#"+frameName+"-price").text(format(parseInt(data.msrp)));
$("#"+frameName).attr("value",data.id);
}
//判断 每列的价格是否都有值 全部都有值即满列 增加一列
$(".msrp-value").each(function(i){
if($(this).text()!=""){
array.push(1);
}else{
array.push(0);
}
});
for(var i =0;i<array.length;i++){
if(array[i]==1){
isfull=true;
}else{
isfull=false;
break;
}
}
var col=$("#compareTable tr td").length/8-1;
//全部都有值即满列 增加一列
if(isfull && col<20){
tdNum++;
var topId = $("#topId").val();
var bottomId = $("#bottomId").val();
if($("#btn-zoom-main").attr("class").indexOf("close")==-1){
$("#compareTable tr").eq(0).append("<td class='title tc' id='col"+tdNum+"'><div class='gridWidth' style='width: 200px';></div><div class='isAvailable' style='width: 200px;height: 80px;position: absolute;z-index:-999'></div><center class='hide' onmouseover='showSelect('top"+tdNum+"');'></center></div><div class='btn-group dropdown-group mr20' dialogid='top-"+tdNum+"' required id='top"+tdNum+"' data-url='<%=path%>/product/versionData.do?modelId="+topId+"'><a class='btn dropdown-toggle' onmouseout='showText('top"+tdNum+"');'>选择型号</a><input type='hidden' name='version' id='versionId'/></div><div class='delete' style='padding-left:187px;margin-top:-34px;position:absolute'><a style='display: none' onclick='deleteModelCongfig("+tdNum+")' >×</a></div></td>");
$("#compareTable tr").eq(3).append("<td class='title tc' id='col"+tdNum+"'><div class='isAvailable' style='width:200px;height:80px;position:absolute;z-index:-999'></div><center class='hide' onmouseover='showSelect('bottom"+tdNum+"');'></center><div class='btn-group dropdown-group mr20' dialogid='bottom-"+tdNum+"' required id='bottom"+tdNum+"' data-url='<%=path%>/product/versionData.do?modelId="+bottomId+"'><a class='btn dropdown-toggle' onmouseout='showText('bottom"+tdNum+"');'>选择型号</a><input type='hidden' name='version' id='versionId'/></div></td>");
$("#config tr").eq(0).append("<td class='Advantage-value' id='Advantage-value"+tdNum+"'><div class='gridWidth' style='width: 200px'></div></td>");
$("#config tr").eq(2).append("<td class='Inferiority-value' id='Inferiority-value"+tdNum+"'><div class='gridWidth' style='width: 200px'></div></td>");
$("#config tr").eq(4).append("<td class='Same-value' id='Same-value"+tdNum+"'><div class='gridWidth' style='width: 200px'></div></td>");
}else{
$("#compareTable tr").eq(0).append("<td class='title tc' id='col"+tdNum+"'><div class='gridWidth' style='width: 223px';></div><div class='isAvailable' style='width: 223px;height: 80px;position: absolute;z-index:-999'></div><center class='hide' onmouseover='showSelect('top"+tdNum+"');'></center></div><div class='btn-group dropdown-group mr20' dialogid='top-"+tdNum+"' required id='top"+tdNum+"' data-url='<%=path%>/product/versionData.do?modelId="+topId+"'><a class='btn dropdown-toggle' onmouseout='showText('top"+tdNum+"');'>选择型号</a><input type='hidden' name='version' id='versionId'/></div><div class='delete' style='padding-left:187px;margin-top:-34px;position:absolute'><a style='display: none' onclick='deleteModelCongfig("+tdNum+")' >×</a></div></td>");
$("#compareTable tr").eq(3).append("<td class='title tc' id='col"+tdNum+"'><div class='isAvailable' style='width:223px;height:80px;position:absolute;z-index:-999'></div><center class='hide' onmouseover='showSelect('bottom"+tdNum+"');'></center><div class='btn-group dropdown-group mr20' dialogid='bottom-"+tdNum+"' required id='bottom"+tdNum+"' data-url='<%=path%>/product/versionData.do?modelId="+bottomId+"'><a class='btn dropdown-toggle' onmouseout='showText('bottom"+tdNum+"');'>选择型号</a><input type='hidden' name='version' id='versionId'/></div></td>");
$("#config tr").eq(0).append("<td class='Advantage-value' id='Advantage-value"+tdNum+"'><div class='gridWidth' style='width: 223px'></div></td>");
$("#config tr").eq(2).append("<td class='Inferiority-value' id='Inferiority-value"+tdNum+"'><div class='gridWidth' style='width: 223px'></div></td>");
$("#config tr").eq(4).append("<td class='Same-value' id='Same-value"+tdNum+"'><div class='gridWidth' style='width: 223px'></div></td>");
}
// $("#compareTable tr").eq(0).append("<td class='title tc' id='col"+tdNum+"'><div class='gridWidth' style='width: 200px';></div><div class='isAvailable' style='width: 200px;height: 80px;position: absolute;z-index:-999'></div><center class='hide' onmouseover='showSelect('top"+tdNum+"');'></center></div><div class='btn-group dropdown-group mr20' dialogid='top-"+tdNum+"' required id='top"+tdNum+"' data-url='<%=path%>/product/versionData.do?modelId="+topId+"'><a class='btn dropdown-toggle' onmouseout='showText('top"+tdNum+"');'>选择型号</a><input type='hidden' name='version' id='versionId'/></div><div class='delete' style='padding-left:187px;margin-top:-34px;position:absolute'><a style='display: none' onclick='deleteModelCongfig("+tdNum+")' >×</a></div></td>");
// $("#compareTable tr").eq(3).append("<td class='title tc' id='col"+tdNum+"'><div class='isAvailable' style='width:200px;height:80px;position:absolute;z-index:-999'></div><center class='hide' onmouseover='showSelect('bottom"+tdNum+"');'></center><div class='btn-group dropdown-group mr20' dialogid='bottom-"+tdNum+"' required id='bottom"+tdNum+"' data-url='<%=path%>/product/versionData.do?modelId="+bottomId+"'><a class='btn dropdown-toggle' onmouseout='showText('bottom"+tdNum+"');'>选择型号</a><input type='hidden' name='version' id='versionId'/></div></td>");
// $("#config tr").eq(0).append("<td class='Advantage-value' id='Advantage-value"+tdNum+"'><div class='gridWidth' style='width: 200px'></div></td>");
// $("#config tr").eq(2).append("<td class='Inferiority-value' id='Inferiority-value"+tdNum+"'><div class='gridWidth' style='width: 200px'></div></td>");
// $("#config tr").eq(4).append("<td class='Same-value' id='Same-value"+tdNum+"'><div class='gridWidth' style='width: 200px'></div></td>");
$("#compareTable tr").eq(1).append("<td class='msrp-value' id='top"+tdNum+"-price'></td>");
$("#compareTable tr").eq(2).append("<td id='col"+tdNum+"' ><center><font size='7px' color='#E4E4E4'>⇩</font></center></td>");
$("#compareTable tr").eq(4).append("<td class='msrp-value' id='bottom"+tdNum+"-price'></td>");
$("#compareTable tr").eq(5).append("<td id='col"+tdNum+"' ></td>");
$("#compareTable tr").eq(6).append("<td class='msrp-value' id='price-differ"+tdNum+"'><center></center></td>");
$("#compareTable tr").eq(7).append("<td id='col"+tdNum+"' ></td>");
col=$("#compareTable tr td").length/8-1;
//$("#tool-bar").width(-30);
if(col>6){
var colTemp=col-6;
// var tool-bar1=$(".tool-bar").css("width");
// var tool-bar2=$("#tool-bar").css("width").sqlit("px")[0];
// $("#compareTableWrapper").width($(".page-footer").width()+colTemp*200-200);
// $(".page-footer").width($(".page-footer").width()+colTemp*200);
$("#compareTableWrapper").width($("#tool-bar").width()-7);
//$("#main").width($("#main").width()+colTemp*200) ;
}
}
}
});
$("#"+frameName).children(".dropdown-toggle").text($("#"+frameName).children("input").attr("text"));
$("#"+frameName).css("display","none");
$("#"+frameName).prev(".hide").css("display","block")
$("#"+frameName).prev(".hide").text($("#"+frameName).children("input").attr("text"));
$("#"+frameName).next(".delete").css("margin-top","-30px");
}});
});
});
//转千分位
function format (num) {
return (num.toFixed(0) + '').replace(/\d{1,3}(?=(\d{3})+(\.\d*)?$)/g, '$&,');
}
//去除千分位
function delcommafy(num){
return num.replace(/,/gi,'');
}
$("#btn-zoom-main").click(function(){
var col=$("#compareTable tr td").length/8-1;
if($("#btn-zoom-main").attr("class").indexOf("close")==-1){
$("#tool-bar").width($("#main").width()+123);
$("#compareTableWrapper").width($("#main").width()+124+(col-6)*223);
$(".gridWidth").each(function(){
$(this).width(223);
})
$("#compareTableWrapper").width($("#tool-bar").width()+20);
}else{
$("#tool-bar").width($("#main").width()-180);
$("#compareTableWrapper").width($("#main").width()-160+(col-6)*200);
$(".gridWidth").each(function(){
$(this).width(200);
})
$("#compareTableWrapper").width($("#tool-bar").width()+20);
}
});
$("#displaySetting").click(function(){
$("#tool-bar").css("z-index","999");
});
$models = $("#models");
$models.find("a").click(function(){
var col=$("#compareTable tr td").length/6-1;
var param ="";
var index=0;
var topRow="";
var bottomRow="";
$("#models").find(".active").each(function(){
index++;
});
$btn = $(this);
// 最大选择数
upperLimit = $("#models").data("upperLimit") || 0
if (upperLimit && !$btn.hasClass("active") && upperLimit <= $models.find(".toggle.active").length) {
product.msgbox.alert("最多可选"+upperLimit+"个")
return false
}
//alert($(this).attr("data-value"));
var modelId=$(this).attr("data-value");
if($(this).attr("class").indexOf("active")== -1){
if($("#topName").text().trim()==""){
if($("#btn-zoom-main").attr("class").indexOf("close")==-1){
$("#topName").append("<div class='gridWidth' style='width: 200px'></div>"+$(this).text()+"<input type='hidden' id='topId' name='topId' value="+modelId+">");
}else{
$("#topName").append("<div class='gridWidth' style='width: 223px'></div>"+$(this).text()+"<input type='hidden' id='topId' name='topId' value="+modelId+">");
}
topRow=$("#compareTable tr").eq(0);
topRow.children("td").each(function(index){
if(index!=0){
param =$(this).find(".btn-group").attr("id").split("top")[1];
$(this).find(".isAvailable").css("z-index","-999");
$("#top"+param).attr("data-url",$("#url").val()+"product/versionData.do?modelId="+modelId);
}
});
}else
if($("#bottomName").text().trim()==""){
$("#bottomName").append($(this).text()+"<input type='hidden' id='bottomId' name='bottomId' value="+modelId+">");
bottomRow=$("#compareTable tr").eq(3);
bottomRow.children("td").each(function(index){
if(index!=0){
param =$(this).find(".btn-group").attr("id").split("bottom")[1];
$(this).find(".isAvailable").css("z-index","-999");
$("#bottom"+param).attr("data-url",$("#url").val()+"product/versionData.do?modelId="+modelId);
}
});
}
}else{
if(index==1){
return false
};
if($("#topName").text().trim()==$(this).text()){
topRow=$("#compareTable tr").eq(0);
topRow.children("td").each(function(index){
if(index==0){
$(this).text("");
}else{
param =$(this).find(".btn-group").attr("id").split("top")[1];
$(this).find(".isAvailable").css("z-index","999");
$("#top"+param+"-price").empty();
$("#top"+param).attr("value",null);
$("#top"+param).css("display","block");
$("#top"+param).prev(".hide").css("display","none");
$("#top"+param).prev(".hide").text("");
$("#top"+param+" a").text("选择型号");
$("#top"+param+" input").val(null);
$("#top"+param+" input").attr("text",null);
$("#price-differ"+param).empty();
$("#Advantage-value"+param).empty();
$("#Inferiority-value"+param).empty();
$("#Same-value"+param).empty();
if($("#btn-zoom-main").attr("class").indexOf("close")==-1){
$("#Advantage-value"+param).append("<div class='gridWidth' style='width: 200px'></div>");
$("#Inferiority-value"+param).append("<div class='gridWidth' style='width: 200px'></div>");
$("#Same-value"+param).append("<div class='gridWidth' style='width: 200px'></div>");
}else{
$("#Advantage-value"+param).append("<div class='gridWidth' style='width: 223px'></div>");
$("#Inferiority-value"+param).append("<div class='gridWidth' style='width: 223px'></div>");
$("#Same-value"+param).append("<div class='gridWidth' style='width: 223px'></div>");
}
}
});
}else
if($("#bottomName").text().trim()==$(this).text()){
bottomRow=$("#compareTable tr").eq(3);
bottomRow.children("td").each(function(index){
if(index==0){
$(this).text("");
}else{
param =$(this).find(".btn-group").attr("id").split("bottom")[1];
$(this).find(".isAvailable").css("z-index","999");
$("#bottom"+param+"-price").empty();
$("#bottom"+param).attr("value",null);
$("#bottom"+param).css("display","block");
$("#bottom"+param).prev(".hide").css("display","none");
$("#bottom"+param).prev(".hide").text("");
$("#bottom"+param+" a").text("选择型号");
$("#bottom"+param+" input").val(null);
$("#bottom"+param+" input").attr("text",null);
$("#price-differ"+param).empty();
$("#Advantage-value"+param).empty();
$("#Inferiority-value"+param).empty();
$("#Same-value"+param).empty();
if($("#btn-zoom-main").attr("class").indexOf("close")==-1){
$("#Advantage-value"+param).append("<div class='gridWidth' style='width: 200px'></div>");
$("#Inferiority-value"+param).append("<div class='gridWidth' style='width: 200px'></div>");
$("#Same-value"+param).append("<div class='gridWidth' style='width: 200px'></div>");
}else{
$("#Advantage-value"+param).append("<div class='gridWidth' style='width: 223px'></div>");
$("#Inferiority-value"+param).append("<div class='gridWidth' style='width: 223px'></div>");
$("#Same-value"+param).append("<div class='gridWidth' style='width: 223px'></div>");
}
}
});
}
}
});
$("#line-download-excel").click(function(){
//export
var AdvantageCount =0;
var InferiorityCount=0;
var SameCount =0;
var versionIdArray = new Array();
var showConfig="";
var topName="";
var bottomName="";
//导出excel
$("#compareTable tr").eq(0).children("td").each(function(index){
if(index!=0){
param =$(this).find(".btn-group").attr("id").split("top")[1];
if($("#top"+param).attr("value")!=null && $("#bottom"+param).attr("value")!=null){
versionIdArray.push($("#top"+param).attr("value")+"-"+$("#bottom"+param).attr("value"));
}
}
});
//得到优势配置项最多的条数
$("#Advantage td").each(function(i){
if(i!=0){
if($(this).find("p").length>AdvantageCount){
AdvantageCount=$(this).find("p").length;
}
}
});
//得到劣势配置项最多的条数
$("#Inferiority td").each(function(i){
if(i!=0){
if($(this).find("p").length>InferiorityCount){
InferiorityCount=$(this).find("p").length;
}
}
});
//得到相同配置项最多的条数
$("#Same td").each(function(i){
if(i!=0){
if($(this).find("p").length>SameCount){
SameCount=$(this).find("p").length;
}
}
});
showConfig=$("input[name='displaySetting']").val();
topName=$("#topName").text();
bottomName=$("#bottomName").text();
if(AdvantageCount==0 && InferiorityCount==0 && SameCount==0 ){
alert("请先选择型号");
return false;
}
var argsarr = [];
argsarr.push("AdvantageCount=" + AdvantageCount);
argsarr.push("InferiorityCount=" + InferiorityCount);
argsarr.push("SameCount=" + SameCount);
argsarr.push("versionIdArray=" + versionIdArray);
argsarr.push("showConfig=" + showConfig);
argsarr.push("topName=" + encodeURI(topName));
argsarr.push("bottomName=" + encodeURI(bottomName));
$.ajaxPost($(this).data("url"), argsarr.join("&"));
});
});
//删除列数方法
function deleteModelCongfig(param){
var col=$("#compareTable tr td").length/6-1;
//大于6列直接删除列
if(col>6){
$("#col"+param).remove();
$("#col"+param).remove();
$("#col"+param).remove();
$("#col"+param).remove();
$("#col"+param).remove();
$("#top"+param+"-price").remove();
$("#bottom"+param+"-price").remove();
$("#price-differ"+param).remove();
$("#Advantage-value"+param).remove();
$("#Inferiority-value"+param).remove();
$("#Same-value"+param).remove();
}else
if(col<=6) {
//少于等于6列清空 该列
$("#top"+param+"-price").empty();
$("#top"+param).attr("value",null);
$("#top"+param).css("display","block");
$("#top"+param).prev(".hide").css("display","none");
$("#top"+param).prev(".hide").text("");
$("#top"+param+" a").text("选择型号");
$("#top"+param+" input").val(null);
$("#top"+param+" input").attr("text",null);
$("#bottom"+param+"-price").empty();
$("#bottom"+param).attr("value",null);
$("#bottom"+param).css("display","block");
$("#bottom"+param).prev(".hide").css("display","none");
$("#bottom"+param).prev(".hide").text("");
$("#bottom"+param+" a").text("选择型号");
$("#bottom"+param+" input").val(null);
$("#bottom"+param+" input").attr("text",null);
$("#price-differ"+param).empty();
$("#Advantage-value"+param).empty();
$("#Inferiority-value"+param).empty();
$("#Same-value"+param).empty();
if($("#btn-zoom-main").attr("class").indexOf("close")==-1){
$("#Advantage-value"+param).append("<div class='gridWidth' style='width: 200px'></div>");
$("#Inferiority-value"+param).append("<div class='gridWidth' style='width: 200px'></div>");
$("#Same-value"+param).append("<div class='gridWidth' style='width: 200px'></div>");
}else{
$("#Advantage-value"+param).append("<div class='gridWidth' style='width: 223px'></div>");
$("#Inferiority-value"+param).append("<div class='gridWidth' style='width: 223px'></div>");
$("#Same-value"+param).append("<div class='gridWidth' style='width: 223px'></div>");
}
}
}
function showSelect(name){
$("#"+name).css("display","block");
$("#"+name).prev(".hide").css("display","none")
$("#"+name).next(".delete").css("margin-top","-34px");
$("#"+name).next(".delete").find("a").css("display","block");
}
function showText(name){
if($("#"+name).prev(".hide").text()!=""){
$("#"+name).css("display","none");
$("#"+name).prev(".hide").css("display","block")
$("#"+name).next(".delete").css("margin-top","-30px");
$("#"+name).next(".delete").find("a").css("display","none");
}
}
function objConvertStr(o){
if (o == undefined){
return "";
}
var r = [];
if (typeof o == "string") return "\"" + o.replace(/([\"\\])/g, "\\$1").replace(/(\n)/g, "\\n").replace(/(\r)/g, "\\r").replace(/(\t)/g, "\\t") + "\"";
if (typeof o == "object") {
if (!o.sort) {
for (var i in o)
r.push("\"" + i + "\":" + objConvertStr(o[i]));
if (!!document.all && !/^\n?function\s*toString\(\)\s*\{\n?\s*\[native code\]\n?\s*\}\n?\s*$/.test(o.toString)) {
r.push("toString:" + o.toString.toString());
}
r = "{" + r.join() + "}"
} else {
for (var i = 0; i < o.length; i++)
r.push(objConvertStr(o[i]))
r = "[" + r.join() + "]";
}
return r;
}
return o.toString().replace(/\"\:/g, '":""');
}
function changeToolWidth(){
$("#tool-bar").width($("#main").width()-30);
$("#compareTableWrapper").width($("#main").width()+1);
//$(".page-footer").width(1600);
}
function selectedModel(){
//弹出车型选择框
window.location = path + "/SelectModelController!main.do?urlPath=/product/modelConfigContrast.do";
}
</script>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- div滚动条属性及样式设置
- DIV+CSS 布局一行两列,左列固定宽度,右列自适应宽度;设置最小宽度,窗口小的时候显示滚动条.
- 设置div滚动条样式
- div+css滚动条属性及样式设置
- Div内有ul li元素，Div设置高度100%，谷歌IE下li过多会显示滚动条，而火狐下就会滚动条就不起作用，li会撑大Div
- Div内有ul li元素，Div设置高度100%，谷歌IE下li过多会显示滚动条，而火狐下就会滚动条就不起作用，li会撑大Div
- DIV+CSS 布局一行两列,左列固定宽度,右列自适应宽度;设置最小宽度,窗口小的时候显示滚动条.
- DIV+CSS 布局一行两列,左列固定宽度,右列自适应宽度;设置最小宽度,窗口小的时候显示滚动条.
- Div滚动条属性及样式设置
- DIV滚动条属性及样式设置方式
- CSS对div滚动条的样式设置
- div+css使用backgroundRepeat样式设置背景图片的显示方式
- DIV滚动条属性及样式设置方式
- 【前端】webkit内核浏览器DIV滚动条样式修改和设置
- 给div加滚动条 div显示滚动条设置代码
- div 滚动条属性及样式设置
- div设置滚动条内容任然显示不全
- 给div加滚动条 div显示滚动条设置代码
- div css 滚动条样式 DIV滚动条属性及样式设置方式
- 将<div><ul><li>中的数据设置为无编号，横向显示并且居中显示在下方的样式,以及在打开新的页面。