在表格中设置行

时间:2019-04-29 15:44:54

标签: html datatables rows

我正在尝试为订单确认设置自定义通知,并且努力在文档中找到如何确保数据表行中的每一行都与该行相关。订单行数据字段和常规销售订单数据字段是什么?

我正在使用MJML来创建更具风格化的面向客户的通知。

我在文档,谷歌和博客文章中四处寻找。

<mjml>

  <mj-head>

    <mj-style>
        @media all and (max-width: 599px) {
      .container600 {
        width: 100% !important;
      }


      .smarttable {
        border: 0;
      }
      .smarttable thead {
        display:none;
        border: none;
        clip: rect(0 0 0 0);
        height: 0px;
        margin: 0px;
        overflow: hidden;
        padding: 0;
        max-width:0px;
        max-height:0px;
      }
      .smarttable tr {
        display: block;
        width:90%;
        margin:20px auto;
      }
      .smarttable td {
        border-bottom: 1px solid #000;
        display: block;
        font-size: 14px;
        text-align: right;
      }
      .smarttable td:before {
        content: attr(data-label);
        float: left;
        font-weight: bold;
        text-transform: uppercase;
      }
    }
    </mj-style>
       <mj-attributes>
               <mj-text align="left" font-family="sans-serif" color="#000" font-size="14px" line-height="23px" />

      <mj-section background-color="#fff" padding="0px" />
    </mj-attributes>

  </mj-head>

  <mj-body background-color="#ededed">

    <mj-section>
   <mj-column>
        <mj-image width="300px" align="center" src="http://go.pardot.com/l/45492/2019-04-05/72zfh7/45492/214936/splitheader_01.jpg" />
      </mj-column>

         <mj-column>
        <mj-image width="300px" align="center" src="http://go.pardot.com/l/45492/2019-04-05/72zfh9/45492/214938/splitheader_02.jpg" />
      </mj-column>
  </mj-section>
        <mj-section>
      <mj-column>

          <mj-text>
        John Smith,<br></br>
            Your order <a href="google.com" target="_blank" style="color:#429df1">#((Document.OrderNbr))</a> contains one or more backordered items. Most backorders are filled and shipped out within five business days. We apologize for the inconvenience.
        </mj-text>
               </mj-column>
              </mj-section>   

                <mj-section> <mj-column>
        <mj-button font-family="Helvetica" background-color="#f45e43" color="white" align="left" padding="0px 25px" href="">
          VIEW ORDER DETAILS
         </mj-button>
                  </mj-column>
          </mj-section>

           <mj-section><mj-column>
           <mj-spacer height="15px" />
           </mj-column>
           </mj-section>

<mj-section> <mj-column>
  <mj-text><h1 style="color:#fff;font-size:18px;background-color:#033047; padding:5px">BACKORDER NOTIFICATION</h1></mj-text>
  </mj-column></mj-section>

          <!-- First column -->
          <mj-section> <mj-column>
              <mj-text><h2 style="color:#033047;font-size:16px;">ORDER DETAILS</h2></mj-text>
           <mj-text>Customer #:  ((Document.CustomerOrderNbr))<br>
             Order #:  <a href="google.com" target="_blank" style="color:#429df1">((Document.OrderNbr))</a><br>
             Purchase Order #:  ((Document.InvoiceNbr))<br>
             Order Date:  ((Document.OrderDate))</br>  
             Shipping Method:  ((Document.ShipVia.CarrierID))<br>
             Estimated Shipping Date:  ((Document.ShipDate))</br>
            </mj-text></mj-column>
            </mj-section>


<mj-section>

<mj-column>
      <mj-divider border-width="1px" border-style="solid" border-color="black" />
<mj-text>
<table width="100%" cellpadding="0" cellspacing="0" style="min-width:100%;">

<tr>
<td style="padding:5px;">
<table class="smarttable" width="100%" cellpadding="0" cellspacing="0" style="min-width:100%;"><thead>
                    <tr><th scope="col" style="padding:5px; font-family: Arial,sans-serif; font-size: 14px; line-height:10px;line-height:15px;color:#033047;text-align:left;background-color:#ededed">ITEM</th>
                      <th scope="col" style="padding:5px; font-family: Arial,sans-serif; font-size: 14px; line-height:10px;line-height:15px;color:#033047;text-align:left;background-color:#ededed">SKU</th>
                      <th scope="col" style="padding:5px; font-family: Arial,sans-serif; font-size: 14px; line-height:10px;line-height:15px;color:#033047;text-align:left;background-color:#ededed">QTY</th>

  <th scope="col" style="padding:5px; font-family: Arial,sans-serif; font-size: 14px; line-height:10px;line-height:15px;color:#033047;text-align:left;background-color:#ededed">PRICE EACH</th>

                        <th scope="col" style="padding:5px; font-family: Arial,sans-serif; font-size: 14px; line-height:10px;line-height:15px;color:#033047;text-align:left;background-color:#ededed">ITEM TOTAL</th>

</tr>
</thead>
<tbody>

  <tr><td data-label="ITEM" valign="top" style="padding:5px; font-family: Arial,sans-serif; font-size: 12px; line-height:20px;">((Document.OrderDesc))</td>

                      <td data-label="SKU" valign="top" style="padding:5px; font-family: Arial,sans-serif; font-size: 12px; line-height:20px;">((Transactions.InventoryID.InventoryCD))</td>

                      <td data-label="QTY" valign="top" style="padding:5px; font-family: Arial,sans-serif; font-size: 12px; line-height:20px;">((Transactions.OrderQty))</td>

<td data-label="PRICE EACH" valign="top" style="padding:5px; font-family: Arial,sans-serif; font-size: 12px; line-height:20px;">((Transactions.CuryUnitPrice))</td>

  <td data-label="ITEM TOTAL" valign="top" style="padding:5px; font-family: Arial,sans-serif; font-size: 12px; line-height:20px;">((Transactions.CuryExtPrice))</td>
  </tr></tbody></table></td></tr></table>

</mj-text>
  <mj-divider border-width="1px" border-style="solid" border-color="black" />
</mj-column>
</mj-section>


        <mj-section>
      <mj-column>
      <mj-text>
        <h3 style="color:#033047;font-size:20px; padding-top:25px">SUPPORT & ASSISTANCE</h3></mj-text>

    <mj-text>Feel free to contact us if you need further asisstance.<br></br>
      Phone: 1-888-637-3898<br>
      Email: <a href="mailto:info@graphicproducts.com" target="_blank" style="color:#429df1">info@graphicproducts.com</a></br>
      Website: <a href="GraphicProducts.com" target="_blank" style="color:#429df1">GraphicProducts.com</a><br></br>
        </mj-text>
        </mj-column></mj-section>

  <mj-text align="center"><br>Copyright © 2019, All rights reserved.<br>
    Graphic Products, Inc., 9825 SW Sunshine Ct. Beaverton, OR 97005, United States
    <br>
    View our <a href="https://www.graphicproducts.com/privacy/" target="_blank" style="color:#000">privacy policy</a>
        </mj-text>           

</mj-body>
</mjml>

我只需要确保在适用时各行之间是相关的,并且在其旁边具有描述的项目,然后使总数与整个表的总数相关。

1 个答案:

答案 0 :(得分:0)

从来没有人回过头来,但是我最终找到了一个解决方案,并希望将其发布在这里,以便其他任何人都可以使用它。

数据表有一个特殊的代码,需要围绕它们进行处理,从而使表循环并将信息拉入表中。

在此处查看文章:https://asiablog.acumatica.com/2018/07/loops-in-notification-templates.html