Как Отредактировать или Добавить Новую строку в jqGrid

Question

Как Отредактировать или Добавить Новую строку в 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>

Если бы это помогает, я был бы готов фрагментировать встроенную функциональность редактирования и сделать редактирование и регистрацию через модальные поля.

Любая справка значительно ценилась бы.

12

jqgrid new-operator row add

задан Paul Reichow 15 April 2010 в 20:53

1 ответ

Другие вопросы по тегам:

jqgrid new-operator row add

Похожие вопросы:

score 20 · Accepted Answer

Во-первых, в большинстве случаев не следует вызывать jqGrid ('editGridRow', "new" ...) . Вместо этого вы должны попросить пользователя нажать кнопку Добавить запись . Затем появится диалоговое окно со всеми полями, которые имеют editable = true в colModel.

После нажатия кнопки Отправить jqGrid отправит данные POST на URL-адрес, определенный параметром url или параметром editurl (если это существует). Поскольку вы используете параметр mtype = 'POST' для заполнения данных, вам необходимо определить дополнительный параметр editurl . Вы можете перезаписать код POST HTTP на PUT или любой другой, который вам нравится.

Важно понимать, что идентификатор id для новых записей имеет значение _empty . Диалог Редактировать работает так же, как диалог Добавить , но включает идентификатор измененной записи. В качестве дополнительного важного параметра, который будет отправлен на сервер в случае добавления новой записи, является дополнительный параметр oper = add .

Для получения дополнительной информации прочтите раздел Что отправлено на сервер на http://www.trirand.com/jqgridwiki/doku.php?id=wiki:form_editing .

Я рекомендую вам также прочитать о различных параметрах, отправляемых jqGrid , в описании параметра prmNames на http: //www.trirand. com / jqgridwiki / doku.php? id = wiki: options