如何在jqGrid中编辑或添加新行

我的jqGrid能很好地从我的数据库中提取数据，但我无法理解添加新行功能的工作方式。如何在jqGrid中编辑或添加新行

现在，我可以编辑内联数据，但我无法使用模态框创建新行。我错过了额外的逻辑，说：“如果这是一个新的行，将其发布到服务器端的URL”，而不是修改现有的数据。（现在，点击提交，仅清除表单并重新加载网格数据。）

是添加新行是文档状态：

jQuery("#editgrid").jqGrid('editGridRow',"new",{height:280,reloadAfterSubmit:false});

，但我不知道如何正确使用它。我花了很多时间研究演示，但他们似乎都使用外部按钮来触发新的行命令，而不是使用我想要执行的模式窗体。

我完整的代码是在这里：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>jqGrid</title> 

<link rel="stylesheet" type="text/css" media="screen" href="../css/ui-lightness/jquery-ui-1.7.2.custom.css" /> 
<link rel="stylesheet" type="text/css" media="screen" href="../css/ui.jqgrid.css" /> 

<script src="jquery-1.3.2.min.js" type="text/javascript"></script> 
<script src="../js/i18n/grid.locale-en.js" type="text/javascript"></script> 
<script src="jquery.jqGrid.min.js" type="text/javascript"></script> 
</head> 
<body> 
<h2>My Grid Data</h2> 
<table id="list" class="scroll"></table> 
<div id="pager" class="scroll c1"></div> 

<script type="text/javascript"> 
var lastSelectedId; 

jQuery('#list').jqGrid({ 
url:'grid.php', 
datatype: 'json', 
mtype: 'POST', 
colNames:['ID','Name', 'Price', 'Promotion'], 
colModel:[  
    {name:'product_id',index:'product_id', width:25,editable:false},  
    {name:'name',index:'name', width:50,editable:true, edittype:'text',editoptions:{size:30,maxlength:50}}, 
    {name:'price',index:'price', width:50, align:'right',formatter:'currency', editable:true}, 
    {name:'on_promotion',index:'on_promotion', width:50, formatter:'checkbox',editable:true, edittype:'checkbox'}], 
rowNum:10, 
rowList:[5,10,20,30], 
pager: $('#pager'), 
sortname: 'product_id', 
viewrecords: true, 
sortorder: "desc", 
caption:"Database", 
width:500, 
height:150, 
onSelectRow: function(id){ 
if(id && id!==lastSelectedId){ 
    $('#list').restoreRow(lastSelectedId); 
    $('#list').editRow(id,true,null,onSaveSuccess); 
    lastSelectedId=id; }}, 
editurl:'grid.php?action=save'}) 

.jqGrid('navGrid','#pager', 
    {refreshicon: 'ui-icon-refresh',view:true}, 
    {height:280,reloadAfterSubmit:true}, 
    {height:280,reloadAfterSubmit:true}, 
    {reloadAfterSubmit:true}) 

.jqGrid('editGridRow',"new",{height:280,reloadAfterSubmit:false}); 

function onSaveSuccess(xhr) 
{response = xhr.responseText; if(response == 1) return true; return false;} 

</script></body></html>

如果它可以更容易，我愿意放弃内嵌编辑功能，并通过模箱做编辑和发布。

任何帮助将不胜感激。

来源

2010-04-15 Paul Reichow

保罗送到不同的参数 - 发布您的新代码的机会。我已经设法编辑现有的行，但无法添加新的行。我试过阅读演示，但是我完全感到困惑谢谢 – user1150262 2012-02-16 15:41:25

@Paul，你能告诉我如何添加和编辑行吗？我对它很陌生:( – Learner 2014-07-02 11:33:00

首先，在大多数情况下，您不应该致电jqGrid('editGridRow',"new"...)。而不是你应该让用户点击一个添加记录按钮。然后会出现一个对话框，其中的所有字段在colModel中有editable=true。

他们点击后，提交按钮，jqGrid将POST数据到由url参数或editurl参数定义的URL（如果存在的话）。由于您使用参数mtype='POST'进行数据填充，因此您必须定义附加的editurl参数。您可以将POST HTTP代码覆盖到PUT或您喜欢的任何其他位置。

重要的是要明白新记录的id值为_empty。对话框的工作方式与对话框的工作方式相同，但包括已修改记录的id。作为添加新记录的情况下发送到服务器的附加重要参数是附加参数oper=add。

欲了解更多信息，请阅读部分什么是发布到服务器上http://www.trirand.com/jqgridwiki/doku.php?id=wiki:form_editing。

我建议你也看过有关jqGrid在 prmNames参数的描述上http://www.trirand.com/jqgridwiki/doku.php?id=wiki:options

来源

2010-04-16 23:55:13 Oleg

奥列格，非常感谢你的答复，这是我见过的最好的解释。只是为了进一步澄清其他人阅读这篇文章：以上述方式调用jqGrid（'editGridRow'，“new”）在没有用户请求的情况下启动模态窗体。不是我想要的。此外，我以前并没有理解关于发送到服务器端文件的新记录的附加参数。您需要在服务器端使用该额外参数来确定网格请求的操作。再次，谢谢。 – 2010-04-17 23:37:38

你好，保罗。我很高兴听到，我可以帮助你。顺便说一下，您可以将答案标记为已接受。 – Oleg 2010-04-19 00:59:26

在我的情况下，我可以得到Addi记录对话框，但不能编辑字段，即使我设置字段可编辑 – nermiiine 2017-08-11 12:10:10

如何在jqGrid中编辑或添加新行

回答

相关问题