如何在没有在loadData()控制器中使用AJAX的情况下更新jsGrid中的数据? (该阵列还没有完成填充)

时间:2018-03-26 21:01:27

标签: javascript jquery jsgrid

我可以显示静态数据data: ary,并且我成功更新,删除,插入和过滤所述静态数据:

controller: {

    loadData: function (filter) {

        return $.grep(ary, function (obj, index) {
            return
            /* conditional logic for filtering here */
        });

    },

    updateItem: function (item) {

        //call custom framework function responsible for updating record
        appName.doRequest("updateRecord");

    },

    insertItem: function (item) {

        //call custom framework function responsible for inserting record
        appName.doRequest("insertRecord");

    },

    deleteItem: function (item) {

        //call custom framework function responsible for deleting record
        appName.doRequest("deleteRecord");

    },

},

请注意,ary是一个全局变量。基本上,我可以通过自定义框架随时更新ary;但是,它必须在jsGrid控制器之外,否则数组最终为空。

为了使数组可以访问,为什么我必须在loadData()时调用负责填充数组的函数?当我打电话给公司的特殊功能时,如何让我的阵列在loadData()内可用?

文档说我可以使用具有延期/承诺的AJAX请求,但我不相信我们的框架允许我向后端发出直接的AJAX请求。

这是框架的一小部分:

case "getJobSpecs":
    var jsonString, ary = [];
    var jsonString = $(data.xmldata).find("tblJobSpecs").text();
    ary = JSON.parse(jsonString);

    //results from server.  I can do anything to the DOM I want here
    break;

case "updateRecord":
    console.log(data.xmldata);
    //results from server.  I can do anything to the DOM I want here
    break;
case "insertRecord":
    console.log(data.xmldata);
    //results from server.  I can do anything to the DOM I want here
    break;
case "deleteRecord":
    console.log(data.xmldata);
    //results from server.  I can do anything to the DOM I want here
    break;

2 个答案:

答案 0 :(得分:2)

长话短说,我能够用这个简单的行重新加载带有更新数组的网格:

Route::get('/universities', 'UniversityController@index');

Route::get('/universities/create', 'UniversityController@create');

Route::get('/universities/{id}/edit', 'UniversityController@edit');

Route::put('/universities/{id}', 'UniversityController@update');

Route::post('/universities/create', 'UniversityController@store');

Route::delete('/universities/{id}', 'UniversityController@destroy');

观察:

  1. $("#tblJobSpecs").jsGrid("option", "data", ary) 是通过我们的自定义框架中的调用更新的全局变量;即使我可以在ary控制器内调用框架来填充loadData(),但由于我不完全理解的原因,它在ary函数中不可用。< / LI>
  2. 我不再定义数据选项(现在,网格初始化时没有数据)

    loadData()
  3. 通过$("#tblJobSpecs").jsGrid({ width: "100%", //height: "400px", inserting: true, editing: true, sorting: true, selecting: true, paging: true, filtering: true, //data: ary ... }); updateItem()insertItem修改数据库后,我通过我们的框架重新定义delteItem(),然后......

  4. ...我告诉jsGrid&#34;刷新&#34;网格:

    ary

答案 1 :(得分:0)

您可以使用 arr.filter 属性,并在检查完条件后返回退货,

$("#jsGrid").jsGrid({
        height: "90%",
        width: "100%",
        filtering: true,
        editing: false,
        sorting: true,
        paging: true,
        autoload: true,
        pageSize: 10,
        pageButtonCount: 5,
        deleteConfirm: "Do you really want to delete the client?",
        controller: {
            loadData: function (filter) {
                if (gridDataDb != undefined) {
                    for (var filterItem in filter) {
                        if (filter[filterItem] === "") {
                            $("#jsGrid").data("JSGrid").data = gridDataDb;
                        }
                    }
                }
                //this.data = Array.from($("#jsGrid").data("JSGrid").data);
                return $.grep($("#jsGrid").data("JSGrid").data, function (client) {
                    return (!filter.vcm_prescriberidname || client.vcm_prescriberidname.indexOf(filter.vcm_prescriberidname) > -1)
                        && (!filter.npid || client.npid.indexOf(filter.npid) > -1)
                        && (!filter.vcm_territoryname || client.vcm_territoryname.indexOf(filter.vcm_territoryname) > -1)
                        && (!filter.vcm_countryidname || client.vcm_countryidname.indexOf(filter.vcm_countryidname) > -1)
                        && (!filter.vcm_statefullname || client.vcm_statefullname.indexOf(filter.vcm_statefullname) > -1)
                        && (!filter.vcm_city || client.vcm_city.indexOf(filter.vcm_city) > -1)
                        && (!filter.vcm_zip || client.vcm_zip.indexOf(filter.vcm_zip) > -1)
                        && (!filter.currmonthsum || client.currmonthsum.indexOf(filter.currmonthsum) > -1)
                        && (!filter.lastquartersum || client.lastquartersum.indexOf(filter.lastquartersum) > -1)
                        && (!filter.thisyearsum || client.thisyearsum.indexOf(filter.thisyearsum) > -1)
                });
            }
        },

        fields: [
            { name: "vcm_prescriberidname", title: "Prescriber Name", type: "text", width: 20 },
            { name: "npid", title: "NPI ID", type: "text", width: 20 },
            { name: "vcm_territoryname", title: "Territory Name", type: "text", width: 20 },
            { name: "vcm_countryidname", title: "Country", type: "text", width: 20 },
            { name: "vcm_statefullname", title: "State", type: "text", width: 20 },
            { name: "vcm_city", title: "City", type: "text", width: 20 },
            { name: "vcm_zip", title: "ZipCode", type: "text", width: 15 },
            { name: "currmonthsum", title: "Curr Month TRx Sum", type: "text", width: 10 },
            { name: "lastquartersum", title: "Last Quarter TRx Sum", type: "text", width: 10 },
            { name: "thisyearsum", title: "Last Year TRx Sum", type: "text", width: 10 },
            //{ name: "vcm_prescriberidname", title: "Location", type: "text", width: 7 },
            { type: "control" }

        ]
    });

看上面的代码, 两个主要注意事项:

  1. 通过$(“#jsGrid”)。jsGrid(“ option”,“ data”,your_Data_Array)加载数据。
  2. 使用Array.filter过滤掉没有Ajax的数据。

注意:过滤器对象引用包含一个Object,该对象包含jsGrid中的所有列,因此,当应用过滤器时,具有在相应列中更新的过滤器值的相应列将传递到数据集以过滤结果。 / p>

让我知道是否有帮助!