javascript - 如何从 json 填充 footable

Question

我有像这样定义footable的html代码

              <table class="table toggle-circle" id="exampleRowToggler">
                <thead>
                  <tr>
                    <th data-field="marca">Marca</th>
                        <th data-field="modelo">Modelo</th>
                        <th data-field="placa">Placa</th>
                        <th data-field="chasis">Chasis</th>
                        <th data-field="vigencia_desde">Vigencia Desde</th>
                        <th data-field="vigencia_hasta">Vigendia Hasta</th>
                    <th data-hide="all">Clausulas</th>
                    <th data-hide="all">Exclusiones</th>
                    <th data-hide="all">Beneficios</th>
                    <th data-hide="all">Deducibles</th>
                    <th data-hide="all">Coberturas</th>
                  </tr>
                </thead>
                <tbody>
                </tbody>
              </table>

我想从一个 .js 文件填充它，该文件包含一个带有 json 数据的函数，如下所示。我尝试了一些选项，但仍然无法得到它，我最后尝试的就是这个。

loadTable: function () {

            var bt_data = [{
                    "marca": "HYUNDAI",
                    "modelo": "IONIQ",
                    "placa": "T02096577",
                    "chasis":"KMHC851CGHU029520",
                    "vigencia_desde":"22/05/2017",
                    "vigencia_hasta":"22/05/2018",
                    "clausulas": "clauuuuuusulaaas",
                    "exclusiones": "eeexclusioooonesss",
                    "beneficios": "beeeeneeefiiiciiiooosss",
                    "deducibles":"deeeeduuuuciiiibleeeessss",
                    "coberturas":"cooooobeeeertuuuuraaaasssss"
                }];

                    $('#exampleRowToggler').footable({
                        "useParentWidth": true,
                        "columns": $.get('columns.bt_data'),
                        "rows": $.get('rows.bt_data')
                    });
        }

请帮帮我。

Answer 1

除非您有一个服务器端页面监听“columns.bt_data”和“rows.bt_data”URL 并返回相关的 JSON/数组响应，否则您传递给 footable 的列和行值将不会产生任何结果.

这就是我认为您想做的事情:

loadTable: function () {
    var bt_data = [{
        "marca": "HYUNDAI",
        "modelo": "IONIQ",
        "placa": "T02096577",
        "chasis":"KMHC851CGHU029520",
        "vigencia_desde":"22/05/2017",
        "vigencia_hasta":"22/05/2018",
        "clausulas": "clauuuuuusulaaas",
        "exclusiones": "eeexclusioooonesss",
        "beneficios": "beeeeneeefiiiciiiooosss",
        "deducibles":"deeeeduuuuciiiibleeeessss",
        "coberturas":"cooooobeeeertuuuuraaaasssss"
    }];

    //get Column JSON from first item in Rows array
    var columnJSON = $.map(Object.getOwnPropertyNames(bt_data[0]), function (column) {
        return {"name": column,"title": column}
    });

    $('#exampleRowToggler').footable({
        "useParentWidth": true,
        "columns": columnJSON, //Pass columns object through to footable
        "rows": bt_data //Pass your existing rows array through to footable
    });
}