Maison > Questions et réponses > le corps du texte
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粉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>