EditableGrid无法加载内联json数据

Question

我尝试将EditableGrid与json格式的数据一起使用，这些数据位于脚本本身中，但我收到了错误消息。

这是使用来自Github的最新代码，所以它应该是3.0版

有什么想法吗？提前谢谢。

代码示例：

var jsonData = {
    "metadata":[
        {"name":"name","label":"NAME","datatype":"string","editable":true},
        {"name":"firstname","label":"FIRSTNAME","datatype":"string","editable":true},
        {"name":"age","label":"AGE","datatype":"integer","editable":true},
        {"name":"height","label":"HEIGHT","datatype":"double(m,2)","editable":true},
        {"name":"country","label":"COUNTRY","datatype":"string","editable":true,"values":
            {
                "Europe":{"be":"Belgium","fr":"France","uk":"Great-Britain","nl":"Nederland"},
                "America":{"br":"Brazil","ca":"Canada","us":"USA"},
                "Africa":{"ng":"Nigeria","za":"South-Africa","zw":"Zimbabwe"}}
            },
        {"name":"email","label":"EMAIL","datatype":"email","editable":true},
        {"name":"freelance","label":"FREELANCE","datatype":"boolean","editable":true},
        {"name":"lastvisit","label":"LAST VISIT","datatype":"date","editable":true}
    ],

    "data":[
        {"id":1, "values":{"country":"uk","age":33,"name":"Duke","firstname":"Patience","height":1.842,"email":"patience.duke@gmail.com","lastvisit":"11\/12\/2002"}},
        {"id":2, "values":["Rogers","Denise",59,1.627,"us","rogers.d@gmail.com","","07\/05\/2003"]},
        {"id":3, "values":{"name":"Dujardin","firstname":"Antoine","age":21,"height":1.73,"country":"fr","email":"felix.compton@yahoo.fr","freelance":true,"lastvisit":"21\/02\/1999"}},
        {"id":4, "values":{"name":"Conway","firstname":"Coby","age":47,"height":1.96,"country":"za","email":"coby@conwayinc.com","freelance":true,"lastvisit":"01\/12\/2007"}},
        {"id":5, "values":{"name":"Shannon","firstname":"Rana","age":24,"height":1.56,"country":"nl","email":"ranna.shannon@hotmail.com","freelance":false,"lastvisit":"07\/10\/2009"}},
        {"id":6, "values":{"name":"Benton","firstname":"Jasmine","age":61,"height":1.71,"country":"ca","email":"jasmine.benton@yahoo.com","freelance":false,"lastvisit":"13\/01\/2009"}},
        {"id":7, "values":{"name":"Belletoise","firstname":"André","age":31,"height":1.84,"country":"be","email":"belletoise@kiloutou.be","freelance":true,"lastvisit":""}},
        {"id":8, "values":{"name":"Santa-Maria","firstname":"Martin","age":37,"height":1.80,"country":"br","email":"martin.sm@gmail.com","freelance":false,"lastvisit":"12\/06\/1995"}},
        {"id":9, "values":{"name":"Dieumerci","firstname":"Amédé","age":37,"height":1.81,"country":"ng","email":"dieumerci@gmail.com","freelance":true,"lastvisit":"05\/07\/2009"}},
        {"id":10,"values":{"name":"Morin","firstname":"Wanthus","age":46,"height":1.77,"country":"zw","email":"morin.x@yahoo.json.com","freelance":false,"lastvisit":"04\/03\/2004"}}
    ]};

$(function() {
    editableGrid = new EditableGrid("EdiTable");
    editableGrid.load(jsonData);
    editableGrid.renderGrid("tablecontent");
});

html代码包含一个带有id=tablecontent的div

Answer 1

我猜你得到的错误信息是这样的：

现在是谁在给我打电话？File:///home/michel/a.html:45:20http://www.editablegrid.net/templates/editablegrid_2015/js/editablegrid/editablegrid.js:168:15EditableGrid@https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js:2:29465@https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js:2:26855n.Callback/j@https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js:2:27673n.Callback/k.fireWith@ .ready@https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js:2:29465 I@https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js:2:29656

在这种情况下，这是因为缺少了可编辑网格的某些部分。

您应该像在demo中一样，包括：

<!-- include javascript and css files for the EditableGrid library -->
<script src="http://www.editablegrid.net/templates/editablegrid_2015/js/editablegrid/editablegrid.js"></script>
<script src="http://www.editablegrid.net/templates/editablegrid_2015/js/editablegrid/editablegrid_editors.js"></script>
<script src="http://www.editablegrid.net/templates/editablegrid_2015/js/editablegrid/editablegrid_renderers.js"></script>
<script src="http://www.editablegrid.net/templates/editablegrid_2015/js/editablegrid/editablegrid_utils.js"></script>
<script src="http://www.editablegrid.net/templates/editablegrid_2015/js/editablegrid/editablegrid_validators.js"></script>

这应该可以解决问题。

Answer 2

更改。

editableGrid.load(jsonData);

到。

editableGrid.load({"metadata": jsonData.metadata, "data": jsonData.data});

DEMO

Answer 3

当我在数据中传递空对象，从而没有将数据传递给函数时，我得到了这个错误。

当我传递正确的对象时，这个问题没有出现。