tabulator 相关问题

制表符表格宽度在第一次加载时缩小，拖动后正在调整

图片 上图显示制表符表格宽度如何缩小 这里的表格在第一次加载时会缩小，如图所示，当我拖动它时，它就会出现，但我希望它应该正确调整 ...

如何调整制表符宽度，以便所有浏览器缩放都应正确调整

<div id="wormGearTabulatorTable" style="max-height: 100%; max-width: 100%; position: relative;" class="tabulator" role="grid" tabulator-layout="fitDataTable"><div class="tabulator-header" role="rowgroup"><div class="tabulator-header-contents" role="rowgroup"><div class="tabulator-headers" role="row" style="height: 62px;"><div class="tabulator-col" role="columnheader" aria-sort="none" tabulator-field="name" style="min-width: 40px; width: 78px; height: 62px;"><div class="tabulator-col-content"><div class="tabulator-col-title-holder"><div class="tabulator-col-title" style="text-align: left;">Type</div></div></div></div><span class="tabulator-col-resize-handle" style="height: 62px;"></span><div class="tabulator-col tabulator-col-group" role="columngroup" aria-sort="none" aria-title="Value" style="height: 62px;"><div class="tabulator-col-content" style="max-width: 119px;"><div class="tabulator-col-title-holder"><div class="tabulator-col-title" style="text-align: center;">Value</div></div></div><div class="tabulator-col-group-cols" style="min-height: 42px;"><div class="tabulator-col" role="columnheader" aria-sort="none" tabulator-field="minValue" style="min-width: 40px; width: 40px; height: 41px;"><div class="tabulator-col-content"><div class="tabulator-col-title-holder"><div class="tabulator-col-title" style="text-align: right;">Min</div></div></div></div><span class="tabulator-col-resize-handle" style="height: 41px;"></span><div class="tabulator-col" role="columnheader" aria-sort="none" tabulator-field="nomValue" style="min-width: 40px; width: 40px; height: 41px;"><div class="tabulator-col-content"><div class="tabulator-col-title-holder"><div class="tabulator-col-title" style="text-align: right;">Nom</div></div></div></div><span class="tabulator-col-resize-handle" style="height: 41px;"></span><div class="tabulator-col" role="columnheader" aria-sort="none" tabulator-field="maxValue" style="min-width: 40px; width: 40px; height: 41px;"><div class="tabulator-col-content"><div class="tabulator-col-title-holder"><div class="tabulator-col-title" style="text-align: right;">Max</div></div></div></div><span class="tabulator-col-resize-handle" style="height: 41px;"></span></div></div><span class="tabulator-col-resize-handle" style="height: 62px;"></span></div><div class="tabulator-frozen-rows-holder" style="min-width: 0px;"></div></div></div><div class="tabulator-tableholder" tabindex="0" style="height: 260px;"><div class="tabulator-table" role="rowgroup" style="padding-top: 0px; padding-bottom: 0px;"><div class="tabulator-row tabulator-selectable tabulator-row-odd" role="row"><div class="tabulator-cell" role="gridcell" tabulator-field="name" style="width: 78px; text-align: left; height: 35px;">Axial Damping [N*S/mm]</div><span class="tabulator-col-resize-handle"></span><div class="tabulator-cell tabulator-editable" role="gridcell" tabulator-field="minValue" tabindex="0" style="width: 40px; text-align: right; height: 35px;">0.00</div><span class="tabulator-col-resize-handle"></span><div class="tabulator-cell tabulator-editable" role="gridcell" tabulator-field="nomValue" tabindex="0" style="width: 40px; text-align: right; height: 35px;">0.00</div><span class="tabulator-col-resize-handle"></span><div class="tabulator-cell tabulator-editable" role="gridcell" tabulator-field="maxValue" tabindex="0" style="width: 40px; text-align: right; height: 35px;">0.00</div><span class="tabulator-col-resize-handle"></span></div><div class="tabulator-row tabulator-selectable tabulator-row-even" role="row"><div class="tabulator-cell" role="gridcell" tabulator-field="name" style="width: 78px; text-align: left; height: 35px;">Axial Stiffness [kN/mm]</div><span class="tabulator-col-resize-handle"></span><div class="tabulator-cell tabulator-editable" role="gridcell" tabulator-field="minValue" tabindex="0" style="width: 40px; text-align: right; height: 35px;">0.00</div><span class="tabulator-col-resize-handle"></span><div class="tabulator-cell tabulator-editable" role="gridcell" tabulator-field="nomValue" tabindex="0" style="width: 40px; text-align: right; height: 35px;">0.00</div><span class="tabulator-col-resize-handle"></span><div class="tabulator-cell tabulator-editable" role="gridcell" tabulator-field="maxValue" tabindex="0" style="width: 40px; text-align: right; height: 35px;">0.00</div><span class="tabulator-col-resize-handle"></span></div><div class="tabulator-row tabulator-selectable tabulator-row-odd" role="row"><div class="tabulator-cell" role="gridcell" tabulator-field="name" style="width: 78px; text-align: left; height: 35px;">Efficiency [-]</div><span class="tabulator-col-resize-handle"></span><div class="tabulator-cell tabulator-editable" role="gridcell" tabulator-field="minValue" tabindex="0" style="width: 40px; text-align: right; height: 35px;">0.83</div><span class="tabulator-col-resize-handle"></span><div class="tabulator-cell tabulator-editable" role="gridcell" tabulator-field="nomValue" tabindex="0" style="width: 40px; text-align: right; height: 35px;">0.83</div><span class="tabulator-col-resize-handle"></span><div class="tabulator-cell tabulator-editable" role="gridcell" tabulator-field="maxValue" tabindex="0" style="width: 40px; text-align: right; height: 35px;">0.83</div><span class="tabulator-col-resize-handle"></span></div><div class="tabulator-row tabulator-selectable tabulator-row-even" role="row"><div class="tabulator-cell" role="gridcell" tabulator-field="name" style="width: 78px; text-align: left; height: 35px;">Inertia Worm Wheel [kgmm²]</div><span class="tabulator-col-resize-handle"></span><div class="tabulator-cell" role="gridcell" tabulator-field="minValue" tabindex="0" style="width: 40px; text-align: right; height: 35px; background-color: rgb(204, 204, 204);"></div><span class="tabulator-col-resize-handle"></span><div class="tabulator-cell tabulator-editable" role="gridcell" tabulator-field="nomValue" tabindex="0" style="width: 40px; text-align: right; height: 35px;">0.00</div><span class="tabulator-col-resize-handle"></span><div class="tabulator-cell" role="gridcell" tabulator-field="maxValue" tabindex="0" style="width: 40px; text-align: right; height: 35px; background-color: rgb(204, 204, 204);"></div><span class="tabulator-col-resize-handle"></span></div><div class="tabulator-row tabulator-selectable tabulator-row-odd" role="row"><div class="tabulator-cell" role="gridcell" tabulator-field="name" style="width: 78px; text-align: left; height: 35px;">Inertia Worm [kgmm²]</div><span class="tabulator-col-resize-handle"></span><div class="tabulator-cell" role="gridcell" tabulator-field="minValue" tabindex="0" style="width: 40px; text-align: right; height: 35px; background-color: rgb(204, 204, 204);"></div><span class="tabulator-col-resize-handle"></span><div class="tabulator-cell tabulator-editable" role="gridcell" tabulator-field="nomValue" tabindex="0" style="width: 40px; text-align: right; height: 35px;">0.00</div><span class="tabulator-col-resize-handle"></span><div class="tabulator-cell" role="gridcell" tabulator-field="maxValue" tabindex="0" style="width: 40px; text-align: right; height: 35px; background-color: rgb(204, 204, 204);"></div><span class="tabulator-col-resize-handle"></span></div><div class="tabulator-row tabulator-selectable tabulator-row-even" role="row"><div class="tabulator-cell" role="gridcell" tabulator-field="name" style="width: 78px; text-align: left; height: 35px;">Max. Motor Torque [Nm]</div><span class="tabulator-col-resize-handle"></span><div class="tabulator-cell" role="gridcell" tabulator-field="minValue" tabindex="0" style="width: 40px; text-align: right; height: 35px; background-color: rgb(204, 204, 204);"></div><span class="tabulator-col-resize-handle"></span><div class="tabulator-cell tabulator-editable" role="gridcell" tabulator-field="nomValue" tabindex="0" style="width: 40px; text-align: right; height: 35px;">0.00</div><span class="tabulator-col-resize-handle"></span><div class="tabulator-cell" role="gridcell" tabulator-field="maxValue" tabindex="0" style="width: 40px; text-align: right; height: 35px; background-color: rgb(204, 204, 204);"></div><span class="tabulator-col-resize-handle"></span></div><div class="tabulator-row tabulator-selectable tabulator-row-odd" role="row"><div class="tabulator-cell" role="gridcell" tabulator-field="name" style="width: 78px; text-align: left; height: 35px;">Transmission Worm - Worm Wheel [-]</div><span class="tabulator-col-resize-handle"></span><div class="tabulator-cell" role="gridcell" tabulator-field="minValue" tabindex="0" style="width: 40px; text-align: right; height: 35px; background-color: rgb(204, 204, 204);"></div><span class="tabulator-col-resize-handle"></span><div class="tabulator-cell tabulator-editable" role="gridcell" tabulator-field="nomValue" tabindex="0" style="width: 40px; text-align: right; height: 35px;">21.00</div><span class="tabulator-col-resize-handle"></span><div class="tabulator-cell" role="gridcell" tabulator-field="maxValue" tabindex="0" style="width: 40px; text-align: right; height: 35px; background-color: rgb(204, 204, 204);"></div><span class="tabulator-col-resize-handle"></span></div></div></div></div> 我的桌子宽度应该调整到所有缩放，以便它看起来像附加的第二张图片一样 [enter image description here][1] this.iShaftTabulatorHeaders = [ { title: "Type", field: "name", headerHozAlign: "left", width: "42%", headerSort: false, hozAlign: "left", editable: false }, { title: "Value", headerHozAlign: "center", width: "60%", columns: [ { title: "Min", field: "minValue", editor: "input",editable:editCheck, headerSort: false, width: "20%", hozAlign: "right", formatter: decimalFormatter , headerHozAlign: "right", cellEdited: validateIShaft , editorParams: { formatter: decimalFormatter }, }, { title: "Nom", field: "nomValue", editor: "input", headerSort: false, cellEdited: validateIShaft, width: "20%", hozAlign: "right", formatter: decimalFormatter, headerHozAlign: "right" , editorParams: { formatter: decimalFormatter } }, { title: "Max", field: "maxValue", editor: "input",editable:editCheck, cellEdited: validateIShaft, headerSort: false, width: "20%", hozAlign: "right", formatter: decimalFormatter, headerHozAlign: "right" , editorParams: { formatter: decimalFormatter } }, ], }, ]; this.ishaftTabulatorTable = new Tabulator("#ishaftTabulatorTable", { maxHeight: "100%", maxWidth: "100%", data: ishaftTableData, layout: "fitDataTable", headerSort: false, columns: this.iShaftTabulatorHeaders, }) [it is coming like this for my code ][1] [i want like this it should adjust for zooms][1] <div *ngIf="tableDataWorm!==null||tableDataWorm !== undefined||tableDataWorm.length !==0" id="ishaftTabulatorTable" style="max-height: 100%;max-width: 100%;position: relative;"></div> 您必须将媒体查询编写为自定义 CSS。您必须找到缩放级别和像素宽度之间的关系。因此，如果您通过使用媒体查询为各种设备定制网站，确保响应能力，则会自动考虑浏览器缩放级别。

