您的位置:首页 > Web前端 > JavaScript

js结合后台返回参数,动态控制各列数据展示

2016-05-17 17:06 706 查看
效果图:

08:00~21:30 这样的列是动态生成的,如果某一个时间段属于工作时间段,则合并,否则设置为默认“闲”。



//全局变量声明
varglobal_per=30;//每30分钟一个刻度
varglobal_start_time='08:00';
varglobal_end_time='21:30';


//初始化 设置时间刻度
varinitTime=function(start,end,per,getTitle){
start=DateUtils.getMinutesFromTime(DateUtils.string2Date("HH:mm",start));
end=DateUtils.getMinutesFromTime(DateUtils.string2Date("HH:mm",end));
vardata=[];
for(vark =start;k<=end;k=k+per)
{
data.push({
index:k,
size:1,//代表<td>个数
per:per,
title:typeofgetTitle=='function'?getTitle(k,per):'闲'
});
}
returndata;
};


<!-- 加载列表数据  结合接口进行数据填充-->
functionDatashow(){
vardataAll = newArray();//全局数据
varjsonDataStr = ${varList};//得到结果集
if(jsonDataStr){
<!-- 循环取第 i 条记录-->
for(vari = 0 ;i<jsonDataStr.length;i++){
varall=initTime(global_start_time,global_end_time,global_per);//初始化所有列
varjsonData = jsonDataStr[i];
varkey = jsonData.key;
varvalue = jsonData.value;
varpl= {
person:{
title:key
/*get name(){
return this.name.split();
}*/
},
datas:[]
}
if(value.indexOf("&&") > -1){
varstrs= newArray(); //定义一数组
strs=value.split("&&"); //字符分割针对特殊字符,需要转义,避免特殊字符采用&&
if(strs != ""){
//=== 对 数据拆分 =====
for(varj = 0 ;j<strs.length;j++){
varstr = strs[j];
if(str !=""){
varstr = strs[j].split(",");//字符分割
varorder_id = str[0];//订单id
varonstarttime = str[1];//开始时间
varonendtime = str[2];//结束时间
varonremark = str[3];//备注
varorder_id2 = str[4];//订单号
varstart=DateUtils.getMinutesFromTime(DateUtils.string2Date("HH:mm",onstarttime));
varend=DateUtils.getMinutesFromTime(DateUtils.string2Date("HH:mm",onendtime));
varsize=(end-start)/global_per;
varstartElementByAttrs= all.getElementByAttr({index:start});
varendElementByAttrs= all.getElementByAttr({index:end-global_per});
//属于分工区间  则计算其工时段
if(startElementByAttrs.length>0&&endElementByAttrs.length>0 && order_id !="-1")
{
all.splice(startElementByAttrs[0].index,endElementByAttrs[0].index-startElementByAttrs[0].index+1,{
index:start,
size:size,
per:global_per,
data:{
order_id:order_id,
order_status:onremark
},
title:order_id2+"—"+onremark
});
}
pl.datas  = all;
}
}
}
}
//将所有数据封装到 dataAll集合中
dataAll.push(pl);
}
}
returndataAll;
}




/**
*列表展示数据
*/
functionshowData(){
vardataS = Datashow();
varhtml = '';
if(dataS){
for(vari= 0 ;i<dataS.length;i++){
vardata = dataS[i];
vartitle = data.person.title;//
vartimeDates = data.datas;//时间段
html+='<tr><td class="center" style="width: 230px;">'+title+'</td>';
//一天中各个时间段
if(timeDates.length > 1){
for(varj=0 ;j<timeDates.length;j++){
varsize = 1 ;
varremark = "";
varorder_id = "-1";
vartime = timeDates[j];
size = time.size;
remark = time.title;
//根据订单id高亮显示背景
if(time.data){
order_id = time.data.order_id;
}
if("-1"!=order_id){
html+='<td bgcolor="#7fff00" class="center" colspan='+size+'>'+remark+'</td>';
}
else{
html+='<td class="center" style="table-layout:fixed;word-break:break-all;" colspan='+size+'>'+remark+'</td>';
}
}
}
html+="</tr>";
}
}
else{
html+='<tr class="main_info"><td colspan="100" class="center" >没有相关数据</td> </tr>';
}
$("#dataShow").html(html);
}
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: