制表器JS：加载数据列后未呈现

编程问答 2022-06-09

问题描述

在tabulatorJS中通过ajax加载数据后，列标题更改为数据值名称。 ajax响应是一个Java对象，其属性名称与制表符列中的字段名称相同。 您可以在本文底部看到响应。 Data found

如果未找到数据，则表已正确呈现。 No data found

你有什么主意吗？

table = new Tabulator("#table-div",{
    ajaxURL: '/loadDataObject.do',ajaxConfig: 'GET',ajaxParams: {name: $('#name').val()},// data: dataObject,responsiveLayout: true,keybindings: true,locale: true,langs: {
        "de-de": {
        }
    },movableColumns: true,movableRows: true,resizableRows: false,headerSort: false,autoColumns: true,autoResize: true,layout: 'fitColumns',placeholder: $.i18n.prop('table.no_data_found'),columns: [
        {rowHandle:true,formatter:"handle",headerSort:false,frozen:true,width:30,minWidth:30,cssClass: 'disabled'},{title: $.i18n.prop('table.pos_number'),field: 'posNumber',editor: 'input',width: 40},{title: $.i18n.prop('table.symbol'),field: 'classSymbol',width: 45,cssClass: 'disabled item-symbol'},{title: $.i18n.prop('table.item_work_operation_number'),field: 'itemNumber',width: 70,cssClass: 'item-number text-uppercase'},{title: $.i18n.prop('table.item_work_operation_name'),field: 'itemName',width: 300,cssClass: 'disabled item-name'},{title: $.i18n.prop('table.item_length'),field: 'itemLength',cssClass: 'disabled item-length'},{title: $.i18n.prop('table.item_width'),field: 'itemWidth',cssClass: 'disabled item-width'},{title: $.i18n.prop('table.item_height'),field: 'itemHeight',cssClass: 'disabled item-height'},{title: $.i18n.prop('table.warehouse_storage_unit'),field: 'warehouseStorageUnit',cssClass: 'disabled warehouse-storage-unit'},{title: $.i18n.prop('table.position_text'),field: 'positionText',width: 200}]);

AJAX响应

[
       {
          "posNumber":"1","classSymbol":"fa-shopping-cart","itemNumber":"V000092","itemName":"Test asd asd a         ","itemLength":1234000.34,"itemWidth":0.0,"itemHeight":0.0,"warehouseStorageUnit":"mm","positionText":"jsdfakjfjöq","quantity":12.0,"fCode":"ML","benefit":12.0,"cutLength":0.0,"cutWidth":0.0,"cutHeight":0.0,"edge":"H","edgeProperty":"","provisionType":""
       }
    ]

解决方法

之所以会这样，是因为您启用了 autoColumns 。

启用自动列后，它将根据重新设置的数据自动创建表列。

如果您要首先定义列，则不应该在表设置中定义 autoColumns 选项

javajavajavascriptjquerytabulator