如何在jqGrid中编辑或添加新行 [英] How to Edit or Add a New Row in jqGrid
问题描述
我的jqGrid在从数据库中提取数据方面做得很好，但是我在理解添加新行"功能的工作方式时遇到了麻烦.
My jqGrid that does a great job of pulling data from my database, but I'm having trouble understanding how the Add New Row functionality works.
现在，我可以编辑内联数据，但是无法使用模式框创建新行.我缺少这样的额外逻辑:如果这是新行，请将其发布到服务器端URL"，而不是修改现有数据. (现在，单击提交"仅会清除表单并重新加载网格数据.)
Right now, I'm able to edit inline data, but I'm not able to create a new row using the Modal Box. I'm missing that extra logic that says, "If this is a new row, post this to the server side URL" instead of modifying existing data. (Right now, hitting Submit only clears the form and reloads the grid data.)
文档指出添加新行"是:
The documentation states that Add New Row is:
jQuery("#editgrid").jqGrid('editGridRow',"new",{height:280,reloadAfterSubmit:false});
但是我不确定如何正确使用它.我花了很多时间研究演示，但是他们似乎都使用外部按钮来触发新的行命令，而不是使用我想做的模态表单.
but I'm not sure how to use that correctly. I've spent alot of time studying the Demos, but they seem to all use an external button to fire the new row command, rather than using the Modal Form, which I want to do.
我的完整代码在这里:
<!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>
如果它变得更容易，我愿意放弃内联编辑功能，并通过模式框进行编辑和发布.
If it makes it easier, I'd be willing to scrap the inline editing functionality and do editing and posting via modal boxes.
任何帮助将不胜感激.
推荐答案
首先，在大多数情况下，您不应调用jqGrid('editGridRow',"new"...).取而代之的是，您应该让用户单击添加记录按钮.然后将出现一个对话框，其中colModel中所有具有editable=true的字段.
First of all, you shouldn't call jqGrid('editGridRow',"new"...) in most cases. Instead of that you should have the user click an Add Record button. Then a dialog will appear with all fields which have editable=true in colModel.
点击 Submit (提交)按钮后，jqGrid会将数据发布到url参数或editurl参数(如果存在)定义的URL.由于使用参数mtype='POST'进行数据填充，因此必须定义其他editurl参数.您可以将POST HTTP代码覆盖到PUT或您喜欢的任何其他内容.
After they click the Submit button, jqGrid will POST data to the URL defined by url parameter or editurl parameter (if it exists). Because you use parameter mtype='POST' for the data filling, you have to define additional editurl parameter. You can overwrite POST HTTP code to PUT or any other which you like.
重要的是要了解新记录的id具有_empty值. 编辑对话框的工作方式与添加对话框相同，但包括已修改记录的id.作为添加新记录时将发送到服务器的附加重要参数是附加参数oper=add.
It is important to understand that the id for new records has an _empty value. The Edit dialog works in the same way as the Add dialog, but includes the id of the modified record. As an additional important parameter which will be sent to the server in the case of add new record is additional parameter oper=add.
有关更多信息，请阅读
For more information read section What is posted to the server on http://www.trirand.com/jqgridwiki/doku.php?id=wiki:form_editing.
我建议您还阅读有关jqGrid发送的不同参数的说明.
http://www.trirand.com/jqgridwiki/上的prmNames参数doku.php?id = wiki:options
I recommend that you also read about different parameters sent by jqGrid in the description of
prmNames parameter on http://www.trirand.com/jqgridwiki/doku.php?id=wiki:options
这篇关于如何在jqGrid中编辑或添加新行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
