tabulator 相关问题

Tabulator是一个生成JavaScript库的表。它在操纵表格及其中的所有信息方面非常灵活。它还允许外部加载和保存。它可以处理HTML，CSV，XML和JSON。见http://tabulator.info/

我在 spring-boot 中使用制表符，想要在页面上选择一个单元格，在文档中我只找到了一个范围选择，但我只需要选择一个单元格（格式化程序：“textarea:）。设置后

select cell tabulator

回答 1 投票 0

我在单元格内显示嵌套的制表符表。这是您需要复制的所有代码：我在单元格内显示嵌套制表符表。这是您需要复制的所有代码： <html> <head> <link href="https://unpkg.com/[email protected]/dist/css/tabulator.min.css" rel="stylesheet"> </head> <body> <div id="example-table"></div> <script type="text/javascript" src="https://unpkg.com/[email protected]/dist/js/tabulator.min.js"></script> <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/[email protected]/build/global/luxon.min.js"></script> <script> //define some sample data, with the sub-table data held in the subtable parameter var tableData = [ {id:1, parent:"Bob", children:[{child:"Craig", age:18}]}, {id:2, parent:"Ann", children:[{child:"Bella", age:14}, {child:"Shaun", age:11}]}, {id:3, parent:"Jim", children:[{child:"David", age:15}, {child:"Alice", age:17}]}, ]; let table = new Tabulator("#example-table", { height:200, data:tableData, layout:"fitDataFill", columns:[ {title:"Id", field:"id"}, {title:"Parent", field:"parent"}, {title:"Children", field:"children", formatter:function(cell, formatterParams, onRendered){ //create and style holder elements let holderEl = document.createElement("div"); let tableEl = document.createElement("div"); holderEl.appendChild(tableEl); let subTable = new Tabulator(tableEl, { layout:"fitDataStretch", headerVisible:false, data:cell.getValue(), columns:[ {title:"Child", field:"child"}, {title:"Age", field:"age"} ] }) cell.getRow().normalizeHeight(); return holderEl; }, }, ], }); </script> </body> </html> 输出：问题：如何设置嵌套表格行的样式，使其具有与父行相同的背景颜色？贝拉和肖恩应该与安具有相同的背景颜色。大卫和爱丽丝应该与吉姆具有相同的背景颜色。这是一个技巧，您可以使用父行的索引来确定颜色。 columns:[ {title:"Id", field:"id"}, {title:"Parent", field:"parent"}, {title:"Children", field:"children", formatter:function(cell, formatterParams, onRendered){ //create and style holder elements let holderEl = document.createElement("div"); let tableEl = document.createElement("div"); holderEl.appendChild(tableEl); // calculate parent row backgrount color let backgroundColor = 'white'; if (cell.getRow().getIndex() % 2 == 0) {backgroundColor = 'rgb(239, 239, 239)';} let subTable = new Tabulator(tableEl, { layout:"fitDataStretch", headerVisible:false, data:cell.getValue(), columns:[ {title:"Child", field:"child"}, {title:"Age", field:"age"} ], // set nested row background color rowFormatter: function(row){ const children = row.getElement().childNodes; children.forEach((child) => { child.style.backgroundColor = backgroundColor; }); }, }) cell.getRow().normalizeHeight(); return holderEl; }, }, ],

css nested background grid tabulator

回答 1 投票 0

制表符 - 将子表添加到多表头表的表头中

我有一个制表表，其中有多个带组的标题，即标题和副标题。我想向此演示中列出的标题“子标题”添加一个子表。我有一个制表表，其中有多个带有组的标题，即标题和副标题。我想向此演示中列出的标题“子标题”添加一个子表。 <https://jsfiddle.net/4gatx38n/1/> 请告诉我如何添加？如果它们与列无关，那么您可以将它们粘贴在表格上方的 div 中。如果您正在谈论分组列，那么制表符通过在列定义中使用嵌套对象来内置该功能 var table = new Tabulator("#example-table", { columnHeaderVertAlign:"bottom", //align header contents to bottom of cell columns:[ {title:"Name", field:"name", width:160}, {//create column group title:"Work Info", columns:[ {title:"Progress", field:"progress", hozAlign:"right", sorter:"number", width:100}, {title:"Rating", field:"rating", hozAlign:"center", width:80}, {title:"Driver", field:"car", hozAlign:"center", width:80}, ], }, {//create column group title:"Personal Info", columns:[ {title:"Gender", field:"gender", width:90}, {title:"Favourite Color", field:"col", width:140}, {title:"Date Of Birth", field:"dob", hozAlign:"center", sorter:"date", width:130}, ], }, ], }); 有关完整详细信息，请查看列分组文档

nested tabulator nested-table

回答 1 投票 0

制表符表中更新了 50000 行

我面临的问题是我尝试使用 addData 方法更新 50000 行，但屏幕卡住并且应用程序没有响应。如果我使用 setData 方法，我会遇到类似 scr 的问题...

tabulator

回答 1 投票 0

tabulator.js：rownum 以 0 开头

在 tabulator.js 下使用“rownum”格式化程序时，有没有办法以 0（而不是 1）开头？版本：6.2 {标题：“自动”，字段：“自动”，宽度：10，标题排序：fa...

format tabulator

回答 1 投票 0

重新创建制表器后，autoColumns 的旧制表器标题信息仍保留在内存中

我在 Tabulator 6.2 中使用了 autoColumns，并将几周的日期自动设置为列（image1）。作为测试，我多次针对同一个表（#forecastTable）执行新的 Tabulator 命令，但我没有...