Previous topicNext topic
WebBuilderX > 子页面组件元素 > 表格类元素 > 列工具栏 > 行数据打印 >
卡片模板示例

常规的行数据模板设计起来非常简单，几个html标签就能轻松搞定。但对于像“员工资料卡”这样的数据模板而言，就会稍微复杂一点。以下是该模板打印效果：

其实，这种模板也很简单，前提是要会用html中的table组合标签。该标签至少需要3个：<table>、<tr>、<td>，其他都是作为可选辅助项。如下图：

有了这样的知识储备基础，设计起来就会非常得心用手了。关于html标签的属性等知识，这里不再展开详述，建议阅读WebBuilderX软件作者编著的各种网页开发基础教程。现仅简要说明此模板的设计过程。

<h3 style="text-align:center">员工资料卡</h3>
    <p style="text-align:right">编号：{{d._Identify}}</p>

这两个标签都加上了style样式属性，让标题居中、编号靠右。

  • 确定表格外观。这个打印模板的表体部分，外边框比较粗，内部的单元格边框比较细，所以就要给table标签加上相应的样式：

<table border="3" cellpadding="5" cellspacing="0" style="border-collapse:collapse;margin:auto">
    </table>

这里的border属性值为3，表示比较粗的外边框，数字越大就越粗；cellpadding为5，表示单元格内部的文字和边框之间的距离；cellspacing表示不同单元格之间的距离。另外加了2个样式：border-collapse的属性值为collapse，表示相邻两个单元格的边框重叠；margin属性值为auto，表示让表格水平居中。

  • 第1行共有5个单元格。在table标签写好之后，接着就要在这个标签里添加数据行。由上图可见，第1行共有5个单元格，以下是该行代码：

<tr>
        <td>姓&emsp;&emsp;名</td>
        <td>{{d.姓名}}</td>
        <td>出生日期</td>
        <td>{{d.日期}}</td>
        <td rowspan="5" align="center">
            <img src="upload/atta/{{d.照片}}" width="160">
        </td>
    </tr>

这里的tr表示行，td表示单元格。因为有5个单元格，所以有5组td。其中，第1个td里的&emsp;表示为全角空格（半角空格使用&ensp;），目的是让它的宽度始终为4个汉字。重点在于最后的td单元格，由于这个单元格需要向下合并5行，所以加上了rowspan属性，属性值为5；而这个单元格还要显示图片，所以又使用了img标签，并指定图片显示宽度为160。

  • 第2行和第3行都是4个单元格。因为是2行，所以用了2组tr标签：

<tr>
        <td>部&emsp;&emsp;门</td>
        <td>{{d.部门}}</td>
        <td>雇佣日期</td>
        <td>{{d.雇佣日期}}</td>
    </tr>
    <tr>
        <td>性&emsp;&emsp;别</td>
        <td>{{d.性别}}</td>
        <td>职&emsp;&emsp;务</td>
        <td>{{d.职务}}</td>
    </tr>

  • 第4行只有2个单元格。其中，后面的单元格是3列合并的，所以要加上colspan属性：

<tr>
        <td>地&emsp;&emsp;址</td>
        <td colspan="3">{{d.地址}}</td>
    </tr>

  • 第5行有4个单元格。本行没有合并单元格的情况，所以，跟第2行和第3行一样，正常写就行：

<tr>
       <td>家庭电话</td>
       <td>{{d.家庭电话}}</td>
       <td>办公电话</td>
       <td>{{d.办公电话}}</td>
    </tr>

  • 最后1行只有1个单元格。有了之前第4行的经验，只要将5列合并即可：

<tr style="height: 100;background: white">
       <td colspan="5">{{d.个人简介}}</td>
    </tr>

由于最后一行是用来打印备注内容的，所以给tr设置了行高为100，背景色为白色。至于为什么还要加个背景色的设置，稍后会有说明。

<colgroup>
        <col width="80" align="center" style="background: silver">
        <col width="180" align="left">
        <col width="80" align="center" style="background: silver">
        <col width="180" align="left">
    </colgroup>

在这个colgroup中，共对前面的4列进行了设置：第1列和第3列宽度80，内容居中显示，背景色为银色；第2列和第4列宽度180，内容靠左显示。由于最后一行是5列合并的，它的列位置还是处于第1列，为避免它的背景也变为银色，所以在之前最后一行的tr样式中，给它加了白色的背景。

如果你想给不同的数据行或单元格分别设置样式，只要在相应的tr或td上加上style样式属性即可，非常灵活，甚至于连表格线的颜色都能随便定义。由此可见，要想灵活设计打印模板，必要的html知识还是需要掌握的。以下是本示例的完整模板代码：


<h3 style="text-align:center">员工资料卡</h3>
<p style="text-align:right">编号：{{d._Identify}}</p>
<table border="3" cellpadding="5" cellspacing="0" style="border-collapse:collapse;margin:auto">
   <tr>
      <td>姓&emsp;&emsp;名</td>
      <td>{{d.姓名}}</td>
      <td>出生日期</td>
      <td>{{d.日期}}</td>
      <td rowspan="5" align="center">
           <img src="upload/atta/{{d.照片}}" width="160">
      </td>
   </tr>
   <tr>
      <td>部&emsp;&emsp;门</td>
      <td>{{d.部门}}</td>
      <td>雇佣日期</td>
      <td>{{d.雇佣日期}}</td>
   </tr>
   <tr>
      <td>性&emsp;&emsp;别</td>
      <td>{{d.性别}}</td>
      <td>职&emsp;&emsp;务</td>
      <td>{{d.职务}}</td>
   </tr>
   <tr>
      <td>地&emsp;&emsp;址</td>
      <td colspan= "3">{{d.地址}}</td>
   </tr>
   <tr>
      <td>家庭电话</td>
      <td>{{d.家庭电话}}</td>
      <td>办公电话</td>
      <td>{{d.办公电话}}</td>
   </tr>
   <tr style="height: 100;background: white">
      <td colspan="5">{{d.个人简介}}</td>
   </tr>
   <colgroup>
      <col width="80" align="center" style="background: silver">
      <col width="180" align="left">
      <col width="80" align="center" style="background: silver">
      <col width="180" align="left">
   </colgroup>
</table>