1.页面结构
<table class="table table-striped table-bordered table-hover dataTable no-footer dt-responsive" id="data-table-actmReserve"> <thead> <tr role="row" class="heading"> <th class=""> 名称 </th> <th class=""> 最多容纳人数 </th> <th class="" id="place"> 位置 </th> <th class=""> 7点 </th> <th class=""> 8点 </th> <th class=""> 9点 </th> <th class=""> 10点 </th> <th class=""> 11点 </th> <th class=""> 12点 </th> <th class=""> 13点 </th> <th class=""> 14点 </th> <th class=""> 15点 </th> <th class=""> 16点 </th> <th class=""> 17点 </th> <th class=""> 18点 </th> <th class=""> 19点 </th> <th class=""> 20点 </th> <th class=""> 21点 </th> <th class=""> 22点 </th> <th width="10%" id="oper"> 操作 </th> </tr> </thead> <tbody> </tbody> </table>
2.js代码
var renderDiv = function (data, type, row, meta) { var col = meta.col; //列 var tMap = {}; for(var i = 0; i < row.list.length; i++){ var reserveType = row.list[i].reservetype; var oneTimeStart = row.list[i].starttime;//开始时间 var oneTimeEnd = row.list[i].endtime; //结束时间 var t1 = moment(oneTimeStart); var t2 = moment(oneTimeEnd); tMap[t1.hour() + "-" + t1.minute()] = reserveType; while(t1.add(30,'m').isBefore(t2)){ tMap[t1.hour() + "-" + t1.minute()] = reserveType; } } var h = col + 4; var type1 = tMap[h + "-0"]; var type2 = tMap[h + "-30"]; //如果type1存在,在当前cell画左半侧 //如果type2存在,在当前cell画右半侧 var leftArea = '', rightArea = ''; if(type1==='一次性预定'){ leftArea = '<span data-time = "' + h + ':00" class="pull-left one-time-half-left"></span>'; }else if(type1==='周期性预定'){ leftArea = '<span data-time = "' + h + ':00" class="pull-left cycle-half-left"></span>'; } if(type2==='一次性预定'){ rightArea = '<span data-time = "' + h + ':30" class="pull-right one-time-half-right"></span>'; }else if(type2==='周期性预定'){ rightArea = '<span data-time = "' + h + ':30" class="pull-right cycle-half-right"></span>'; } return leftArea + rightArea; }; return { init: function () { var grid = new Datatable(); grid.init({ src: $("#data-table-actmReserve"), dataTable: { order:[[20,"asc"]], "ajax": { "url": ..., type: 'GET', "dataType": 'json' }, responsive: false, autoWidth: true, "columns": [ { data:'name', render: function(data, type, row){ ... return data; } }, { data:'count' }, { data:'place' }, { data: '7点', orderable:false, render: renderDiv }, { data: '8点', orderable:false, render: renderDiv }, { data: '9点', orderable:false, render: renderDiv }, { data: '10点', orderable:false, render: renderDiv }, { data: '11点', orderable:false, render: renderDiv }, { data: '12点', orderable:false, render: renderDiv }, { data: '13点', orderable:false, render: renderDiv }, { data: '14点', orderable:false, render: renderDiv }, { data: '15点', orderable:false, render: renderDiv }, { data: '16点', orderable:false, render: renderDiv }, { data: '17点', orderable:false, render: renderDiv }, { data: '18点', orderable:false, render: renderDiv }, { data: '19点', orderable:false, render: renderDiv }, { data: '20点', orderable:false, render: renderDiv }, { data: '21点', orderable:false, render: renderDiv }, { data: '22点', orderable:false, render: renderDiv }, { data: function ( row, type, val, meta ) { var reserve = '预定' return reserve; }, orderable:false }, {data:'createdDate',visible:false} ] } }); } }