js结合后台返回参数,动态控制各列数据展示
2016-05-17 17:06
706 查看
效果图:
08:00~21:30 这样的列是动态生成的,如果某一个时间段属于工作时间段,则合并,否则设置为默认“闲”。
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); }
相关文章推荐
- javascript 图片解析Base64字符串
- JS——图片预览功能
- jstat查看内存
- [js实例] 验证身份证和姓名
- 图片加载完后执行js
- easyui-datagrid-JavaScript-导出Excel、合并单元格
- 利用JavaScript制作瀑布流
- 封装datatables
- Eclipse去除js(JavaScript)验证---红叉
- js 多少天以后的时间
- js创建数组的三个方式
- 浅谈Javascript数组(推荐)
- 如何查找JSP页面中的错误
- 根据key存不存在查询json
- javascript学习——继承
- JSON
- javascript css红色经典选项卡效果实现代码
- @ResponseBody返回jsonView对Hibernate延迟加载出现的问题
- JS获取IMG图片高宽的简单实例
- 简单的分页代码js实现