editGridRow ничего не делает

Question

Я пытаюсь настроить jqGrid для добавления строки в таблицу, но editGridRow () ничего не делает.Сетка отображается и заполняется примерами данных, а кнопка «Добавить запись» запускает событие (срабатывает предупреждение), но затем ничего.

Возможно, в моей спецификации сетки что-то не хватает, б / с I 'м заполнить его данными заглушки через addRowData ()?Я сбит с толку.

ОБНОВЛЕНИЕ: editGridRow зависит от таблиц стилей CSS, которые не были включены в мой HTML.

HTML:

<table id="myGridTarget"><tr><td/></tr><table>
<div id="pager"/>
<fieldset>
  <input id="addRowButton" type="button" value="Add Row Data"/>
</fieldset>

Настройка кодасетка и события:

jQuery(document).ready(function () {        
jQuery("#myGridTarget").jqGrid(pageData.gridData);
var starter_data_obj = {
                         'Col_1': 'first',
                         'Col_2': 'second',
                         'Col_3': 'third',
                         'Col_4': 'fourth',
                       };

jQuery("#myGridTarget").addRowData('row_1', starter_data_obj, 0);

jQuery("#addRowButton").click(function () {
    alert("here");
    jQuery("#myGridTarget").jqGrid('editGridRow', "new", {height: 280, reloadAfterSubmit:false});
        }
    );
    }
);

Спецификации для сетки, размещенной в объекте pageData.gridData.(Обратите внимание, что это значения Python, и они обоснованы перед переходом к griData. Таким образом, True становится истинным, свойства объекта не в кавычках и т. Д.)

{
     'url': '',
     'datatype': 'json',
     'mtype': 'GET',
     'loadonce': True,
     'jsonReader': { 'repeatitems': False },        # potential js object issue
     'colNames': 
        [
         'Col_1',
         'Col_2',
         'Col_3',
         'Col_4',
        ],
     'colModel':
        [
         { 
           'name': 'Col_1', 
           'key': True,
           'width': 60,
           'align': "center",
           'hidden': False,
           'editable': True,
         },
         { 
           'name': 'Col_2',
           'width': 80,
           'sortable': False,
           'hidden': False, 
           'editable': True,
         },
         { 
           'name': 'Col_3',
           'width': 180,
           'sortable': False,
           'hidden': False, 
           'editable': True,
         },
         { 
           'name': 'Col_4',
           'width': 180,
           'sortable': False,
           'hidden': False,
           'editable': True,
         },
        ],
     'rowNum': 10,
     'rowList': [10, 20, 300],
     'pager': "#pager",
     'viewrecords': True,
     'gridview': True,
     'rownumbers': True,
     'height': 230,
     'caption': 'Caption goes here',
     'editurl': '',
     'sortorder': 'desc',
    }

Answer 1

Прежде всего вы должны решить проблему со значениями True и False. Если данные, которые вы разместили, не являются данными, используемыми в pageData.gridData, затруднить поиск проблемы. Было бы лучше, если бы вы включили настоящее определение pageData.gridData.

В pageData.gridData можно найти не url, а datatype: 'json'. Вы не можете сделать это.

Следующая и, вероятно, очень важная проблема - параметр loadonce:true. Он изменяет datatype с 'json' на 'local' после первой загрузки. Редактирование формы и функция editGridRow не поддерживают работу с локальными данными . Так что, вероятно, у вас будут проблемы с editGridRow, и для его работы вам придется переключить datatype на 'json' перед использованием editGridRow. Затем, если вы будете использовать reloadAfterSubmit:true, сетка будет перезагружена, а datatype будет преобразован в 'json'. Я не играю с такой комбинацией настроек, поэтому вам нужно провести некоторые эксперименты самостоятельно или изучить исходный код grid.formedit.js .

Answer 2

Функциональность editGridRow () зависит от таблицы стилей jqGrid CSS.

Как только я включил таблицу стилей CSS в свой HTML, диалоговое окно для дополнительных данных выскочило прямо вверх.