我跟随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
答案 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