несколько таблиц с табличной и навигационной сеткой

Question

Я использую jQuery 1.5.1, jQuery UI 1.8.13 и jqGrid 4.2.0.

Вот что я пытаюсь сделать:

Я пытаюсь применить jqGrid к нескольким таблицам (все имеют одинаковую структуру), используя tabletoGrid. Каждая таблица имеет один и тот же класс, но также имеет уникальный автоматически сгенерированный идентификатор. У меня также есть div с уникальным идентификатором после каждой таблицы.

Для каждой таблицы есть ссылка, при нажатии которой открывается всплывающее окно редактирования строки для этой таблицы.

Все таблицы отлично работают на jqGrid. Нет проблем там. Но навигационный пейджер не отображается в div пейджера, как и элементы управления для редактирования формы внутри всплывающего окна редактирования. Появится всплывающее окно редактирования формы, но в нем есть только кнопки «Предыдущая», «Следующая», «Отправить» и «Отмена», но нет полей для ввода полей.

Мне не хватает некоторых включаемых файлов? Я не вижу никаких ошибок JavaScript. Любая помощь очень ценится. Спасибо.

- JQR

<link rel="stylesheet" href="/js/jquery1.8.13/css/custom-theme/jquery-ui-1.8.13.custom.css" />

<link rel="stylesheet" href="/js/jqgrid4.2.0/css/ui.jqgrid.css" />
<link rel="stylesheet" href="/js/jqgrid4.2.0/plugins/ui.multiselect.css" />



<script type="text/javascript" src="/js/jquery1.8.13/js/jquery-1.5.1.min.js"></script>
<script type="text/javascript" src="/js/jquery1.8.13/js/jquery-ui-1.8.13.custom.min.js"></script>

<script type="text/javascript" src="/js/jqGrid4.2.0/js/i18n/grid.locale-en.js"></script>
<script type="text/javascript" src="/js/jqGrid4.2.0/plugins/ui.multiselect.js"></script>
<script type="text/javascript" src="/js/jqGrid4.2.0/src/grid.tbltogrid.js" ></script>
<script type="text/javascript" src="/js/jqGrid4.2.0/js/jquery.jqGrid.min.js"></script>
    <script type="text/javascript" src="/js/jqGrid4.2.0/src/grid.formedit.js"></script>

<script type="text/javascript">
$(document).ready(function() {
var editOpt = {
                    editData:{
                        myparam:function(){
                            return "myval";
                        }
                    },
                    height:240,
                    reloadAfterSubmit: true,
                    editCaption:'Edit Recordxxx',
                    bSubmit:'Save',
                    url:'someurl.php',
                    closeAfterEdit:true,
                    viewPagerButtons:false
                };

var oGridOptions = 
{
  "colNames":[
    "Field1",
    "ReField1",
    "Head",
    "Line Item",
    "Modified By",
    "Date"
  ],
  "colModel":[
    {
      "name":"Field1",
      "index":"Field1",
      "width":65,
      "title":true,
      "hidden":false,
      "widthOrg":65,
      "resizable":true,
      "sortable":true,
      "edittype":"text",
      "editable":"true",
      "editoptions":{
        "size":"10"
      }
    },
    {
      "name":"ReField1",
      "index":"ReField1",
      "width":71,
      "title":true,
      "hidden":false,
      "widthOrg":75,
      "resizable":true,
      "sortable":true,
      "edittype":"text",
      "editable":"true",
      "editoptions":{
        "size":"10"
      }
    },
    {
      "name":"Head",
      "index":"Head",
      "width":48,
      "title":true,
      "hidden":false,
      "widthOrg":50,
      "resizable":true,
      "sortable":true,
      "edittype":"text",
      "editable":"true",
      "editoptions":{
        "size":"10"
      }
    },
    {
      "name":"Line_Item",
      "index":"Line_Item",
      "width":600,
      "title":true,
      "hidden":false,
      "widthOrg":631,
      "resizable":true,
      "sortable":true,
      "edittype":"text",
      "editable":"true",
      "editoptions":{
        "size":"10"
      }, 
      "classes": "LineItemText"
    },
    {
      "name":"Modified_By",
      "index":"Modified_By",
      "width":190,
      "title":true,
      "hidden":false,
      "widthOrg":200,
      "resizable":true,
      "sortable":true,
      "edittype":"text",
      "editable":"true",
      "editoptions":{
        "size":"10"
      }
    },
    {
      "name":"Date",
      "index":"Date",
      "width":96,
      "title":true,
      "hidden":false,
      "widthOrg":100,
      "resizable":true,
      "sortable":true,
      "edittype":"text",
      "editable":"true",
      "editoptions":{
        "size":"10"
      }
    }
  ]
};

$.jgrid.edit.editCaption = "My Edit Caption";
$.jgrid.defaults.rownumbers = true;
$.jgrid.defaults.pgtext = "Page {0} of {1}";


tableToGrid("table.DataTablex", oGridOptions); 
jQuery("table.DataTablex").each(function(i) {
    var idx = i + 1;
    var sid = "#table" + idx.toString();
    var snavId = "#pagernav" + idx.toString();
    jQuery(sid).jqGrid('setGridParam',{"pager":snavId});
    jQuery(sid).jqGrid('navGrid',snavId,{edit: true, add: true, del: true}, editOpt);



$(".bedata").click(function(){ 
    var iwhich = this.id;
    var sTableId = "#table" + iwhich.toString();
    var gr = jQuery(sTableId).jqGrid('getGridParam','selrow'); 
    if( gr != null )  {
        jQuery(sTableId).jqGrid('editGridRow',gr,{height:280,reloadAfterSubmit:false}); 
    }
    else 
        alert("Please Select Row"); 
      }); 

});
</script>

Answer 1

Я полагаю, что ваша основная проблема - использование "editable":"true" вместо "editable":true или просто editable:true.Вы должны дополнительно удалить атрибут widthOrg из colModel, который будет использоваться для внутренних целей.

Еще одна проблема.Если вы включите jquery.jqGrid.min.js, вы должны , а не , включая grid.tbltogrid.js и grid.formedit.js.Если вы откроете jquery.jqGrid.min.js, то увидите в комментарии в начале файла после текста * Modules: список всех включенных модулей jqGrid.Включение тех же модулей еще раз может привести к серьезным проблемам.

Кстати, если вы определяете объекты, вам не нужно помещать все имена свойств в кавычки.Таким образом, все имена слева от ':' в инициализации объекта ("colNames", "colModel", "name", "index", ...) могут быть записаны без символов "".Многие используемые вами атрибуты (например, «title»: true, «hidden»: false, «resizable»: true, «sortable»: true, «edittype»: «text», ...) имеют значения по умолчанию.Вы можете удалить его, чтобы сделать код короче и лучше читаемым.В документации вы найдете значения по умолчанию для всех colModel свойств и всех параметров jqGrid .