2010-04-15 22 views
12

Veritabanımdan veri çekmeyi harika bir şekilde yapan jqGrid'im, ancak Yeni Satır Ekleme işlevinin nasıl çalıştığını anlama konusunda sorun yaşıyorum.jqGrid'de Düzenleme veya Yeni Bir Satır Ekleme

Şu anda, satır içi verileri düzenleyebiliyorum, ancak Modal Kutusu'nu kullanarak yeni bir satır oluşturamıyorum. Mevcut veriyi değiştirmek yerine "Bu yeni bir satırsa, sunucu tarafı URL'sine gönder" yazan fazladan mantığı kaçırıyorum. (Şu anda, Gönder isabet sadece formu temizler ve ızgara verileri yeniden yükler.) Yeni Row olduğunu Ekle

dokümantasyon durumlarını:

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

ama doğru olduğunu nasıl kullanılacağını emin değilim. Demos'u incelemek için çok zaman harcadım ama hepsi yapmak istediğim Modal Form'u kullanmak yerine yeni satır komutunu çalıştırmak için harici bir buton kullanıyorlar.

Benim tam kod buradadır:

o daha kolay, ben satır içi düzenleme işlevini hurda ve modal kutuları aracılığı düzenleme ve gönderme yapmaya razı olurdu yaparsa
<!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> 

.

Herhangi bir yardım büyük memnuniyetle karşılanacaktır.

+5

paul üzerinde prmNames parametrenin açıklamasında jqGrid tarafından gönderilen farklı parametreler hakkında okumanızı öneririz. Mevcut bir satırı düzenlemeyi başardım ancak yeni satır ekleyemiyorum. Demoları okumaya çalıştım ama tamamen karıştıyorum Teşekkür – user1150262

+0

@Paul, bana nasıl satır ekleyip düzenleyeceğimi söyler misiniz? Ben yeniyim :( – Learner

cevap

20

Her şeyden önce, çoğu durumda jqGrid('editGridRow',"new"...)'u aramamalısınız. Bunun yerine, kullanıcının bir Kayıt Ekle düğmesini tıklamasını sağlamalısınız. Daha sonra colModel'de editable=true olan tüm alanlar ile bir iletişim kutusu görünecektir.

onlar tıkladıktan sonra (varsa) jqGridurl parametre veya editurl parametresi tarafından tanımlanan URL'ye veri POST edecek Gönder düğmesini. Veri doldurma için mtype='POST' parametresini kullandığınızdan ek editurl parametresini tanımlamanız gerekir. POST HTTP kodunu PUT'ye veya istediğiniz herhangi bir diğerine yazabilirsiniz.

Yeni kayıtlar için id'un _empty değerine sahip olduğunu anlamak önemlidir. Edit iletişim kutusu, Add Ekle iletişim kutusuyla aynı şekilde çalışır, ancak değiştirilen kaydın id öğesini içerir. Yeni kayıt eklemek durumunda sunucuya gönderilecek ek önemli bir parametre olarak ek parametre oper=add. Daha fazla bilgi için

sunucusunda http://www.trirand.com/jqgridwiki/doku.php?id=wiki:form_editing üzerinde gönderildiğinize Ne bölümünü okuyun. Yeni kod gönderme herhangi bir şans -

Ben de http://www.trirand.com/jqgridwiki/doku.php?id=wiki:options

+0

Oleg, cevabınız için çok teşekkür ederim. Bu, her yerde gördüğüm en iyi açıklama. Sadece bu yazıyı okuyan herkesin daha fazla açıklığa kavuşturulması için: jqGrid'i ('editGridRow', 'new'), yukarıda yaptığım şekilde, modal formunu kullanıcı isteğinde olmadan tetikler. İstediğim gibi değil. Ayrıca, daha önce yeni kayıtlar için sunucu tarafı dosyasına gönderilen ek parametreyi anlamadım. Şebeke tarafından talep edilen işlemi belirlemek için sunucu tarafında bu ek parametreyi kullanmanız gerekir. Yine teşekkürler. –

+1

Merhaba Paul. Duyduğuma sevindim, sana yardım edebilirim. Bu arada, cevabı kabul edildi olarak işaretleyebilirsiniz. – Oleg

+0

Benim durumumda Addi Kayıt İletişimini alabilirim ama alanları düzenlenebilir olsa bile alanları düzenleyemiyorum – nermiiine

İlgili konular