两行中的 headerText - JS - Oracle Jet答案

【问题标题】：headerText in two different lines - JS - Oracle Jet两行中的 headerText - JS - Oracle Jet
【发布时间】：2018-05-16 14:16:10
【问题描述】：

我从 Oracle JET 框架 (Javascript) 开始，我已经编辑了一个 oj 表，我希望我的列更短，因为我的 headerTexts 太长了。如何在我的 headerText 中间制作一种 \n 以便将我的列标题放在两个不同的行中。谢谢

<oj-table id="table" aria-label="Tasks Table" data="[[datasource]]" edit-mode='rowEdit' row-renderer='[[oj.KnockoutTemplateUtils.getRenderer("row_template", true)]]'
dnd='{"reorder": {"columns": "enabled"}}' scroll-policy='loadMoreOnScroll' selection-mode='{"row": "multiple", "column": "multiple"}'
columns='[
  {"headerText": "ID Lieu Origine", "sortProperty": "idLieuOrigine","className":"expeditionsprevues","resizable": "enabled"},
  {"headerText": "ID Lieu Destination", "sortProperty": "idLieuDestination","className":"expeditionsprevues","resizable": "enabled"},
  {"headerText": "Date/Heure \\\n \\t de mise à disposition", "sortProperty": "dateHeureDisposition","className":"expeditionsprevues","resizable": "enabled"},
  {"headerText": "ID de la commande", "sortProperty": "idCommande","className":"expeditionsprevues","resizable": "enabled"},
  {"headerText": "Article Reference", "sortProperty": "articleReference","className":"expeditionsprevues","resizable": "enabled"},
  {"headerText": "Article (reference externe)", "sortProperty": "articleReferenceExterne","className":"expeditionsprevues","resizable": "enabled"},
  {"headerText": "Code UM", "sortProperty": "codeUM","className":"confirmationdesexpeditions","resizable": "enabled"}
    ]'
                  style='width: 100%;'>

【问题讨论】：

标签： javascript html oracle-jet

【解决方案1】：

您可以通过使用模板来实现这一点

请检查以下代码

   <div id="sampleDemo" style="" class="demo-padding demo-container">
  <div id="componentDemoContent" style="width: 1px; min-width: 100%;">
    <style>
    .red{
      color:red;
      }
    </style>
    <oj-table id='table' aria-label='Departments Table'
                                    data='[[dataprovider]]' as='cell'
                                    columns='{{columnArray}}'
                                    columns-default='{"template": "cellTemplate",
                                                      "headerTemplate": "headerTemplate"}'
                                    style='width: 100%;'>
      <template slot="cellTemplate">
         <oj-bind-text value="[[cell.data]]"></oj-bind-text>
      </template>
      <template slot="ratingCellTemplate">
         <oj-rating-gauge value='[[cell.data]]' readonly style="width:60px;height:15px;">
         </oj-rating-gauge>
      </template>
      <template slot="headerTemplate" data-oj-as="header">
        <span class="red">
         <oj-bind-text value="[[header.data]]" class="red"></oj-bind-text></span><br><oj-bind-text value="[[header.data]]"></oj-bind-text><br>

      </template>
      <template slot="totalFooterTemplate" data-oj-as="footer">
         <div id="table:emp_total"><oj-bind-text value="{{emp_total_func(footer)}}"></oj-bind-text></div>
      </template>
    </oj-table>


  </div>
</div>

添加了一些额外的代码，例如样式颜色或 HTML 代码。

请查看此示例：demo

【讨论】：