jqGrid - saveRow不适用于自定义表单 - 没有HTTP POST

时间:2012-10-15 15:39:33

标签: html ajax json jsp jqgrid

我跟随jqGrid使用自定义表单:

jQuery("#list_klanten").jqGrid({
    url:'data/relations_select.jsp',
    datatype: "json",
    colNames:['ID','Klantcode','EAN','Naam','Street','Postal','City','Country','Phone','Status','Cust','Supp','VAT','Language','Currency','','Relationtype','Legal','MotherC','Repr.','Region','Email','Websiote','Faxnr'],
    colModel:[
        {name:'id',index:'id', width:50,editable:false,editoptions:{size:25}},
        {name:'relation_code',index:'relation_code', width:150,editable:true,editoptions:{size:25}},
        {name:'ean_code',index:'ean_code', width:150,editable:true,hidden:true,editoptions:{size:25}}, 
        {name:'name',index:'name', width:250,editable:true,editoptions:{size:25}},
        {name:'streetname',index:'streetname', width:300,editable:true,sortable:true,editoptions:{size:25}},
        {name:'postal_code',index:'postal_code', width:75,editable:true,sortable:true,editoptions:{size:25}},
        {name:'city',index:'city', width:200,editable:true,sortable:true,editoptions:{size:25}},
        {name:'country',index:'country', width:150,editable:true,sortable:true,editoptions:{size:25}},
        {name:'telephone_nr',index:'telephone_nr', width:150,editable:true,hidden:true,editoptions:{size:25}},
        {name:'relation_status',index:'relation_status', width:150,editable:true,hidden:true,editoptions:{size:25}},
        {name:'customer_flag',index:'customer_flag', width:100,editable:false,search:false,hidden:false,formatter:'checkbox',align:'center',editoptions:{size:25}},
        {name:'supplier_flag',index:'supplier_flag', width:100,editable:false,search:false,hidden:false,formatter:'checkbox',align:'center',editoptions:{size:25}},
        {name:'vat_nr',index:'vat_nr', width:150,editable:true,hidden:false,editoptions:{size:25}},
        {name:'language',index:'language', width:150,editable:true,hidden:false,editoptions:{size:25}},
        {name:'currency_code',index:'currency_code', width:150,editable:true,hidden:false,editoptions:{size:25}},
        {name:'arrow',index:'arrow', width:50,editable:false,search:false,formatter:linkFormatter},
    ],
    width:1100,
    height:600,
    rowNum:20,
    editurl:'data/relations_edit.jsp',
    pager: '#pager_klanten',
    viewrecords: true,
    caption:"Klanten",
    grouping: true,
    groupingView : {
        groupField : ['currency_code'],
        groupColumnShow : [true],
        groupText : ['<b>{0}</b>'],
        groupCollapse : false,
        groupOrder: ['asc'],
        groupSummary : [true],
        groupDataSorted : false
    },
    onSelectRow: function(){
        var gsr = jQuery("#list_klanten").jqGrid('getGridParam','selrow');
        if(gsr){
            jQuery("#list_klanten").jqGrid('GridToForm',gsr,"#relation_detail");
        } else {
            alert("Please select Row")
        }
    },
});
jQuery("#list_klanten").jqGrid('navGrid','#pager_klanten',{edit:true,add:true,del:true,search:false},{height:400,reloadAfterSubmit:true,closeAfterEdit:true,url:'data/relations_edit.jsp'},{height:400,reloadAfterSubmit:true,closeAfterAdd:true,url:'data/relations_edit.jsp'});

选择行时,表单将填充所选值,以便用户可以编辑此表单中的记录。 单击“保存”时,将执行以下代码:

jQuery("#savedata").click(function(){
        var rowid = jQuery("#row_id").val();
        jQuery("#list_klanten").jqGrid('FormToGrid',rowid,'#relation_detail');
        jQuery("#list_klanten").saveRow(rowid,null,'data/relations_edit.jsp');
});

我在网格中看到了编辑的值(暂时),但实际的“保存”不起作用。 当我查看FireBug时,我没有看到数据/ relations_edit.jsp被调用...? 也没有错误或警告,所以什么也没发生。 我在这里缺少什么?

标准编辑选项 - 使用模态弹出窗口进行编辑 - 效果很好......

非常感谢!

Robrecht

1 个答案:

答案 0 :(得分:0)

我发现HTTP POST的解决方案没有完成: jqGrid要求网格处于editmode。

我必须添加

jQuery("#list_klanten").editRow(rowid);

到我的代码

但是...

当我在自定义表单中编辑某些字段时,这些字段会在网格中更新,但不会发布。似乎我的自定义表单中的项目未发布到editurl ...

经过一些研究后,我发现你必须进行自定义ajax调用才能发布所有已编辑的值:

var data = $('#relation_detail').serialize();
$.post('data/relations_edit.jsp', data);

如果某人有更好的解决方案,我会很高兴知道这一点,但目前我的工作正常。

Robrecht