前端 - 添加新的使用 jqGrid？

Posted 2023-02-22

【中文标题】前端 - 添加新的使用 jqGrid？

【英文标题】：Frontend - Add new use jqGrid?

【发布时间】：2015-12-31 07:30:09

【问题描述】：

我使用 jqGrid 添加新记录，但我无法将数据从网格放入 json 字符串。

当我运行时，返回代码：

错误状态：“不支持的媒体类型”。错误代码：415

还有我的代码：

$(document).ready(function () 
jQuery("#jQGridDemo").jqGrid(
    url: 'http://192.168.1.59:8080/sunrise/api/v1/warehouse/getById/1',
    mtype: "GET",
    contentType: "application/json",
    datatype: "json",
    colNames: ['wareHouseID', 'name' , 'fullname' , 'company', 'address'],
    colModel: [
     name: 'wareHouseID', index: 'wareHouseID', width: 150,editable:false, editoptions:readonly:true, size:10, hidden:true,
     name: 'name', index: 'name', width: 150,editable:true, editoptions:size:30,
     name: 'fullname', index: 'fullname', width: 150,editable:true,editoptions:size:30,
     name: 'company', index: 'company', width: 150,editable:true,editoptions:size:30,
     name: 'address', index: 'address', width: 150,editable:true,editoptions:size:30
  ],
    rowNum: 10,
    rowList:[10,20,30],
    width: 1290,
    sortname: 'wareHouseID',
    sortorder:"desc",
    height:235,
    gridview: true,
    viewrecords: true,
    caption: "List User Details",
    editurl:"http://192.168.1.59:8080/sunrise/api/v1/warehouse/update",
    pager: "#jQGridDemoPager",
    ajaxRowOptions : 
        type :"POST",
        contentType :"application/json",
        dataType :"json"
    ,
    serializeRowData: function(postData)     
        return JSON.stringify(postData);
    
);
$("#jQGridDemo").jqGrid('navGrid','#jQGridDemoPager',
        edit:true, add:true, del:false, search:true,
        // Edit options
        
            type:"PUT",
            url:"http://192.168.1.59:8080/sunrise/api/v1/warehouse/update",
            closeAfterEdit:true,
            reloadAfterSubmit:true, 
            onclickSubmit: function(params, postData) 
                return JSON.stringify(postData);
            ,
            afterSubmit: function(response, postData) 
                var res = jQuery.parseJSON(response.responseText);
                return [true, "", res.d];   
            
        ,

        //Add option
        
            type:"POST",
            url:"http://192.168.1.59:8080/sunrise/api/v1/warehouse/new",
            closeAfterAdd:true,reloadAfterSubmit:true, 
            onclickSubmit: function(params, postData) 
                return JSON.stringify(postData);
            ,
            afterSubmit: function(response, postData) 
                var res = jQuery.parseJSON(response.responseText);
                return [true, "", res.d];       
            
           
    ););

您能帮我找出一个问题以及如何解决它吗？非常感谢。

【参考方案1】：

您的代码中有许多不清楚的部分。尽管如此，我想您遇到的主要问题如下：您使用ajaxRowOptions 设置contentType，并使用serializeRowData 将来自请求的数据序列化为JSON。问题是：您使用表单编辑，但ajaxRowOptions 和serializeRowData 将仅用于内联编辑。

所以你应该使用

ajaxEditOptions:  contentType :"application/json" ,
serializeEditData: function (postData)      
    return JSON.stringify(postData);

您必须删除onclickSubmit，它会另外返回JSON.stringify(postData)。

我希望它能解决问题。如果它没有帮助，那么您应该首先编写您使用的 jqGrid 版本以及您使用的 jqGrid 的哪个分支（free jqGrid、Guriddo jqGrid JS 或版本

【讨论】：

@Zon：不客气！现在问题解决了吗？

@Zon：不客气！如果问题解决了，你应该"accept"答案。