Tabulator JS:加载数据后列未渲染

huangapple go评论78阅读模式
英文:

Tabulator JS: After loading data column not rendering

问题

after i loading the data via ajax in [tabulatorJS][1], the column header titles changed to data value name.
The ajax response is a java object, which has the same attribute names as the field name in tabulator columns.
The response you can see at bottom of this article.
[Data found][2]

If no data found the table was rendered correctly.
[No data found][3]
table = new Tabulator("#table-div", {
    ajaxURL: '/loadDataObject.do',
    ajaxConfig: 'GET',
    ajaxParams: {name: $('#name').val()},
    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', editor: 'input', 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', width: 70, cssClass: 'disabled item-length'},
        {title: $.i18n.prop('table.item_width'), field: 'itemWidth', width: 70, cssClass: 'disabled item-width'},
        {title: $.i18n.prop('table.item_height'), field: 'itemHeight', width: 70, cssClass: 'disabled item-height'},
        {title: $.i18n.prop('table.warehouse_storage_unit'), field: 'warehouseStorageUnit', width: 70, cssClass: 'disabled warehouse-storage-unit'},
        {title: $.i18n.prop('table.position_text'), field: 'positionText', editor: 'input', width: 200}]
});
AJAX-Response

[
    {
        "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":""
    }
]

<details>
<summary>英文:</summary>
after i loading the data via ajax in [tabulatorJS][1], the column header titles changed to data value name.
The ajax response is a java object, which has the same attribute names as the field name in tabulator columns.
The response you can see at bottom of this article.
[Data found][2]
If no data found the table was rendered correctly.
[No data found][3]
Have you any idea?
table = new Tabulator(&quot;#table-div&quot;, {
ajaxURL: &#39;/loadDataObject.do&#39;,
ajaxConfig: &#39;GET&#39;,
ajaxParams: {name: $(&#39;#name&#39;).val()},
// data: dataObject,
responsiveLayout: true,
keybindings: true,
locale: true,
langs: {
&quot;de-de&quot;: {
}
},
movableColumns: true,
movableRows: true,
resizableRows: false,
headerSort: false,
autoColumns: true,
autoResize: true,
layout: &#39;fitColumns&#39;,
placeholder: $.i18n.prop(&#39;table.no_data_found&#39;),
columns: [
{rowHandle:true, formatter:&quot;handle&quot;, headerSort:false, frozen:true, width:30, minWidth:30, cssClass: &#39;disabled&#39;},
{title: $.i18n.prop(&#39;table.pos_number&#39;), field: &#39;posNumber&#39;, editor: &#39;input&#39;, width: 40},
{title: $.i18n.prop(&#39;table.symbol&#39;), field: &#39;classSymbol&#39;, width: 45, cssClass: &#39;disabled item-symbol&#39;},
{title: $.i18n.prop(&#39;table.item_work_operation_number&#39;), field: &#39;itemNumber&#39;, editor: &#39;input&#39;, width: 70, cssClass: &#39;item-number text-uppercase&#39;},
{title: $.i18n.prop(&#39;table.item_work_operation_name&#39;), field: &#39;itemName&#39;, width: 300, cssClass: &#39;disabled item-name&#39;},
{title: $.i18n.prop(&#39;table.item_length&#39;), field: &#39;itemLength&#39;, width: 70, cssClass: &#39;disabled item-length&#39;},
{title: $.i18n.prop(&#39;table.item_width&#39;), field: &#39;itemWidth&#39;, width: 70, cssClass: &#39;disabled item-width&#39;},
{title: $.i18n.prop(&#39;table.item_height&#39;), field: &#39;itemHeight&#39;, width: 70, cssClass: &#39;disabled item-height&#39;},
{title: $.i18n.prop(&#39;table.warehouse_storage_unit&#39;), field: &#39;warehouseStorageUnit&#39;, width: 70, cssClass: &#39;disabled warehouse-storage-unit&#39;},
{title: $.i18n.prop(&#39;table.position_text&#39;), field: &#39;positionText&#39;, editor: &#39;input&#39;, width: 200}]);
AJAX-Response
[
{
&quot;posNumber&quot;:&quot;1&quot;,
&quot;classSymbol&quot;:&quot;fa-shopping-cart&quot;,
&quot;itemNumber&quot;:&quot;V000092&quot;,
&quot;itemName&quot;:&quot;Test asd asd a         &quot;,
&quot;itemLength&quot;:1234000.34,
&quot;itemWidth&quot;:0.0,
&quot;itemHeight&quot;:0.0,
&quot;warehouseStorageUnit&quot;:&quot;mm&quot;,
&quot;positionText&quot;:&quot;jsdfakjfj&#246;q&quot;,
&quot;quantity&quot;:12.0,
&quot;fCode&quot;:&quot;ML&quot;,
&quot;benefit&quot;:12.0,
&quot;cutLength&quot;:0.0,
&quot;cutWidth&quot;:0.0,
&quot;cutHeight&quot;:0.0,
&quot;edge&quot;:&quot;H&quot;,
&quot;edgeProperty&quot;:&quot;&quot;,
&quot;provisionType&quot;:&quot;&quot;
}
]
[1]: http://tabulator.info/
[2]: https://i.stack.imgur.com/yBaDb.png
[3]: https://i.stack.imgur.com/3ArUi.png
</details>
# 答案1
**得分**: 0
这是因为您启用了 ***autoColumns***。
启用自动列功能后,它将根据返回的数据自动创建表格列。
如果您想首先定义列,那么在设置表格时,只需不定义 ***autoColumns*** 选项。
<details>
<summary>英文:</summary>
This is happening because you have ***autoColumns*** enabled.
With auto columns enabled it will automatically create the tables columns based on the data returened.
If you want to define the columns first the you should simply not define the ***autoColumns*** option in your table setup
</details>

huangapple
  • 本文由 发表于 2020年10月7日 22:38:23
  • 转载请务必保留本文链接:https://go.coder-hub.com/64246427.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定