效果圖：

    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];
            var
 
key = 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);
}