gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-02 06:10:45 25 4
gpt4 key购买 nike

我的 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>

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

任何帮助将不胜感激。

最佳答案

首先,大多数情况下您不应该调用 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 发送的不同参数http://www.trirand.com/jqgridwiki/doku.php?id=wiki:options 上的 prmNames 参数

关于jqgrid - 如何在 jqGrid 中编辑或添加新行,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/2648905/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com