javascript - dynatable 中的表打印未定义的行

Question

我在我的服务器上安装了动态表插件，我想根据用 JSON 编写的数据创建表格。我的脚本表:

<table class="table table-striped" id="local-json">
    <thead>
                                  <tr>
                                    <th>Status</th>
                                    <th>MPK</th>
                                    <th>Restaurant Name</th>
                                    <th>Phone Number</th>
                                    <th>Project Start Date</th>
                                    <th>Project End Sales Date</th>
                                    <th>Project Installation Date</th>
                                    <th>Project End Date</th>
                                    <th>General Manager</th>
                                    <th>IT Manager</th>
                                    <th>Edit</th>
                                  </tr>
                                </thead>
<tbody></tbody>
</table>

<script type="text/javascript">
$(document).ready(function(){
var json_url = 'wszystkie_prace.json';
$.getJSON(json_url, function(data) {
    $('#local-json').dynatable({
        dataset: {
            records: JSON.parse(JSON.stringify(data))
        }
    });
});
});
</script>

我的 wszystkie_prace.json 文件如下所示:

[
    {
        "Project Type": "Opening Restaurant",
        "MPK": "108006",
        "Old MPK": "234",
        "Restaurant Name": "PL SBX Restauracja Test1",
        "Phone Number": "+48111222333",
        "Project Start Date": "Apr  6 2016 10:00:00:000PM",
        "Project End Sales Date": "Apr  7 2016 10:00:00:000PM",
        "Project Installation Date": "Apr  6 2016 10:00:00:000PM",
        "Project End Date": "Apr  9 2016 10:00:00:000PM",
        "Restaurant Manager": "Zenon Pietrucha",
        "IT Manager": "Andrzej Marchewka",
        "Notes": "Notatka random sdijbwodenhwoidchwoncdown"
    },
    {
        "Project Type": "Closing Restaurant",
        "MPK": "103120",
        "Old MPK": "2134",
        "Restaurant Name": "PL KFC Restauracja Test2",
        "Phone Number": "+48123123123",
        "Project Start Date": "May  2 2016 06:00:00:000AM",
        "Project End Sales Date": "May  3 2016 08:00:00:000PM",
        "Project Installation Date": "May  7 2016 06:00:00:000AM",
        "Project End Date": "May  8 2016 06:00:00:000AM",
        "Restaurant Manager": "Tomasz Ziemniak",
        "IT Manager": "Andrzej Marchewka",
        "Notes": "sodicmwpd efvwefvwefv wefvwefv wefvwe fv ewfvwe\r\nfvwef\r\nvwe\r\nfv\r\nwefv\r\nwef"
    }
]

我正在关注官方文档 ( https://www.dynatable.com/#existing-json )，但我得到的只是一组 undefined。

行数还行，就是不知道怎么处理这个问题。

Answer 1

你的代码没问题，你只需要在你的 wszystkie_prace.json 文件中改变关键文字的命名风格，比如项目类型等，dyntable 遵循驼峰式大小写来命名 json 中的键，所以当有一个单词时，它全部进入小写 比如 MKP as mkp，如果是多词就应该写成驼峰式 eg.Project Type as projectType 前者是你写在 tr 标签里面的 th 后面是对应你写的 json 中的 key

供引用

JSON

[{
    "projectType": "Opening Restaurant",
    "mpk": "108006",
    "oldMpk": "234",
    "restaurantName": "PL SBX Restauracja Test1",
    "phoneNumber": "+48111222333",
    "projectStartDate": "Apr  6 2016 10:00:00:000PM",
    "projectEndSalesDate": "Apr  7 2016 10:00:00:000PM",
    "projectInstallationDate": "Apr  6 2016 10:00:00:000PM",
    "projectEndDate": "Apr  9 2016 10:00:00:000PM",
    "restaurantManager": "Zenon Pietrucha",
    "itManager": "Andrzej Marchewka",
    "notes": "Notatka random sdijbwodenhwoidchwoncdown"
},

//more stuff for other rows

]

HTML

<table class="table table-striped" id="local-json">
<thead>
       <tr>
               <tr>Status</tr> <!--undefined since we didn't supply the value in json-->
               <th>Project Type</th>
               <th>MPK</th>
               <th>Restaurant Name</th>
               <th>Phone Number</th>
               <th>Project Start Date</th>
               <th>Project End Sales Date</th>
               <th>Project Installation Date</th>
               <th>Project End Date</th>
               <th>General Manager</th>
               <th>IT Manager</th>
               <th>Edit</th>
       </tr>
</thead>
<tbody></tbody>
</table>

更新:抱歉，我不知道(很长时间以来没有使用动态表)，但看起来现在还有 4 种可用的命名格式。

我建议你使用小写格式，因为我发现它最直接

将脚本更改为

<script type="text/javascript">
$(document).ready(function(){
var json_url = 'wszystkie_prace2.json';
$.getJSON(json_url, function(data) {
$('#local-json').dynatable({
   table: {
       defaultColumnIdStyle: 'lowercase'
   },

   dataset: {
          records: JSON.parse(JSON.stringify(data))
   }
});
});
});
</script>

新的json

[
    {
    "project type": "Opening Restaurant",
    "mpk": "108006",
    "old mpk": "234",
    "restaurant name": "PL SBX Restauracja Test1",
    "phone number": "+48111222333",
    "project start date": "Apr  6 2016 10:00:00:000PM",
    "project end sales ate": "Apr  7 2016 10:00:00:000PM",
    "project installation date": "Apr  6 2016 10:00:00:000PM",
    "project end date": "Apr  9 2016 10:00:00:000PM",
    "restaurant manager": "Zenon Pietrucha",
    "it manager": "Andrzej Marchewka",
    "notes": "Notatka random sdijbwodenhwoidchwoncdown",
    "general manager" : "mr .cool",
    "status" : "Active"
    }
]

如果愿意探索其他命名格式 https://www.dynatable.com/#converting-attribute-names