recherche

Maison  >  Questions et réponses  >  le corps du texte

Comment combiner des formateurs personnalisés avec des formateurs prédéfinis dans Tabulator JS ?

J'utilise Tabulator JS et j'ai 2 colonnes contenant des données numériques. Tout d’abord, j’ai utilisé le ? formatterParams 参数的内置 money 格式化程序,对于第二个,我想应用完全相同的、具有相同参数的,但还要添加,例如,单元格的颜色。如何以自定义格式应用formatterParams

new Tabulator("#data-table", {
      data: data,
      layout: "fitColumns",
      columns: [{
          title: "Length",
          field: "length",
          formatter: zeroValueFormatter,
          formatterParams: {
            thousand: " ",
            precision: false
          }
        },
        {
          title: "New length",
          field: "newLength",
          formatter: "money",
          formatterParams: {
            thousand: " ",
            precision: false
          }
        ],
      });


function zeroValueFormatter(cell, formatterParams /* ? */) {
    if (cell.getValue() === 0) {
        cell.getElement().style.backgroundColor = "#add8e6";
    }    
    return cell.getValue();
}

P粉676588738P粉676588738440 Il y a quelques jours696

répondre à tous(1)je répondrai

  • P粉592085423

    P粉5920854232023-09-14 12:37:49

    Une option consiste à utiliser le formateur rowFormatter 并将格式应用于您需要的特定列。在您的示例中,是 length 列。这样,您可以在两列的列设置级别使用内置的 money mais à appliquer un formatage supplémentaire au niveau de la ligne. Voici un exemple :

    const data = [
      { length: 0, newLength: 10000 },
      { length: 2000, newLength: 20000 },
      { length: 3000, newLength: 0 }
    ]
    
    const table = new Tabulator("#data-table", {
      data: data,
      layout: "fitColumns",
      rowFormatter: zeroValueFormatter,
      columns: [{
          title: "Length",
          field: "length",
          formatter: "money",
          formatterParams: {
            thousand: " ",
            precision: false
          }
        },
        {
          title: "New length",
          field: "newLength",
          formatter: "money",
          formatterParams: {
            thousand: " ",
            precision: false
          }
        }
      ],
    });
    
    function zeroValueFormatter(row) {
      const rowData = row.getData()
    
      if (rowData['length'] === 0) {
        row.getCell('length').getElement().style.backgroundColor = "#add8e6";
      }
    
    }
    <link href="https://unpkg.com/tabulator-tables@5.5.1/dist/css/tabulator.min.css" rel="stylesheet" />
    <script type="text/javascript" src="https://unpkg.com/tabulator-tables@5.5.1/dist/js/tabulator.min.js"></script>
    <div id="data-table"></div>

    répondre
    0
  • Annulerrépondre