Free jqGrid - строка не входит в редактирование

Question

Я использую Free jqGrid 4.13.0 для небольшого проекта, и я не могу заставить строки войти в режим редактирования как с кнопок действий, так и с кнопки редактирования inlineNav.

Строки добавляются кнопкой «добавить», но они не входят в режим редактирования. Попытка войти в режим редактирования с помощью любой из кнопок не работает.

Может ли быть порядок файлов css/js в ведьме, они введены в html? Мне не хватает файла js?

В настоящее время у меня есть 2 сетки, которые почти одинаковы, и ни один из них не работает.

<link rel="stylesheet" type="text/css" href="jqueryUI/jquery-ui.css"></link> 
<link rel="stylesheet" type="text/css" href="jqueryUI/jquery-ui.min.css"></link> 
<link rel="stylesheet" type="text/css" href="jqueryUI/jquery-ui.theme.css"></link> 
<link rel="stylesheet" type="text/css" media="screen" href="jqueryGrid/css/ui.jqgrid.css"></link> 
<link rel='stylesheet' href='css/bootstrap.css'></link> 
<link rel="stylesheet" type="text/css" href="css/cascade.css" /> 

<script src="jquery/jquery-1.12.1.min.js" type="text/javascript"></script> 
<script src="jqueryUI/jquery-ui.min.js" type="text/javascript"></script> 
<script src="jqueryGrid/js/i18n/grid.locale-en.js" type="text/javascript"> </script> 
<script src="jqueryGrid/js/jquery.jqgrid.min.js" type="text/javascript">  </script> 

<script src="customerGrid.js" type="text/javascript" ></script> 
<script src="customerOrderGrid.js" type="text/javascript" ></script> 

//// customerGrid.js файл:

$(function() { 
    var grid = $("#customersGrid"); 
    grid.jqGrid({ 
     url: "/LicentaREST/rest/customers/getCustomersGrid", 
     mtype: "POST", 
     datatype: "json", 
     ajaxGridOptions: {contentType: 'application/json; charset=utf-8'}, 
     serializeGridData: function (postData) { 
      if (postData.searchField === undefined) postData.searchField = null; 
      if (postData.searchString === undefined) postData.searchString = null; 
      if (postData.searchOper === undefined) postData.searchOper = null; 
      return JSON.stringify(postData); 
     } 
     }, 
     colModel: [ 
      {name: 'ID', index: 'id', width: 55, hidden: true}, 
      {name: 'Name', index: 'name', width: 80, align: 'right', search: false}, 
      {name: 'Phone', index: 'phone', width: 90}, 
      {name: 'Address', index: 'address', width: 80, align: 'right', search: false}, 
      {name: 'Client Since', index: 'clientSince', width: 80, align: 'right', search: false}, 
      {name: 'Total Orders', index: 'totalOrders', width: 80, align: 'right', search: false}, 
      {name: 'Total Ammount Orders', index: 'totalAmmountOrders', width: 80, align: 'right', search: false}, 
      {name: 'Canceled Orders', index: 'canceledOrders', width: 80, align: 'right', search: false}, 
      {name: 'Black Listed Status', index: 'blackListed', width: 80, align: 'right', search: false}, 

     ], 
     ondblClickRow: function (rowid) { 
      $.ajax({ 
       type: "POST", 
       url: "/LicentaREST/rest/getCustomerOrders", 
       data: JSON.stringify(rowid), 
       success: function (response) { 
        if (response.errorCode == 0) { 
         customersOrdersGrid.jqGrid('clearGridData').jqGrid('setGridParam', 'data', response.data); 
        } 
        else { 
        } 
       }, 
       error: function (jqXHR, textStatus, errorThrown) { 
        console.log(textStatus, errorThrown); 
       } 
      }); 
     }, 
     pager: "#customersPager", 
     rowNum: 15, 
     rowList: [15,50, 100, 250,500], 
     rownumbers: true, 
     sortname: 'id', 
     sortorder: 'desc', 
     viewrecords: true, 
     caption: 'Customers', 
     height: "330", 
     autowidth: true 

    }); 
    grid.jqGrid('inlineNav', '#customersPager', 
     { 
      add: true, 
      edit: false, 
      save: false, 
      cancel: false, 
      addicon: 'ui-icon-plus', 
      addtext: 'Add', 
      addedrow: 'last' 
    }); 
}); 

Answer 1

