Question

我需要向服务器端应用程序提供一个jquery前端，该服务器端应用程序将数据生成/消费为JSON。当页面加载时，我设法检索了JSON数据，但是当我点击“ addRow”时，显示了添加表单，但未调用服务器端应用程序。即数据已添加到网格，仅不执行HTTP POST调用“ / add”（带有JSON数据）：

<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.12.1/themes/cupertino/jquery-ui.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.13.5/css/ui.jqgrid.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.13.5/js/jquery.jqgrid.min.js"></script>
    <title>js-tutorials.com : JqGrid jquery simple example and uses </title>
</head>
<script type="text/javascript">
var localdata = [];

// Prepare jQgrid
$("#grid").jqGrid({
    url: '/customers',
    datatype: 'json',
    data: localdata,
    mtype: 'GET',
    colNames: ['Id',
              'Name',
              'Description',
              'Participants',
              'Date'],
    colModel: [
        {
        name: 'id',
        index: 'id',
        width: 55,
        editable: false},
    {
        name: 'name',
        index: 'name',
        width: 90,
        editable: true},
    {
        name: 'description',
        index: 'description',
        width: 90,
        editable: true},
    {
        name: 'participants',
        index: 'participants',
        editable: true,
        edittype:"select",
        editoptions:{               value:"US:USA;CND:CANADA;FR:FRANCE;LUX:LUXEMBORG"}

},
    {
        name: 'date',
        index: 'date',
        width: 90,
        editable: false,
        formatter: 'date',
        formatoptions: {
            newformat: 'd/M/Y'
        },
        editable: true}
    ],
    rowNum: 10,
    rowList: [10, 20, 30],
    autowidth: false,
    width: 600,
    rownumbers: true,
    pager: '#pager',
    sortname: 'id',
    viewrecords: true,
    sortorder: "asc",
    caption: "Events",
    emptyrecords: "Empty records",
    loadonce: false,
    jsonReader: {
        root: "rows",
        page: "page",
        total: "total",
        records: "records",
        repeatitems: false,
        cell: "cell",
        id: "id"
    }
});



$("#grid").navButtonAdd('#pager', {
    caption: "Add",
    buttonicon: "ui-icon-plus",
    onClickButton: addRow,
    position: "last",
    title: "",
    cursor: "pointer"
});

$("#grid").navButtonAdd('#pager', {
    caption: "Edit",
    buttonicon: "ui-icon-pencil",
    onClickButton: editRow,
    position: "last",
    title: "",
    cursor: "pointer"
});

$("#grid").navButtonAdd('#pager', {
    caption: "Delete",
    buttonicon: "ui-icon-trash",
    onClickButton: deleteRow,
    position: "last",
    title: "",
    cursor: "pointer"
});

// Assign functions to pager buttons
function addRow() {
    // Get the currently selected row
    $("#grid").jqGrid('editGridRow', 'new', {
        url: "/add",
        datatype: 'json',
        mtype: 'POST',
        serializeEditData: function(data) {
            data.id = 0;
            data.date = new Date(data.date).toISOString();
            return $.param(data);
        },
        recreateForm: true,
        closeAfterAdd: true,
        reloadAfterSubmit: true,
        beforeShowForm: function(form) {
            $("#date").datepicker({
                changeMonth: true,
                changeYear: true
            });
        },
        afterSubmit: function(response, postdata) {
            var result = eval('(' + response.responseText + ')');
            var errors = "";

            if (result.success == false) {
                for (var i = 0; i < result.message.length; i++) {
                    errors += result.message[i] + "<br/>";
                }
            } else {
                $("#dialog").text('Entry has been added successfully');
                $("#dialog").dialog({
                    title: 'Success',
                    modal: true,
                    buttons: {
                        "Ok": function() {
                            $(this).dialog("close");
                        }
                    }
                });
            }
            // only used for adding new records
            var new_id = null;

            return [result.success, errors, new_id];
        }
    });
}

如您所见，我已经尝试将参数“ datatype”和“ mtype”添加到addRow函数，但是它仍然不调用服务器：

function addRow() {
    // Get the currently selected row
    $("#grid").jqGrid('editGridRow', 'new', {
        url: "/add",
        datatype: 'json',

有帮助吗？

jQuery jqgrid不执行服务器调用

0 个答案: