WebForm CSS垂直虚线时间轴特效

要想实现如下效果：左边是当天所有主计划，点击每行显示对应的子计划，用到时间轴表示，需要用到以下插件链接: 时间轴特效.可到其官网自行下载。

思路：
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了，所以有待改进，期待看到的大神能够结局。最后的最后，给大家推荐个网站：时间轴脚本. 里面包含了各式各样的时间轴，应有尽有。
喜欢的点个赞吧，整理不易且珍惜！