二、产品索引效果不完整示例代码(这里仅以产品索引为例)
1、产品数组
var product_v=new Array();
var m=new Map();
m.put('isfw', false);
m.put('sortnum', '0');
m.put('normal', '0');
m.put('iswm', false);
m.put('jgms', '价格');
m.put('good', '0');
m.put('qy_id', 'stone');
m.put('id', '50');
m.put('iszm', false);
m.put('height', '480');
m.put('grade', '1');
m.put('iscz', false);
m.put('isls', true);
m.put('qymc', '中华奇石');
m.put('width', '640');
m.put('uptime', '2011-09-25 12:06:52.0');
m.put('label_id', '3307');
m.put('label', '鸭嘴兽');
m.put('unit', '件');
m.put('num', '1');
m.put('cplabel', '长江石');
m.put('filename', '1316923598012.jpg');
m.put('numprice', '0');
//...
product_v.push(m);
2、实现方法
function _loadCpsy(uid,list,pWidth){
var cols=6;
var rows=3;
var scaleWidth=parseInt(parseInt((pWidth-8)/cols)-12);
var scaleHeight=scaleWidth;
var html="";
var galleryUid=uid+"gallery";
var p=new pageObj({//分组对象
uid:uid,
list:list,
numPerPage:(cols*rows),
numPerOne:20,
f:function(){
html="";
if(p.pageList.length>0){
for(var a=0;a<p.pageList.length;a=a+cols){
html=html+"<ul style='clear:both;margin:0px;padding:0px;'>"
for(var b=a;b<a+cols;b++){
var m=null;
var x=p.pageList.length%cols;
if((a+x)<=p.pageList.length)m=p.pageList[b];
var id="";
var pic="";
var jg="面议";
var title="";
var height=40;
if(m!=null){
id=m.get("id");
if(m.get("price")!=null){
jg=m.get("price")+"元";
}
if(m.get("width")!=null){
var id=m.get("id");
var ss="<li style='width:"+(scaleWidth-10)+"px;font-size:12px;'>"+m.get("label")+"<br/> ¥:"+jg+" <span style='color:red;cursor:pointer;' οnclick=window.open('"+pvo.getRoot()+"/app/cpdetail.jsp?id="+m.get("id")+"')>详细</span> </li>";
ss="<ul style='margin:0px;padding:0px;'>"+ss+"</ul>";
pvo.scale=pvo.scaleWH(m.get("width"),m.get("height"),scaleWidth,scaleHeight);
var src=pvo.ROOTPATH+pvo.SUBPATH+"/"+m.get('qy_id')+"/upload/"+m.get("filename");
pic="<li style='margin:2px;padding:4px;float:left;width:"+(scaleWidth)+"px;height:"+(scaleHeight+height)+"px;background:#ffffff;'><div style='margin:auto;text-align:center;width:"+pvo.scale.width+"px;height:"+pvo.scale.height+"px;padding-top:"+parseInt((scaleHeight-pvo.scale.height)/2)+"px;padding-bottom:"+parseInt((scaleHeight-pvo.scale.height)/2)+"px;padding-left:"+parseInt((scaleWidth-pvo.scale.width)/2)+"px;padding-right:"+parseInt((scaleWidth-pvo.scale.width)/2)+"px;'><a href='"+src+"' title='"+title+"'><img src='"+src+"' style='border:0px;width:"+pvo.scale.width+"px;height:"+pvo.scale.height+"px;'/></a></div>"+ss+"</li>";
}
}
html=html+pic;
}
html=html+"</ul>";
}
}else{
html="<ul><li>暂无记录</li></ul>";
}
document.getElementById(p.bodyid).innerHTML="<div class='gallery' id='"+galleryUid+"'>"+html+"</div>";
$('#'+galleryUid+' a').lightBox();
}
});
p.showPage();
}
下一篇将介绍实现JavaScript数组分组