Javascript 剑道网格在插入网格之前修改远程数据_Javascript_Json_Kendo Ui_Getjson

Javascript 剑道网格在插入网格之前修改远程数据

javascript json kendo-ui

Javascript 剑道网格在插入网格之前修改远程数据,javascript,json,kendo-ui,getjson,Javascript,Json,Kendo Ui,Getjson,我有一个这样设置的视图模型 $(function () { data = { id: "", blah: null, blah2: null }; vM = kendo.observable({ arrData: [], DisplayThisArr: [], /* * Functions you see are here */ }); // End vM kendo.bind($("#grid"), vM); });

我有一个这样设置的视图模型

$(function () {

data = {
    id: "",
    blah: null,
    blah2: null
};

vM = kendo.observable({
    arrData: [],
    DisplayThisArr: [],
    /*
    * Functions you see are here
    */

}); // End vM

kendo.bind($("#grid"), vM);

});

<!DOCTYPE html>
<html>
<head>
<!-- Imports here, including the vM.js file -->

</head>


<body>
    <div id="container">

        <!-- Set up the Grid -->
        <div id="grid"
             data-role="grid"
             data-column-menu="true"
             data-filterable="true"
             data-sortable="true"
             data-row-filter="true"
             data-columns='[
                                {"field": "1", "title" : "1"},
                                {"field": "2", "title" : "2"},
                                {"field": "3", "title": "3"},
                                {"field": "4", "title": "4"},
                                {"field": "5", "title": "5"},
                                {"field": "6", "title": "6"},
                                {"field": "7", "title": "7"},
                                {"field": "propertyImAdding", "title" : "NEW PROP"}
                            ]'
             data-bind="source: dataSource">
        </div><!-- End of the grid Div -->
    </div><!-- End of the container Div -->
</body>
</html>

我将它绑定到一个如下所示的视图

$(function () {

data = {
    id: "",
    blah: null,
    blah2: null
};

vM = kendo.observable({
    arrData: [],
    DisplayThisArr: [],
    /*
    * Functions you see are here
    */

}); // End vM

kendo.bind($("#grid"), vM);

});

<!DOCTYPE html>
<html>
<head>
<!-- Imports here, including the vM.js file -->

</head>


<body>
    <div id="container">

        <!-- Set up the Grid -->
        <div id="grid"
             data-role="grid"
             data-column-menu="true"
             data-filterable="true"
             data-sortable="true"
             data-row-filter="true"
             data-columns='[
                                {"field": "1", "title" : "1"},
                                {"field": "2", "title" : "2"},
                                {"field": "3", "title": "3"},
                                {"field": "4", "title": "4"},
                                {"field": "5", "title": "5"},
                                {"field": "6", "title": "6"},
                                {"field": "7", "title": "7"},
                                {"field": "propertyImAdding", "title" : "NEW PROP"}
                            ]'
             data-bind="source: dataSource">
        </div><!-- End of the grid Div -->
    </div><!-- End of the container Div -->
</body>
</html>

然后我从另一个api获取数据

getOtherData: function() {

        $.ajax({
            url: 'https://localhost:port/api/different/blah',
            dataType: 'json',
            async: false,
            success: function(jsonPayload) {
                arrData = jsonPayload;
                vM.modData(arrData, DisplayThisArr)
            }
        });

    }, //end displayData()

然后修改第一个数组

DisplayThisArray

，使其具有从第二个数组

arrData

收集的另一个属性

modData: function(arrData, DisplayThisArr) {

        /* Hidden b/c not relivant */

        /* I add the new property that wasn't in the json data returned from the api and data to DisplayThisArr HERE */
        /* Now DisplayThisArr has been modified */

    }, //END modData()

既然我修改了数据，我该如何在网格中显示它

[编辑] @Brett comment之后，我将其设置为这样，现在我得到了

未捕获的TypeError:cannotread属性'success'，undefined

。为什么

选项未定义
dataSource: new kendo.data.DataSource({
        schema: {
            model: {
                1: { type: "string" },.
                2: { type: "string" },
                3: { type: "string" },
                4: { type: "string" },
                5: { type: "string" },
                6: { type: "string" },
                7: { type: "string" },
                propertyImAdding: { type: "number" },
            }
        },
        batch: true,
        transport: {
            read:
                function(options) {

                $.ajax({
                  url: 'https://localhost:port/api/blah/blah',
                  dataType: 'json',
                  async: false,
                  data: data,
                  success: function(json) {
                        DisplayThisArr = json;
                        vM.getOtherData();
                        options.success(DisplayThisArr);
                  }
                });//end ajax
            }
        }
    })//End datasource

必须将网格显示的数据传递到数据源对象的options.success（）
。这就是KendoUI数据源填充自身的方式。不向该函数传递任何内容都不会产生任何结果。@Brett我已经尝试了您所说的内容并制作了一些MOD，但现在我得到了一个未捕获类型错误：无法读取未定义的
错误的属性“success”，我猜是选项
。有什么想法吗？