要想实现如下效果：左边是当天所有主计划，点击每行显示对应的子计划，用到时间轴表示，需要用到以下插件链接: 时间轴特效.可到其官网自行下载。
思路：
1：首先确定主表（主计划表）和子表（子计划表）的数据关系，通过planID连接子表，单击主表时通过ID得到其所有的字表数据
2：曾经试过想根据字表的数据个数动态创建右边计划项，但是由于其使用方法的特殊性，只有提前初始化多个图形，默认隐藏，根据子项数据赋值并显示出来。
官网下载解压后运行如下图所示
注意相同的颜色代表功能区是一致的，由于其class属性的特殊性，动态 创建很麻烦，以往有大神能解决，暂时只能想到显隐的方法了。
在项目中使用，
1.用来控制单个内容的显隐
2.设置子项的标题
3.设置子项的内容
注意ID的设置 div0-1, t0-1, c0-1,便于for循环时查询。
方法1：清空所有子项的标题内容并隐藏
function ClearLabelss(){for (var i = 0; i < 7; i++) {var titleTime = '';var content = '';var divs = '';titleTime = 't' + i;content = 'c' + i;divs = 'div' + i;document.getElementById(titleTime).innerText = '';document.getElementById(content).innerText = '';document.getElementById(divs).style.display = "none";}}
初始化主表的table，url获取数据，加载成功默认选中第一行。
function initDataGridSPShipforecasPop() {$('#gridSMMatSupplyDtlPop2').datagrid({fit: true,fitColumns: false,nowrap: true,striped: true,collapsible: true,remoteSort: false,singleSelect: true,pagination: true,rownumbers: true,idField: 'GWPMPlanID',url: '../ashx/EasyUiAshx/UPMGWOHHandler.ashx?action=query&jcrq=' + $('#GWPMETimeSrch').datebox('getValue') + '&jcrqz=' + $('#GWPMETimeSrch').datebox('getValue'),frozenColumns: [[{ field: 'GWPMPlanID', title: '港务检修ID', width: 100, hidden: 'true' },]],columns: [[{ field: 'GWPMDate', title: '检修日期', width: 80 },{ field: 'GWPMContent', title: '检修内容', width: 140 },{ field: 'GWPMProf', title: '检修专业ID', width: 100, hidden: 'true' },{ field: 'ProfTypeDes', title: '检修专业', width: 100, hidden: 'true' },{ field: 'LastOperator', title: '维护人', width: 100, hidden: 'true' }]],onLoadSuccess: function (data) {if (data.rows.length != 0) {$('#gridSMMatSupplyDtlPop2').datagrid('selectRow', 0);initLabelss();}},onClickRow: function (rowIndex, rowData) //单机，根据GWPMPlanID 筛选子项{initLabelss();}});};
方法2：单机某行，显示所有子项，这里就体现出ID命名的重要性了！
function initLabelss() {ClearLabelss();var divDemo = document.getElementById("demo");var row = $("#gridSMMatSupplyDtlPop2").datagrid("getSelected");$.post('../ashx/EasyUiAshx/UPMGWSubOHHandler.ashx?action=query2',{ pagename: row.GWPMPlanID },function (data) {$.each(data, function (i, item) {var titleTime = '';var content = '';var divs = '';// alert(item.GWPMSubContent + "----" + item.LastOperator + "----" + item.GWPMSTime + "----" + i);titleTime = 't' + i;content = 'c' + i;divs = 'div' + i;document.getElementById(divs).style.display = "";document.getElementById(titleTime).innerText ="开始时间:"+ item.GWPMSTime.substring(0, 19);document.getElementById(content).innerText = "检修内容:"+item.GWPMSubContent;});}, 'json');}
操作很简单吧，唯一的不足之处就是不能够动态创建，本方法只是提前声明好几个初始图形，一旦子项的数量超出预制体就gg了，所以有待改进，期待看到的大神能够结局。最后的最后，给大家推荐个网站：时间轴脚本. 里面包含了各式各样的时间轴，应有尽有。
喜欢的点个赞吧，整理不易且珍惜！
