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

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

jqgrid

如何在jqGrid中编辑或添加新行,jqgrid,new-operator,row,add,Jqgrid,New Operator,Row,Add,我的jqGrid在从数据库中提取数据方面做得很好，但是我在理解addnewrow功能如何工作方面遇到了困难现在，我可以编辑内联数据，但无法使用模式框创建新行。我缺少额外的逻辑，即“如果这是新行，请将其发布到服务器端URL”，而不是修改现有数据。（现在，点击Submit只会清除表单并重新加载网格数据。）文档中说明，添加新行为： jQuery("#editgrid").jqGrid('editGridRow',"new",{height:280,reloadAfterSubmit:false})

我的jqGrid在从数据库中提取数据方面做得很好，但是我在理解addnewrow功能如何工作方面遇到了困难

现在，我可以编辑内联数据，但无法使用模式框创建新行。我缺少额外的逻辑，即“如果这是新行，请将其发布到服务器端URL”，而不是修改现有数据。（现在，点击Submit只会清除表单并重新加载网格数据。）

文档中说明，添加新行为：

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

但我不知道如何正确使用它。我花了很多时间研究这些演示，但它们似乎都使用一个外部按钮来启动newrow命令，而不是使用模态形式，我想这样做

我的完整代码如下：

<!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>


jqGrid
我的网格数据
var lastSelectedId；
jQuery（'#list'）.jqGrid({
url:'grid.php'，
数据类型：“json”，
mtype:“POST”，
colNames:['ID'、'Name'、'Price'、'Promotion']，
colModel:[
{名称：'product_id'，索引：'product_id'，宽度：25，可编辑：false}，
{name:'name'，index:'name'，width:50，edittype:'text'，editoptions:{size:30，maxlength:50}，
{名称：'price'，索引：'price'，宽度：50，对齐：'right'，格式化程序：'currency'，可编辑：true}，
{name:'on_promotion'，index:'on_promotion'，宽度：50，格式化程序：'checkbox'，可编辑：true，edittype:'checkbox'}]，
rowNum:10，
行列表：[5,10,20,30]，
寻呼机：$（“#寻呼机”），
sortname:“产品\u id”，
viewrecords：是的，
巫师：“描述”，
标题：“数据库”，
宽度：500，
身高：150，
OnSetrow:功能（id）{
if（id&&id！==lastSelectedId）{
$（“#列表”）.restoreRow（lastSelectedId）；
$（'#list'）.editRow（id，true，null，onSaveSuccess）；
lastSelectedId=id；}}，
editurl:'grid.php？action=save'}）
.jqGrid（'navGrid'，'#pager'，
{refreshicon:'ui图标刷新'，视图：true}，
{高度：280，重新加载后提交：true}，
{高度：280，重新加载后提交：true}，
{reloadAfterSubmit:true}）
.jqGrid（'editGridRow'，'new'，{height:280，reloadAfterSubmit:false}）；
函数onSaveSuccess（xhr）
{response=xhr.responseText；if（response==1）返回true；返回false；}

如果它使它更容易，我愿意放弃内联编辑功能，并通过模式框进行编辑和发布

任何帮助都将不胜感激。

首先，在大多数情况下，您不应该调用

jqGrid（'editGridRow'，“new”…）

。相反，您应该让用户单击添加记录按钮。然后将出现一个对话框，其中包含colModel中具有

editable=true

的所有字段

单击Submit按钮后，

jqGrid

将向

URL

参数或

editurl

参数（如果存在）定义的URL发布数据。由于使用参数

mtype='POST'

填充数据，因此必须定义额外的

editurl

参数。您可以将POST HTTP代码覆盖到PUT或任何其他您喜欢的内容

重要的是要了解新记录的

id

具有

\u空值。编辑对话框的工作方式与添加对话框相同，但包含修改记录的id
。添加新记录时将发送到服务器的另一个重要参数是附加参数oper=add

有关更多信息，请阅读上的“发布到服务器的内容”部分
我建议您还可以在的说明中阅读jqGrid发送的不同参数
prmNames
Oleg上的参数，非常感谢您的回复。这是我见过的最好的解释。只是为了进一步澄清阅读本文的其他人：以我上面所做的方式调用jqGrid（'editGridRow'，“new”），在没有用户请求的情况下启动模式表单。不是我想要的。另外，我以前也不了解将附加参数发送到服务器端文件以获取新记录。您需要在服务器端使用该额外参数来确定网格请求的操作。再次谢谢。你好，保罗。听说我能帮助你，我很高兴。顺便说一句，你可以将答案标记为已接受。在我的情况下，我可以获得Addi Record对话框，但即使我将字段设置为editablepaul，也不能编辑字段-有可能发布你的新代码。我已成功编辑现有行，但无法添加新行。我试过阅读演示，但完全弄糊涂了Thanks@Paul，您能告诉我如何添加和编辑行吗？我是新手：(