JSON 到制表符表 - Javascript

我正在尝试将 JSON 从 URL 加载到制表符表中。我这里有一个 jsfiddle https://jsfiddle.net/liostse/2tdtyL6d/ var 表数据 = []; $.getJSON('http://88.99.13.199:3000/regionsdata', fu...

制表器 - 计算字段 TopCalc

我需要计算今年相对于去年的增长（（TY - LY）/LY）...我可以创建一个计算字段，但是我无法创建一个合适的函数来计算总增长。 我的

R 闪亮和制表符

我搜索了“r闪亮制表符”，预计结果多于零。在 R Shiny 应用程序中嵌入制表符是否可能？制表符事件可以发送回 R 吗？ 我创建了一个

如何从一页到另一页累计添加bottomCalc总和

我正在尝试逐页累积地添加来自bottomCalc的值。 BottomCalc 仅添加当前显示行的值。 { 标题: $t('table.amount'), 字段: '金额', headerHozAlig...

使用 updateDefinition({cssClass: ?}); 更新列定义后制表符网格滚动到左上角

制表器：如何添加合并制表器上多列的新行

有什么方法可以添加新行来合并制表器上的多个列？ 在此处输入图像描述类似这样，数据需要跨越多个列。 其他细节已添加

制表符网格在使用列 updateDefinition 时添加新列而不是更新 css 样式

来自 JavaScript 初学者的问题。我有一个用制表器网格创建的表格。我想在单击其中一个单元格时“选择”一列，并取消选择另一个单元格

动态添加和删除制表网格单元格中的 css 类

我想“选择”使用制表器网格创建的表中的一列。我想要实现的是将 css 类添加到选定的列： 我尝试通过添加 cellClick 函数来做到这一点...

制表符 - 呈现使用 HTML 格式化的列

我有一个制表符表，其中有一列用于我的图标。为了绘制图标，我将列数据存储为 HTML 文本，并将“formatter”列选择为“html”。 目前我的桌子上有一些

想在制表网格的每一列添加复选框吗？

我想将列名保存到数据库并要求用户选择需要保存的列，有没有办法为每个标题添加复选框来保存它？ 我不想选择任何行..我...

如何在制表符（sheetjs）中更改本地设置（在 Excel 中保存时用逗号分隔数字）

我开始积极使用 Tabulator 库，该库又使用了著名的 Sheetjs 库。但是当上传到 Excel 时，我得到一个点形式的小数分隔符，但在我们的区域设置 c...

制表符中的自定义排序名称？

知道如何将默认的 sort[0][field] 和 sort[0][dir] 参数更改为自定义名称（如 orderby 和 dir）吗？ 根据“请求 URL”文档，您可以使用“

如何在制表器中使特定单元格可编辑

在此输入图像描述 需要的 `initializeTabulatortableBng() { 让 classThis = this; 让 bngTableData = classThis.tableDataWorm; 函数十进制格式器（单元格）{ ...

制表符远程过滤清空输入字段

我注意到，当您过滤远程制表符时，不会保存查询并清空顶部栏中的搜索字段。 （下图） 我已经添加了桌子的底座。 在...中找不到任何内容

编辑单元格时按回车键，移动到下一个单元格进行编辑

使用制表符，如何设置它，以便当用户在编辑单元格的值后按 Enter 时，它会移动到下一个单元格（如 Tab）。我有一个表，其中仅第一列设置为

如何从元素获取表格或单元格和行对象

我有一个制表符表，每行的最后一列有以下图标，由自定义格式化程序设置： 函数（单元格，formatterParams，onRendered）{ 返回' 我有一个制表符表，每行的最后一列有以下图标，由自定义格式化程序设置： function(cell, formatterParams, onRendered){ return '<i class="bi bi-pencil row-edit"></i> <i class="bi bi-trash row-delete"></i>'; }; 单击任一图标时，我都会获得对接收单击事件的目标元素的引用。 如何从该元素中获取 cell 和 row？ 为了澄清，我意识到我可以监听 cellClick 事件并从中获取目标元素，但我想从元素中获取单元格。 您可以使用 cellClick 回调来获取 cell 和 row， 以及单击的元素。这是一个例子： const data = [ { id: 1, name: 'Billy Bob', age: '12', gender: 'male', height: 1, col: 'red', dob: '', cheese: 1 }, { id: 2, name: 'Mary May', age: '1', gender: 'female', height: 2, col: 'blue', dob: '14/05/1982', cheese: true }, { id: 10, name: 'Margret Marmajuke', age: '16', gender: 'female', height: 5, col: 'yellow', dob: '31/01/1999' } ] const table = new Tabulator('#table', { data: data, columns: [ { title: 'Name', field: 'name' }, { title: 'Age', field: 'age' }, { title: 'Gender', field: 'gender' }, { title: 'Height', field: 'height' }, { title: 'Color', field: 'col' }, { title: 'Edit', field: 'Edit', formatter: (cell, formatterParams, onRendered) => { return '<i class="bi bi-pencil row-edit"></i> <i class="bi bi-trash row-delete"></i>' }, cellClick: (e, cell) => { const icon = e.target.classList[2] const rowNum = cell.getRow().getPosition() const colName = cell.getColumn().getField() console.log(`'${icon}' icon of row ${rowNum} in '${colName}' column was clicked.`) } } ] }) <link href="https://unpkg.com/[email protected]/dist/css/tabulator.min.css" rel="stylesheet" /> <script type="text/javascript" src="https://unpkg.com/[email protected]/dist/js/tabulator.min.js"></script> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css" /> <div id="table"></div>

如何在制表符中显示嵌套列表数据

我的屏幕上有一个搜索和列表面板。对于列表页面，我使用制表符，因为我想显示嵌套数据。 js文件代码： 函数 onCheckClick() { var url = "/SomeContr...

React useState() 数组未在 useEffect() 内更新

从“react”导入{useState，useEffect}； 导入'react-tabulator/lib/styles.css'; 从 'react-tabulator' 导入 { ReactTabulator } 导出默认函数 Project() { 常量 [项目...