日程展示"/>
日程展示
需求：
制作一个设计师日程展示（类似时间轴，但是网上都没有类似定制的插件）
感谢思路
效果图：
代码（下载）：
<!DOCTYPE html>
<html>
<head><title>设计师日程</title>
<script src=".9.0/jquery.js"></script><style type="text/css">#container {font-size: 12px;background-color: #ffffff;border: 1px solid #cccccc;position: relative;margin: 0;}#stationContainer {background-color: #E5ECFF;float: left;width: 500px;/*padding-top: 30px;*/position: relative;z-index: 200;border-right: 1px solid black;}#stationContainer .header {/*border-top: 1px solid black;*/width: 100%;float: left;height: 30px;z-index: 300;}#stationContainer .station {/*border-top: 1px solid black;*/width: 100%;float: left;height: 100px;z-index: 300;}#timeContainer {float: left;left: 504px;display: inline;position: absolute;z-index: 100;width: 720px;/*overflow-x: scroll;*//*overflow: hidden;*/}#scrollContainer {position: relative;}#timeHeader {height: 30px;background-color: #eeeeee;position: relative;overflow: hidden;}#timeHeader .unitTime {float: left;border-left: 1px solid black;z-index: 100;height: 10px;margin-top: 20px;position: absolute;text-align: center;}#timeHeader .halfHour {margin-top: 10px;height: 20px;}#timeHeader .hour {height: 30px;margin-top: 10px;}#timeBody {position: relative;}#timeBody .horizontalStation {position: relative;width: 100%;border-top: 1px solid black;height: 100px;z-index: 10;}.techinian {width: 100%;height: 100%;}.techinian td {width: 125px;text-align: center;border: 1px solid black;}.car {height: 20px;line-height: 20px;display: inline;float: left;width: 100px;border: 1px solid #0086b3;background-color: deepskyblue;text-decoration: none;position: absolute;outline: none;/*margin-top: 5px;*/top: 0px;bottom: 0px;padding: 0px;/*font-family: 黑体;*/color: white;font-size: 12px;border-radius: 20px;z-index: 1;}.car div {border-radius: 5px;text-align: center;height: 20px;overflow: hidden;}.virtual {border: 2px dashed #000000;}a.car:hover {cursor: pointer;/*background-color: #00b7ee;*/background-color: red;text-decoration: none;}.type1 {background-color: deepskyblue;}.type2 {background-color: Green;}</style><style type="text/css">.border_top {border-top: 1px solid black;}.border_right {border-right: 1px solid black;}.border_left {border-left: 1px solid black;}.border_none {border: 0 none;}</style><script type="text/javascript">//左边table宽度var headTableWidth = 504;var unitMinute = 5, halfHourCount = 30 / unitMinute, hourCount = 60 / unitMinute;var unitCount = 24 * (60 / unitMinute);var unitPx = 5; //每个格子的宽度加边框$(function () {var headerWidth = $("#container").width() - $("#stationContainer").width();
// var rightWidth = window.screen.width-headTableWidth;var headerWidthMin = 720;if (headerWidth < headerWidthMin) {headerWidth = headerWidthMin;}
// unitPx = 50;unitPx = headerWidth / 14;// console.log("headerWidth:"+headerWidth);console.log("unitPx:" + unitPx);for (var i = 0; i < 15; i++) {var classstr = " ";var showStr = "";if (i < 14) {showStr = (i + 1);}if ((i + 1) % 7 == 0) {showStr += "周日";}classstr = "hour";var unitTime = $("<div id='time_" + i + "' class='unitTime " + classstr + "'>" + showStr + "</div>");unitTime.css('left', i * unitPx);unitTime.css('width', unitPx);$("#timeHeader").append(unitTime);}$("#timeContainer").width(headerWidth);});</script><script type="text/javascript">window['selectedCar'] = '';function Car(carData,index) {console.log("car+"+index);var id = carData.id;var text = carData.text;var textTitle = carData.textTitle;
// var stationId = carData.stationId;var start = carData.start;var endTime = carData.end;var durationMinute = endTime - start + 1;var car = $("<a style='opacity: 0.7' id='car_" + id + "' href=\"javascript:void(0)\" onclick=\"addZindex(car_" + id + ")\" stationId='" + index + "' class=\"car type" + carData.type + "\">" +"<div style='opacity: 1' title='" + textTitle + "'>" + text + "</div>" +"</a>");car.width(unitPx * durationMinute);car.css('left', (start - 1) * unitPx);Car.prototype.Show = function () {$("#station_" + index).append(car);//SetCarPositionByTime(car, startTime.getHours(), startTime.getMinutes());}}function Station(stationId) {var station = $("<div id='station_" + stationId + "' class=\"horizontalStation\"></div>");station.height($(".station:first").height());Station.prototype.Show = function () {$("#timeBody").append(station);}}function ConvertJSONDateToJSDateObject(jsondate) {var date = new Date(parseInt(jsondate.replace("/Date(", "").replace(")/", ""), 10));return date;}function LoadData() {//测试数据return generateData();//后台获取数据逻辑var url = '${staticPath}/order/designer-schedule-list';$.getJSON(url, function (result) {console.log(result.data);console.log(result.dateInfo);window["data"] = result.data;var stations = $("div.station[data-key]");$("#timeBody").html('');for (var i = 0; i < stations.length; i++) {var stationId = $(stations[i]).attr('data-key');var station = new Station(stationId);station.Show();
// var carList = data[stationId];console.log("stationId"+stationId)var carList = data[i+1];if (typeof carList == 'undefined') continue;for (var j = 0; j < carList.length; j++) {var carData = carList[j];var car = new Car(carData,i+1);car.Show();}}});}function generateData() {var data = {'1': [{id: '1',text: '节点：2019-6-18',textTitle: '节点：2019-6-18；备注：1的备注信息，惺惺惜惺惺想寻寻寻寻',start: 1,end: 3,type: 1},{id: '2',text: '节点：2019-6-18；',textTitle: '节点：2019-6-18；备注：1的备注信息，惺惺惜惺惺想寻寻寻寻',start: 4,end: 6,type: 2}], '2': [{id: '3',text: '节点：2019-6-18；',textTitle: '节点：2019-6-18；备注：2的备注信息，惺惺惜惺惺想寻寻寻寻',start: 4,end: 12,type: 1},{id: '4',text: '节点：2019-6-18；',textTitle: '节点：2019-6-18；备注：2的备注信息，惺惺惜惺惺想寻寻寻寻',start: 9,end: 14,type: 2}], '3': [{id: '5',text: '节点：2019-6-18；',textTitle: '节点：2019-6-18；备注：3的备注信息，惺惺惜惺惺想寻寻寻寻',start: 2,end: 3,type: 1}], '4': [{id: '6',text: '节点：2019-6-18；',textTitle: '节点：2019-6-18；备注：4行的备注信息，惺惺惜惺惺想寻寻寻寻',start: 9,end: 12,type: 2},{id: '7',text: '节点：2019-6-18；',textTitle: '节点：2019-6-18；备注：4的备注信息，惺惺惜惺惺想寻寻寻寻',start: 13,end: 15,type: 1}]};window["data"] = data;var stations = $("div.station[data-key]");$("#timeBody").html('');for (var i = 0; i < stations.length; i++) {var stationId = $(stations[i]).attr('data-key');var station = new Station(stationId);station.Show();
// var carList = data[stationId];console.log("stationId"+stationId)var carList = data[i+1];if (typeof carList == 'undefined') continue;for (var j = 0; j < carList.length; j++) {var carData = carList[j];var car = new Car(carData,i+1);car.Show();}}}function Loop() {}$(function () {LoadData();});/*** 元素重叠切换优先级* @param _this*/function addZindex(_this) {var zindex = $(_this).css("z-index");console.log(zindex);$(_this).css("z-index", zindex + 1)console.log(_this);}</script>
</head>
<body>
<div id="container"><div id="stationContainer"><div class="header"><table border="0" class="techinian" cellpadding="0" cellspacing="0"><tr><td class="stationTd">设计师</td><td class='stationTd'>楼盘</td><td class='stationTd'>首次邀约</td><td class=''>重复邀约</td></tr></table></div><div class="station" data-key='1'><table border="0" class="techinian" cellpadding="0" cellspacing="0"><tr><td rowspan='4' class="stationTd">设计师1</td><td class='stationTd border_bottom'>楼盘1</td><td class='stationTd border_bottom'>2019-10-21</td><td class='border_bottom'>2019-10-21</td></tr><tr><td class='stationTd border_bottom'>楼盘2</td><td class='stationTd border_bottom'>2019-10-21</td><td class='border_bottom'>2019-10-21</td></tr><tr><td class='stationTd border_bottom'>楼盘3</td><td class='stationTd border_bottom'>2019-10-21</td><td class='border_bottom'>2019-10-21</td></tr><tr><td class='stationTd'>楼盘4</td><td class='stationTd'>2019-10-21</td><td class=''>2019-10-21</td></tr></table></div><div class="station" data-key='2'><table border="0" class="techinian" cellpadding="0" cellspacing="0"><tr><td rowspan='4' class="stationTd">设计师2</td><td class='stationTd border_bottom'>楼盘5</td><td class='stationTd border_bottom'>2019-10-21</td><td class='stationTd border_bottom'>2019-10-21</td></tr><tr><td class='stationTd border_bottom'>楼盘6</td><td class='stationTd border_bottom'>2019-10-21</td><td class='stationTd border_bottom'>2019-10-21</td></tr><tr><td class='stationTd border_bottom'>楼盘7</td><td class='stationTd border_bottom'>2019-10-21</td><td class='stationTd border_bottom'>2019-10-21</td></tr><tr><td class='stationTd'>楼盘8</td><td class='stationTd'>2019-10-21</td><td class='stationTd'>2019-10-21</td></tr></table></div><div class="station" data-key='3'><table border="0" class="techinian" cellpadding="0" cellspacing="0"><tr><td rowspan='4' class="stationTd">设计师3</td><td class='stationTd border_bottom'>楼盘9</td><td class='stationTd border_bottom'>2019-10-21</td><td class='stationTd border_bottom'>2019-10-21</td></tr><tr><td class='stationTd border_bottom'>楼盘10</td><td class='stationTd border_bottom'>2019-10-21</td><td class='stationTd border_bottom'>2019-10-21</td></tr><tr><td class='stationTd border_bottom'>楼盘11</td><td class='stationTd border_bottom'>2019-10-21</td><td class='stationTd border_bottom'>2019-10-21</td></tr><tr><td class='stationTd border_bottom'>楼盘12</td><td class='stationTd border_bottom'>2019-10-21</td><td class='stationTd border_bottom'>2019-10-21</td></tr></table></div><div class="station" data-key='4'><table border="0" class="techinian" cellpadding="0" cellspacing="0"><tr><td rowspan='4' class="stationTd">设计师4</td><td class='stationTd border_bottom'>楼盘13</td><td class='stationTd border_bottom'>2019-10-21</td><td class='stationTd border_bottom'>2019-10-21</td></tr><tr><td class='stationTd border_bottom'>楼盘14</td><td class='stationTd border_bottom'>2019-10-21</td><td class='stationTd border_bottom'>2019-10-21</td></tr><tr><td class='stationTd border_bottom'>楼盘3</td><td class='stationTd border_bottom'>2019-10-21</td><td class='stationTd border_bottom'>2019-10-21</td></tr><tr><td class='stationTd border_bottom'>楼盘15</td><td class='stationTd border_bottom'>2019-10-21</td><td class='stationTd border_bottom'>2019-10-21</td></tr></table></div></div><div id="timeContainer"><div id="scrollContainer"><div id="timeHeader"><div class="unitTime"><!--1111111111111111111--></div></div><div id="timeBody"><div class="horizontalStation"><a href="#" class="car"><div>车辆1</div></a><a href="#" class="car"><div>车辆1</div></a><a href="#" class="car"><div>车辆1</div></a><a href="#" class="car"><div>车辆1</div></a></div></div></div></div><!--<div id="timeLine">-->
</div>
<div style="clear: both;">
</div>
</div>
<!--<div id="footer">
</div>-->
</body>
</html>作为一个后端人员……改造前端代码，蛋蛋还是疼…………
更多推荐
日程展示
发布评论