JQWidget Grid-在聲明之前更改行數據

Question

我正在開發的JQWidget-jqxGrid遇到一些麻煩。 我想更改從行版本發送到API的格式信息。 我需要將某些日期更改為特定的字符串表示法。 這是我現在正在使用的代碼：

updaterow: function (rowid, rowdata, commit)
            {
                //console.log(rowdata);
                var output = rowdata;

                for (property in output) {
                    if (output[property] instanceof Date && schema.properties[property].format === "time") {
                        output[property] = output[property].getHours() + ":" + output[property].getMinutes();
                        //console.log('hola');
                    }
                    if (output[property] instanceof Date && schema.properties[property].format === "date")
                    {
                        output[property] = output[property].getFullYear() + "-" + output[property].getMonth() + 1 + '-' + output[property].getDate();
                    }
                }

                /*console.log(event.args.row);*/
                console.log(output);
                console.log(rowdata);

                var token = $('input[name="__RequestVerificationToken"]').val();

                $.ajax({
                    url: "/api/" + entity + "/" + rowdata.uid,
                    cache: false,
                    method: "put",
                    data: JSON.stringify(rowdata),
                    processData: false,
                    headers: {
                        "RequestVerificationToken": token,
                        "Content-type": "Application/json"
                    },
                    success: function () {
                        console.log("Okey dokey!");
                        commit(true);
                    },
                    error: function () {
                        alert("El dato no se ha actualizado correctamente");
                    }
                });
            }

在這樣做之前，我嘗試了很多事情。 最初，我是在“ oncelledit”事件上進行更新的，問題是相同的（這對我來說就像某種超自然活動）：

如您所見，我正在重新格式化輸出變量中的數據，而不是rowdata。 即使這樣，在為ajax請求修改輸出變量之前，如果取消注釋“ console.log（rowdata）;”，即使在修改數據的“ for”作用域之前，數據也已經被更改。 這怎么可能呢？ 我已經使用其他瀏覽器檢查了緩存，但是沒有運氣。

盡管使用此代碼將數據正確地發布到了我的API，但是在顯示給用戶的網格上數據格式發生了變化，並且數據變得不完整。 我想以適當的格式發送信息，但不希望更改網格中顯示的格式數據。

這是在編輯之前顯示數據的方式：
fecha de inicio | 霍里－德因尼西奧
1/10/2018 | 8:00 AM

這是以后的版本：
fecha de inicio | 霍里－德因尼西奧
2001-01-1 | 13：0

我發布我的完整代碼以防萬一：

