制作大事记模板

Leo.Tsai

1. 概述

事件记录型模板常常会用在报表中展示，今天给大家介绍下制作思路。

2. 实现思路2.1 数据准备

准备这样一组数据，包含了日期，标题，历程字段。

2.2 模板设置

1) 在A1单元格中输入公式:File1.group(year(日期))+"年"并设置当前单元格字号为:18,颜色为：蓝色,扩展方向为：纵向，扩展后排序为降序,依赖值为：$$$

2) 在B2和B3单元格中分别添加两个字段，公式为:File1.select(year(日期))并设置B2,B3单元格，扩展方向为:纵向,左父格为:A1 ，设置B2单元格扩展后排序为:降序,依赖值为:File1.select(日期)

注意:这一列数据为辅助数据

3).在C2,C3单元格中分别拖放日期字段,并将C2,D2合并,C3,D3合并,设置C2字号为:16,C3字号默认。颜色都为：浅灰色，扩展方向都为：纵向扩展，设置C2显示值为:month($$$)+"."+day($$$)，C3显示值为:year($$$)并设置C3的左父格为C2。

4)插入2个悬浮元素在１和５处，在悬浮元素中各添加一个图片，并在C1,E2,E3中分别插入图片，调整图片大小如图：(图片会在附件中上传)

5)将数据集中的标题字段拖放到F2单元格中，调整列宽，设置字号为：16,字体：幼圆，字型：加粗。扩展方向为：纵向。设置F2条件属性，添加新值:

"<span class='center-to-head' href='#'>"+$$$+"</span>"并设置显示内容为:用html显示内容

注:给F2单元格添加一个类center-to-head，后面的下划线特效会用到。　

将数据集中的历程字段拖放到F3单元格中,设置颜色为:浅灰色.

6)对A1单元格添加超连接，超链接类型为：动态参数.

第一个参数名为:pre,值为:if(find(A1, concatenate(UNIQUEARRAY($pre), UNIQUEARRAY($cur))) > 0, replace(concatenate(UNIQUEARRAY($pre), UNIQUEARRAY($cur)), A1, ""), concatenate(UNIQUEARRAY($pre), UNIQUEARRAY($cur)))

第二个参数名为:cur,值为：if(find(A1, concatenate(UNIQUEARRAY($pre), UNIQUEARRAY($cur))) > 0, 1, if(A1 = $cur, 1, A1))

并在G2单元格中写上公式：if(find(A1, concatenate(UNIQUEARRAY($pre), UNIQUEARRAY($cur))) > 0, 1, if(A1 = $cur, 1, A1))

(注:公式太长，只需要知道这两个参数，是用来动态展开和折叠内容用即可。)

６)设置B2,B3条件属性,设置行高为:0,条件为公式:G2!=A1并任意设置Ｂ列中的某个单元格条件属性为；列宽为：０，条件无。用来隐藏该列。

设置Ｇ２条件属性，列宽为：０，条件为：无，用来隐藏该列

2.3 添加JS代码

以上数据准备和模板设置基本完成后，需要添加js代码　和CSS特效代码，用来完成页面交互效果。

１）在模板web属性-->分页预览-->加载结束事件中添加以下代码：

/////////////////////////以下是鼠标划过事件////////////////////////////////////////////
$(".x-table tr").mousemove(function() {
      if (this.id !== 'r-0-0') {

            if($(this).children("td").eq(5).html()!=""){
            var id  = $(this).children("td").eq(2).attr("id")
            var num=id.search("-");       //获取id中“-”符号第一次出现的索引
                  var id1=id.substr(0,num).replace(/[^0-9]+/ig,"");  //截取id值中的行号
                  var id2=id.substr(num,id.length-num);  //截取id
//起始行
   var rowstart=id1;
//结尾行
   var rowend =parseInt(id1)+1

//遍历起始行至结尾行,
            for(var i = rowstart;i<=rowend;i++){
            var col1 = "C"+i+id2;
            //alert(col1)
            $('td[id^='+col1+']').parent('tr').children("td").eq(2).css({"color":'#5ecb4c',"font-weight":"bold"});//改变遍历行字体，并加粗

            if(i!=rowend){
                     $('td[id^='+col1+']').parent('tr').children("td").eq(3).find("div").css({"background":"url('/webroot/images/2-1.png') no-repeat center","background-size":"contain"})}
}//如果遍历行不是末行，改变当前table的当前行中第4列中的图片
            }}
            });
/////////////////////////////////////以下是鼠标移出事件/////////////////////////////////////////
$(".x-table tr").mouseout(function() {
      if (this.id !== 'r-0-0') {
            if($(this).children("td").eq(5).html()!=""){
            var id  = $(this).children("td").eq(2).attr("id")
            var num=id.search("-");       //获取id中“-”符号第一次出现的索引
                  var id1=id.substr(0,num).replace(/[^0-9]+/ig,"");  //截取id值中的行号
                  var id2=id.substr(num,id.length-num);  //截取id
//起始行
   var rowstart=id1;
//结尾行
   var rowend =parseInt(id1)+1
//遍历起始行至结尾行,
            for(var i = rowstart;i<=rowend;i++){
            var col1 = "C"+i+id2;
            //alert(col1)
            $('td[id^='+col1+']').parent('tr').children("td").eq(2).css({"color":'#c0c0c0',"font-weight":"normal"});//还原遍历行字体，取消加粗
            if(i!=rowend){$('td[id^='+col1+']').parent('tr').children("td").eq(3).find("div").css({"background":"url('/webroot/images/2.png') no-repeat center","background-size":"contain"})}
}//如果遍历行不是末行，还原当前table的当前行中第4列中的图片
            }
            }
            });

2)将以下代码编辑为css文件，放在根目录的css文件夹中，命名为：xiahuaxian

            .center-to-head{
                     position:relative;
            }
            .center-to-head::after{

                     content:'';
                     display:block;
                     margin: 0 auto;
                     /*开始时候下划线的宽度为100%*/
                     width:100%;
                     height:4px;
                     position:absolute;
                     bottom:-5px;
                     background:#00bbff;
                     transition:all 0.1s ease-in-out;
                     /*通过transform的缩放scale来让初始时x轴为0*/
                     transform: scale3d(0,1,1);
                     /*将坐标原点移到元素的中间，以原点为中心进行缩放*/
                     transform-origin:60% 0;
            }
            .center-to-head:hover::after{
                     /*鼠标经过时还原到正常比例*/
                     transform:scale3d(1,1,1);
            }

3)在模板web属性中加载上面的css文件

4) 在预览页面如果有内容展示不完时，可以在页面设置中自定义页面大小

3. 最终效果

4. 总结

此模板在决策报表中测试也是可以的。只是页面加载结束事件需要放在报表块的初始化事件中，对代码外面整体加一个延时setTimeout(function() {},300);

代码中的$(".x-table tr") 替换成:$(".x-table.REPORT0table tr")

决策报表也可以加载css文件，在body初始化事件中写上代码：

var link='<link rel="stylesheet" type="text/css" href="../../css/xiahuaxian.css">';

$("head").append(link);

注：移动端不支持

5. 附件

制作好的模板和用到的图片放到附件中了，点击下载即可

模板&材料.rar (25.74 KB, 下载次数: 181)