tabulator - 如果标题是嵌套的，制表器不会调整列标题的高度
问题描述
制表器版本：4.8
我已经尝试了几个小时，但我被卡住了。
列标题的高度不会在标题第二行中自动调整。隐藏了列的重要文本。
所以，如果你有一个很长的标题，如“Anzahl Böden”或“Tragkraft pro Boden”，如果你的屏幕尺寸不够大，你只会看到第一个单词。
/* tabulator */
var locale_number_formatter = function(cell, formatterParams, onRendered){
var nf = new Intl.NumberFormat();
return nf.format( cell.getValue() );
}
function is_mobile() {
var is_mobile = true;
if ($(window).width() >= 768) {
is_mobile = false;
}
return is_mobile;
}.is-hidden
{
display: none;
}
.tabulator .tabulator-header .tabulator-col .tabulator-col-content .tabulator-col-title {
white-space: normal !important;
text-overflow: clip;
}<link href="https://cdnjs.cloudflare.com/ajax/libs/tabulator/4.8.4/css/tabulator.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tabulator/4.8.4/js/tabulator.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1>
Table test
</h1>
<div id="product-table-2371">
</div>
<div id="hidden-table-2371">
</div>
<script>
document.addEventListener("DOMContentLoaded", function(event) {
var cart_formatter_2371 = function(cell, formatterParams, onRendered) {
return '<button title="In den Warenkorb" class="button cart-table-button cart-table-button-2371 is-primary has-text-white is-size-7 modal-button" data-object-id="238" data-attribute-id="2371" data-variation-id="' + cell.getValue() + '" aria-haspopup="true" data-table-id="table_2371">Warenkorb</button>';
};
var responsive_layout_formatter_2371 = function(data) {
//data - an array of objects containing the column title and value for each cell
var table_data = [];
data.forEach(function(col) {
table_data.push({
'column': col.title,
celldata: col.value
});
});
var responsive_table_2371 = Tabulator.prototype.findTable("#hidden-table-2371")[0];
if (!responsive_table_2371) {
responsive_table_2371 = new Tabulator("#hidden-table-2371", {
tooltips: true,
autoColumns: true,
"headerVisible": false,
layout: 'fitColumns',
tooltipGenerationMode: "hover",
tooltipsHeader: true,
data: table_data
});
} else {
responsive_table_2371.clearData();
responsive_table_2371.clearFilter();
responsive_table_2371.setData(table_data);
}
//var table_html = responsive_table_2371.tabulator( "getHtml" );
var table_html = '';
return Object.keys(data).length ? table_html : "";
}
var cart_button_cell_click_2371 = function(e, cell) {
// dummy
};
var columns_json_2371 = [{
"title": "",
"tooltip": "",
"cssClass": "tabulator-header-row-level-2",
"columns": [{
"formatter": "plaintext",
"field": "no",
"title": "Nr.",
"hozAlign": "right",
"vertAlign": "middle",
"width": 60,
"resizable": false,
"responsive": 2
}, {
"field": "height",
"cssClass": "tabulator-col-height",
"title": "H\u00f6he",
"tooltip": "H\u00f6he in mm",
"sorter": "number",
"formatter": locale_number_formatter,
"titleFormatter": "textarea",
"variableHeight": true,
"hozAlign": "right",
"vertAlign": "middle",
"responsive": 2
}, {
"field": "length",
"cssClass": "tabulator-col-length",
"title": "L\u00e4nge",
"tooltip": "L\u00e4nge in mm",
"sorter": "number",
"formatter": locale_number_formatter,
"titleFormatter": "textarea",
"variableHeight": true,
"hozAlign": "right",
"vertAlign": "middle",
"responsive": 2
}, {
"field": "depth",
"cssClass": "tabulator-col-depth",
"title": "Tiefe",
"tooltip": "Tiefe in mm",
"sorter": "number",
"formatter": locale_number_formatter,
"titleFormatter": "textarea",
"variableHeight": true,
"hozAlign": "right",
"vertAlign": "middle",
"responsive": 2
}, {
"field": "lowershelf",
"cssClass": "tabulator-col-lowershelf",
"title": "Anzahl B\u00f6den",
"tooltip": "Anzahl der Fachb\u00f6den pro Regalfeld",
"sorter": "number",
"formatter": locale_number_formatter,
"titleFormatter": "textarea",
"variableHeight": true,
"hozAlign": "right",
"vertAlign": "middle",
"responsive": 2
}, {
"field": "tragkraft_pro_boden",
"cssClass": "tabulator-col-tragkraft_pro_boden",
"title": "Tragkraft pro Boden",
"tooltip": "Tragkraft pro Boden in kg",
"sorter": "string",
"formatter": "plaintext",
"titleFormatter": "textarea",
"variableHeight": true,
"hozAlign": "right",
"vertAlign": "middle",
"responsive": 2
}]
}, {
"title": "Grundregal",
"tooltip": "Hier steht das Grundregal",
"cssClass": "tabulator-header-row-level-2",
"columns": [{
"field": "sku",
"cssClass": "tabulator-col-sku",
"title": "Art.Nr.",
"tooltip": "Artikelnummer des Produkts",
"sorter": "alphanum",
"formatter": "plaintext",
"titleFormatter": "textarea",
"variableHeight": true,
"hozAlign": "right",
"vertAlign": "middle",
"responsive": 2
}, {
"field": "price",
"cssClass": "tabulator-col-price",
"title": "Preis",
"tooltip": "Produktpreis",
"sorter": "number",
"formatter": "money",
"titleFormatter": "textarea",
"variableHeight": true,
"formatterParams": {
"decimal": ",",
"thousand": ".",
"symbol": " \u20ac",
"symbolAfter": true,
"precision": "2"
},
"hozAlign": "right",
"vertAlign": "middle",
"responsive": 2
}, {
"field": "cart",
"formatter": cart_formatter_2371,
"cellClick": cart_button_cell_click_2371,
"hozAlign": "center",
"vertAlign": "middle",
"tooltip": "In den Warenkorb",
"title": "",
"cssClass": "tabulatur-background-price",
"headerSort": false,
"responsive": 2
}]
}, {
"title": "Anbauregal",
"tooltip": "Hier ist das Anbauregal",
"cssClass": "tabulator-header-row-level-2",
"columns": [{
"field": "sku_1",
"formatter": "plaintext",
"hozAlign": "center",
"vertAlign": "middle",
"sorter": "alphanum",
"title": "Art.Nr.",
"tooltip": "Artikelnummer des Produkts",
"cssClass": "tabulatur-background-anbauregal",
"responsive": 2
}, {
"field": "price_1",
"formatter": "money",
"hozAlign": "center",
"vertAlign": "middle",
"sorter": "number",
"title": "Preis",
"cssClass": "tabulatur-background-anbauregal",
"formatterParams": {
"decimal": ",",
"thousand": ".",
"symbol": " \u20ac",
"symbolAfter": true,
"precision": "2"
},
"responsive": 2
}, {
"field": "cart_1",
"formatter": cart_formatter_2371,
"cellClick": cart_button_cell_click_2371,
"hozAlign": "center",
"vertAlign": "middle",
"tooltip": "In den Warenkorb",
"title": "",
"cssClass": "tabulatur-background-anbauregal",
"headerSort": false,
"responsive": 2
}]
}];
var tabledata_2371 = [{
"height": "2000",
"length": "1000",
"depth": "300",
"lowershelf": "5",
"tragkraft_pro_boden": "250 kg",
"sku": "S2626",
"price": "145",
"cart": "307831",
"sku_1": "S2646",
"price_1": "108.1",
"cart_1": "307847",
"no": 1
}, {
"height": "2000",
"length": "1000",
"depth": "400",
"lowershelf": "5",
"tragkraft_pro_boden": "250 kg",
"sku": "S2627",
"price": "154.7",
"cart": "307832",
"sku_1": "S2647",
"price_1": "117.1",
"cart_1": "307848",
"no": 2
}, {
"height": "2000",
"length": "1000",
"depth": "500",
"lowershelf": "5",
"tragkraft_pro_boden": "250 kg",
"sku": "S2628",
"price": "173.2",
"cart": "307833",
"sku_1": "S2648",
"price_1": "134.6",
"cart_1": "307849",
"no": 3
}, {
"height": "2000",
"length": "1000",
"depth": "600",
"lowershelf": "5",
"tragkraft_pro_boden": "250 kg",
"sku": "S2629",
"price": "189.2",
"cart": "307834",
"sku_1": "S2649",
"price_1": "149.6",
"cart_1": "307850",
"no": 4
}, {
"height": "2000",
"length": "1000",
"depth": "800",
"lowershelf": "5",
"tragkraft_pro_boden": "250 kg",
"sku": "S2630",
"price": "213.5",
"cart": "307835",
"sku_1": "S2650",
"price_1": "171.7",
"cart_1": "307851",
"no": 5
}, {
"height": "2000",
"length": "1300",
"depth": "300",
"lowershelf": "5",
"tragkraft_pro_boden": "250 kg",
"sku": "S2633",
"price": "178.3",
"cart": "307836",
"sku_1": "S2653",
"price_1": "140.5",
"cart_1": "307852",
"no": 6
}, {
"height": "2000",
"length": "1300",
"depth": "400",
"lowershelf": "5",
"tragkraft_pro_boden": "250 kg",
"sku": "S2634",
"price": "194.3",
"cart": "307837",
"sku_1": "S2654",
"price_1": "155.8",
"cart_1": "307853",
"no": 7
}, {
"height": "2000",
"length": "1300",
"depth": "500",
"lowershelf": "5",
"tragkraft_pro_boden": "250 kg",
"sku": "S2635",
"price": "218.9",
"cart": "307838",
"sku_1": "S2655",
"price_1": "179.3",
"cart_1": "307854",
"no": 8
}, {
"height": "2000",
"length": "1300",
"depth": "600",
"lowershelf": "5",
"tragkraft_pro_boden": "250 kg",
"sku": "S2636",
"price": "236",
"cart": "307839",
"sku_1": "S2656",
"price_1": "195.5",
"cart_1": "307855",
"no": 9
}, {
"height": "2000",
"length": "1300",
"depth": "800",
"lowershelf": "5",
"tragkraft_pro_boden": "250 kg",
"sku": "S2637",
"price": "300.3",
"cart": "307840",
"sku_1": "S2657",
"price_1": "257.6",
"cart_1": "307856",
"no": 10
}, {
"height": "3000",
"length": "1300",
"depth": "500",
"lowershelf": "7",
"tragkraft_pro_boden": "250 kg",
"sku": "S2715",
"price": "322",
"cart": "307898",
"sku_1": "S2735",
"price_1": "258.9",
"cart_1": "307912",
"no": 38
}, {
"height": "3000",
"length": "1300",
"depth": "600",
"lowershelf": "7",
"tragkraft_pro_boden": "250 kg",
"sku": "S2716",
"price": "346.2",
"cart": "307899",
"sku_1": "S2736",
"price_1": "281.6",
"cart_1": "307913",
"no": 39
}, {
"height": "3000",
"length": "1300",
"depth": "800",
"lowershelf": "7",
"tragkraft_pro_boden": "250 kg",
"sku": "S2717",
"price": "436.6",
"cart": "307900",
"sku_1": "S2737",
"price_1": "368.7",
"cart_1": "307914",
"no": 40
}, {
"height": "3000",
"length": "1000",
"depth": "300",
"lowershelf": "7",
"tragkraft_pro_boden": "330 kg",
"sku": "S2961",
"price": "239.6",
"cart": "307901",
"sku_1": "S2971",
"price_1": "180.8",
"cart_1": "307915",
"no": 41
}, {
"height": "3000",
"length": "1000",
"depth": "400",
"lowershelf": "7",
"tragkraft_pro_boden": "330 kg",
"sku": "S2962",
"price": "263.2",
"cart": "307902",
"sku_1": "S2972",
"price_1": "203.5",
"cart_1": "307916",
"no": 42
}, {
"height": "3000",
"length": "1000",
"depth": "500",
"lowershelf": "7",
"tragkraft_pro_boden": "330 kg",
"sku": "S2963",
"price": "291.5",
"cart": "307903",
"sku_1": "S2973",
"price_1": "230.2",
"cart_1": "307917",
"no": 43
}, {
"height": "3000",
"length": "1000",
"depth": "600",
"lowershelf": "7",
"tragkraft_pro_boden": "330 kg",
"sku": "S2964",
"price": "316.1",
"cart": "307904",
"sku_1": "S2974",
"price_1": "253.2",
"cart_1": "307918",
"no": 44
}, {
"height": "3000",
"length": "1000",
"depth": "800",
"lowershelf": "7",
"tragkraft_pro_boden": "330 kg",
"sku": "S2965",
"price": "349.5",
"cart": "307919",
"sku_1": "S2975",
"price_1": "283.5",
"cart_1": "307920",
"no": 45
}];
var table_layout_2371 = 'fitColumns';
var paginationSize_2371 = 10;
if (is_mobile()) {
table_layout_2371 = 'fitData';
paginationSize_2371 = 1;
}
var table_2371 = new Tabulator("#product-table-2371", {
"data": tabledata_2371,
"locale": "de-de",
"columnHeaderVertAlign": "bottom",
"langs": {
"de-de": {
"pagination": {
"page_size": "Einträge pro Seite",
"page_title": "Seite anzeigen",
"first": "Erste",
"first_title": "Erste Seite",
"last": "Letzte",
"last_title": "Letzte Seite",
"prev": "Zurück",
"prev_title": "Zurück",
"next": "Weiter",
"next_title": "Nächste Seite",
"all": "Alle"
}
}
},
"tooltips": true,
"pagination": 'local',
"paginationSize": paginationSize_2371,
"paginationSizeSelector": true,
"paginationSizeSelector": [1, 5, 10, 25, 50, 100],
"responsiveLayout": "collapse",
"layout": table_layout_2371,
initialSort: [{
"column": "height",
"dir": "asc"
}],
"selectable": true,
"tooltipGenerationMode": "hover",
"tooltipsHeader": true,
"responsiveLayoutCollapseFormatter": responsive_layout_formatter_2371,
"columns": columns_json_2371
});
table_2371.clearData();
table_2371.clearFilter();
table_2371.setData(tabledata_2371);
var table_filter_2371 = $(".product-filter-2371");
if (table_filter_2371.length) {
table_filter_2371.change(function() {
table_2371.clearFilter();
var filter_array_2371 = [];
$(".product-filter-2371").each(function() {
if ($(this).val() !== '') {
filter_array_2371.push({
'field': $(this).data('column'),
'type': '=',
'value': $(this).val()
});
}
});
table_2371.setFilter(filter_array_2371);
});
}
});
</script>有任何想法吗？
最好的，乔治。
解决方案
推荐阅读
- python - python requests.post 总是给出 400 错误请求
- time-series - 使用 group_by 将数据转换为时间序列 ts()
- rxjs - 如果项目少于缓冲区计数，如何在发射时获得与 bufferCount 类似的行为
- typescript - FaunaDB：文档类型应该如何导入？
- html - Bootstrap 4卡页脚填充列的剩余高度
- apache-spark - RDD中用户定义的哈希分区与键
- python - 如何在 Python 上使用 map 和 set
- filter - 防止加载有 100 万成员的过滤器
- c# - 如何将捐赠金额添加到我的数据库
- spring - 将可分页对象和搜索参数发送到 Spring Boot 端点