—JSGrid.js—

 $.ajaxSetup({ cache: false }); var FKSources = []; var FKAdapters = {}; var dataFieldsArr = []; var columnsArr = []; var FKPropertySelection; var entity; var schema; function createGrid() { $.ajax({ url: "/api/" + entity + "/schema", success: function (data) { schema = data; for (property in data.properties) { if (data.properties[property]["type"].indexOf("lhcrud") > -1) { FKSources.push({ datatype: "json", datafields: [ { name: data.fkAttributes[property] }, { name: 'id', type: 'int' } ], id: 'id', url: '/api/' + data.properties[property]["type"].substring(data.properties[property]["type"].indexOf("models.") + "models.".length) }); FKAdapters[property] = new $.jqx.dataAdapter(FKSources[FKSources.length - 1]); dataFieldsArr.push({ name: property + 'Id', value: property + 'Id', values: { source: FKAdapters[property].records, value: 'id', label: data.fkAttributes[property] }, type: 'int' }); dataFieldsArr.push({ name: property + 'Nombre', type: 'string', map: property + '>' + data.fkAttributes[property] }); columnsArr.push( { text: data.properties[property]["title"], columntype: 'dropdownlist', datafield: property + 'Id', width: 150, filtertype: 'checkedlist', displayfield: property + 'Nombre', createeditor: function (row, value, editor) { editor.jqxDropDownList({ source: FKAdapters[FKPropertySelection], displayMember: data.fkAttributes[FKPropertySelection], valueMember: 'id' }); } } ); } else if (data.properties[property]["type"].indexOf("integer") > -1) { dataFieldsArr.push({ name: property, type: 'int' }); columnsArr.push({ text: data.properties[property]["title"], datafield: property, width: 80, cellsalign: 'right' }); } else if (data.properties[property]["type"].indexOf("boolean") > -1) { dataFieldsArr.push({ name: property, type: 'bool' }); columnsArr.push({ text: data.properties[property]["title"], datafield: property, width: 65, columntype: 'checkbox' }); } else if (data.properties[property]["format"].indexOf("date") > -1) { dataFieldsArr.push({ name: property, type: 'date' }); columnsArr.push({ text: data.properties[property]["title"], datafield: property, width: 150, columntype: 'datetimeinput', cellsalign: 'right', cellsformat: 'd' }); } else if (data.properties[property]["format"].indexOf("time") > -1) { dataFieldsArr.push({ name: property, type: 'date' }); columnsArr.push({ text: data.properties[property]["title"], datafield: property, width: 100, columntype: 'datetimeinput', cellsalign: 'right', cellsformat: 't', createeditor: function (row, column, editor) { editor.jqxDateTimeInput({ showTimeButton: true, showCalendarButton: false }); } }); } else { dataFieldsArr.push({ name: property, type: 'string' }); columnsArr.push({ text: data.properties[property]["title"], datafield: property, width: 150 }); } } columnsArr.push({ text: 'Delete', datafield: 'Delete', columntype: 'button', width: 90, cellsrenderer: function () { return "Delete row"; }, buttonclick: function (row) { var deleteConfirm = confirm("Sure?"); if (deleteConfirm) { var id = $("#jqxgrid").jqxGrid('getrowid', row); deleteEntity(entity, id, $('input[name="__RequestVerificationToken"]').val()); $('#jqxgrid').jqxGrid('deleterow', id); } } }); var source = { datatype: "json", datafields: dataFieldsArr, id: 'id', url: '/api/' + entity, addrow: function (rowid, rowdata, position, commit) { var token = $('input[name="__RequestVerificationToken"]').val(); //console.log(rowid); //console.log(rowdata); $.ajax({ url: "/api/" + entity, method: "post", data: JSON.stringify(rowdata), processData: false, headers: { "RequestVerificationToken": token, "Content-type": "Application/json" }, success: function () { commit(true); //reload Data in order to manage correctly new data $("#jqxgrid").jqxGrid( { source: dataAdapter, sortable: true, filterable: true, editable: true, showeverpresentrow: true, everpresentrowposition: "top", selectionmode: 'singlecell', editmode: 'dblclick', theme: 'light', columns: columnsArr }); }, error: function (xhr) { console.log(xhr); commit(false); } }); }, updaterow: function (rowid, rowdata, commit) { //console.log(rowdata); var output = rowdata; for (property in output) { if (output[property] instanceof Date && schema.properties[property].format === "time") { output[property] = output[property].getHours() + ":" + output[property].getMinutes(); //console.log('hola'); } if (output[property] instanceof Date && schema.properties[property].format === "date") { output[property] = output[property].getFullYear() + "-" + output[property].getMonth() + 1 + '-' + output[property].getDate(); } } /*console.log(event.args.row);*/ console.log(output); console.log(rowdata); var token = $('input[name="__RequestVerificationToken"]').val(); $.ajax({ url: "/api/" + entity + "/" + rowdata.uid, cache: false, method: "put", data: JSON.stringify(rowdata), processData: false, headers: { "RequestVerificationToken": token, "Content-type": "Application/json" }, success: function () { console.log("Okey dokey!"); commit(true); }, error: function () { alert("El dato no se ha actualizado correctamente"); } }); } }; var dataAdapter = new $.jqx.dataAdapter(source); $("#jqxgrid").jqxGrid( { source: dataAdapter, width: '100%', sortable: true, filterable: true, editable: true, showeverpresentrow: true, everpresentrowposition: "top", selectionmode: 'singlecell', editmode: 'dblclick', theme: 'light', columns: columnsArr }); }, error: function () { alert("Error Getting Data"); } }); } $("#jqxgrid").on('cellselect', function (event) { FKPropertySelection = event.args.datafield.substring(0, event.args.datafield.indexOf('Id')); }); 

-JSGrid.cshtml-

 @{ ViewData["Title"] = "JSGrid"; Layout = "~/Views/Shared/_Layout.cshtml"; } <h2>JSGrid for @ViewBag.entity</h2> @Html.AntiForgeryToken() <div id="jqxgrid"> </div> @section scripts { <link rel="stylesheet" href="~/lib/jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="~/lib/jqwidgets/styles/jqx.light.css" type="text/css" /> <script type="text/javascript" src="~/lib/jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="~/lib/jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="~/lib/jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="~/lib/jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="~/lib/jqwidgets/jqxmenu.js"></script> <script type="text/javascript" src="~/lib/jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="~/lib/jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript" src="~/lib/jqwidgets/jqxcheckbox.js"></script> <script type="text/javascript" src="~/lib/jqwidgets/jqxgrid.js"></script> <script type="text/javascript" src="~/lib/jqwidgets/jqxdatetimeinput.js"></script> <script type="text/javascript" src="~/lib/jqwidgets/jqxcalendar.js"></script> <script type="text/javascript" src="~/lib/jqwidgets/jqxtooltip.js"></script> <script type="text/javascript" src="~/lib/jqwidgets/jqxgrid.selection.js"></script> <script type="text/javascript" src="~/lib/jqwidgets/jqxgrid.columnsresize.js"></script> <script type="text/javascript" src="~/lib/jqwidgets/jqxgrid.filter.js"></script> <script type="text/javascript" src="~/lib/jqwidgets/jqxgrid.sort.js"></script> <script type="text/javascript" src="~/lib/jqwidgets/jqxgrid.pager.js"></script> <script type="text/javascript" src="~/lib/jqwidgets/jqxgrid.grouping.js"></script> <script type="text/javascript" src="~/lib/jqwidgets/jqxgrid.edit.js"></script> <script type="text/javascript" src="~/js/JSGrid.js"></script> <script> entity = '@ViewBag.entity'; createGrid(); </script> } 

提前致謝！

Answer 1

好吧！ 我在這里找到了解決方案：

https://www.jqwidgets.com/community/topic/rowdata-changed-even-before-statement-to-do-so/#post-98256

和這里：

https://www.jqwidgets.com/community/topic/difference-between-refreshdata-and-updatebounddata/（¡Haya PAZ！-Les luthiers）

我部分解決了用jqxgrid的“ updatebounddata”方法重新加載綁定數據的問題。

萬一有人遇到相同的問題，我將在這里將updateRow函數更新。 看一下ajax塊：

updaterow: function (rowid, rowdata, commit)
                {
                    //console.log(rowdata);
                    var output = rowdata;

                    for (property in output) {
                        if (output[property] instanceof Date && schema.properties[property].format === "time") {
                            output[property] = output[property].getHours() + ":" + output[property].getMinutes();
                            //console.log('hola');
                        }
                        if (output[property] instanceof Date && schema.properties[property].format === "date")
                        {
                            output[property] = output[property].getFullYear() + "-" + (output[property].getMonth() + 1) + '-' + output[property].getDate();
                        }
                    }

                    //console.log(event.args.row);
                    //console.log(output);
                    //console.log(rowdata);

                    var token = $('input[name="__RequestVerificationToken"]').val();

                    $.ajax({
                        url: "/api/" + entity + "/" + rowdata.uid,
                        cache: false,
                        method: "put",
                        data: JSON.stringify(rowdata),
                        processData: false,
                        headers: {
                            "RequestVerificationToken": token,
                            "Content-type": "Application/json"
                        },
                        success: function () {
                            console.log("Okey dokey!");
                            commit(true);
                            $("#jqxgrid").jqxGrid('updatebounddata');
                        },
                        error: function () {
                            alert("El dato no se ha actualizado correctamente");
                            $("#jqxgrid").jqxGrid('updatebounddata');
                        }
                    });
                }

希望這對以后的人有所幫助！