Прежде всего, я строго рекомендую использовать последнюю бесплатную версию jqGrid, которая публикуется. На данный момент это 4.13.2. Он содержит некоторые небольшие исправления ошибок, существующие в версии 4.13.0. Все исправления не имеют никакого отношения к вашей проблеме.

Я вижу следующие проблемы в коде:

• Основная проблема отсутствует editable: true свойства в столбцах сетки, которые должны быть доступны для редактирования пользователя.
• Я рекомендую удалить ненужный скрытый столбец id и использовать cmTemplate: { editable: true } вариант jqGrid для установки editable: true свойство во всех столбцах сетки. Если вы используете некоторые другие свойства в большинстве столбцов jqGrid, например width: 80, align: 'right', search: false, тогда было бы лучше переместить значения в cmTemplate: cmTemplate: { editable: true, autoResizable: true, width: 80, align: 'right', search: false}, который определяет по умолчанию значения свойств colModel. Вы должны пропустить указание свойств в colModel и перезаписать свойства в других столбцах. Например, вы должны продолжить указывать width: 90 в колонке phone.
• Свойства colModel кажутся неправильными. Вы не включаете никаких данных теста, возвращаемых с сервера (от url: "/LicentaREST/rest/customers/getCustomersGrid"), но кажется, что вы смешиваете значение name, index и label свойствами colModel. name - как идентификатор столбца. У него не может быть пробелов. Значения, такие как name: 'Black Listed Status', окончательно ошибочны. Вы имеете в виду, вероятно, label: 'Black Listed Status'. Значения, которые вы использовали для свойства index, должны быть, вероятно, значениями name. Настоятельно рекомендуется избегать указания любого свойства index, если это действительно необходимо. Таким образом, например, name: 'Black Listed Status', index: 'blackListed' должен быть заменен на label: 'Black Listed Status', name: 'blackListed', как и все остальные столбцы jqGrid.
• Рекомендуется использовать pager: true вместо pager: "#customersPager" и пропустить '#customersPager' параметр от inlineNav. Вы можете удалить ненужный <div id="customersPager"></div> из разметки HTML страницы и немного упростить код.
• Я рекомендую рассмотреть, чтобы удалить height: "330" (правильный будет height: 330) использовать по умолчанию height: "auto". Значение rowNum определит высоту сетки в корпусе. Значение по умолчанию height: "auto" - лучший выбор не во всех сценариях, а в самом одном.
• Вы должны просмотреть файлы CSS и JS, которые вы укажете на странице. В том числе jquery-ui.css, jquery-ui.min.css и jquery-ui.theme.css является неправильным. Достаточно включить только jquery-ui.min.css. Вместо того, чтобы включать ui.jqgrid.css, вы можете включить ui.jqgrid.min.css. Вы должны удалить grid.locale-en.js, потому что файл jquery.jqgrid.min.js содержит уже все настройки для en-US от grid.locale-en.js.
• Рекомендуется использовать Font Awesome 4.x CSS на странице и добавить iconSet: "fontAwesome". Это улучшает внешний вид значков, отображаемых в сетке. Вы должны удалить опцию addicon: 'ui-icon-plus' по телефону inlineNav. Это значение по умолчанию при использовании значков пользовательского интерфейса jQuery по умолчанию, и значение будет неправильным, если вы будете использовать значки шрифта Awesome. Вызов inlineNav может быть уменьшен до grid.jqGrid('inlineNav', {edit: false, save: false, cancel: false, addtext: 'Add', addParams: { position: 'last' }}
• Переменная customersOrdersGrid, которую вы используете в ondblClickRow, кажется не определена. Я бы рекомендовал включить "use strict"; в качестве первого оператора функции $(function() {...});, чтобы найти такую ​​ошибку.
• У вас нет информации об общем количестве строк, которые могут быть возвращены на сервере. Я рекомендую использовать опцию loadonce: true и вернуть все данные сразу, если общее количество строк недостаточно велико. Например, менее 1000 или менее, как 10000. The demo может использоваться для проверки производительности local подкачки, сортировка и фильтрация сетки с 4000 строк, 13 столбцов и 20 строк на страницу. Another demo использует даже 40000 строк, и он работает очень быстро, если вы будете использовать современный веб-браузер, например Chrome, Firefox или Edge. Вы должны подумать о времени отправки данных на сервер и все накладные расходы на операцию. Использование loadonce: true упрощает как код сервера, так и код клиента и в наибольшей степени повышает ответственность сетки. Точный выбор по-прежнему зависит от общего количества строк в сетке. Это будет плохо для очень большого количества строк.