Question

我从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%;'>

Answer 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

headerText有两个不同的行 - JS - Oracle Jet

1 个答案: