我的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>
如果它可以更容易,我願意放棄內嵌編輯功能,並通過模箱做編輯和發佈。
任何幫助將不勝感激。
保羅送到不同的參數 - 發佈您的新代碼的機會。我已經設法編輯現有的行,但無法添加新的行。我試過閱讀演示,但是我完全感到困惑謝謝 – user1150262 2012-02-16 15:41:25
@Paul,你能告訴我如何添加和編輯行嗎?我對它很陌生:( – Learner 2014-07-02 11:33:00