2010-04-15 83 views
12

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

如果它可以更容易,我願意放棄內嵌編輯功能,並通過模箱做編輯和發佈。

任何幫助將不勝感激。

+5

保羅送到不同的參數 - 發佈您的新代碼的機會。我已經設法編輯現有的行,但無法添加新的行。我試過閱讀演示,但是我完全感到困惑謝謝 – user1150262 2012-02-16 15:41:25

+0

@Paul,你能告訴我如何添加和編輯行嗎?我對它很陌生:( – Learner 2014-07-02 11:33:00

回答

20

首先,在大多數情況下,您不應該致電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

我建議你也看過有關jqGridprmNames參數的描述上http://www.trirand.com/jqgridwiki/doku.php?id=wiki:options

+0

奧列格,非常感謝你的答覆,這是我見過的最好的解釋。 只是爲了進一步澄清其他人閱讀這篇文章:以上述方式調用jqGrid('editGridRow',「new」)在沒有用戶請求的情況下啓動模態窗體。不是我想要的。 此外,我以前並沒有理解關於發送到服務器端文件的新記錄的附加參數。 您需要在服務器端使用該額外參數來確定網格請求的操作。 再次,謝謝。 – 2010-04-17 23:37:38

+1

你好,保羅。我很高興聽到,我可以幫助你。順便說一下,您可以將答案標記爲已接受。 – Oleg 2010-04-19 00:59:26

+0

在我的情況下,我可以得到Addi記錄對話框,但不能編輯字段,即使我設置字段可編輯 – nermiiine 2017-08-11 12:10:10