Free jqGrid - Zeile nicht eingeben bearbeiten

Question

Ich benutze Free jqGrid 4.13.0 für ein kleines Projekt und ich kann nicht scheinen, um die Zeilen zum Bearbeitungsmodus aus beiden Aktion Schaltflächen und inlineNav Edit-Taste.

Die Zeilen werden durch die Schaltfläche "Hinzufügen" hinzugefügt, aber sie gehen nicht in den Bearbeitungsmodus. Der Versuch, mit einer der Tasten in den Bearbeitungsmodus zu gelangen, funktioniert auch nicht.

Könnte es die Reihenfolge der css/js-Dateien sein, in denen sie im html eingetragen sind? Fehle ich eine js-Datei?

Ich habe derzeit 2 Gitter, die ziemlich gleich sind und keiner von ihnen funktioniert.

<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 Datei:

$(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

Vor allem empfehle ich unbedingt die neueste kostenlose jqGrid Version zu verwenden, die veröffentlicht wird. Es ist derzeit 4.13.2. Es enthält einige kleine Fehlerbehebungen in Version 4.13.0. Alle Fixes haben keine Beziehung zu Ihrem Problem.

Ich sehe die folgenden Probleme in Ihrem Code:

• Das Hauptproblem editable: true Eigenschaft in den Spalten des Rasters fehlt, die vom Benutzer bearbeitet werden soll.
• Ich empfehle Ihnen, nicht benötigte versteckte id Spalte zu entfernen und cmTemplate: { editable: true } Option von jqGrid verwenden, um editable: true Eigenschaft in allen Spalten des Rasters festzulegen. Wenn Sie einige andere Eigenschaften in den meisten Spalten von jqGrid verwenden, wie width: 80, align: 'right', search: false, dann wäre es besser, die Werte in cmTemplate: cmTemplate: { editable: true, autoResizable: true, width: 80, align: 'right', search: false} zu verschieben, die default Werte der Eigenschaften von colModel angibt. Sie sollten die Angabe der Eigenschaften in colModel überspringen und die Eigenschaften in anderen Spalten überschreiben. Zum Beispiel sollten Sie weiterhin width: 90 in phone Spalte angeben.
• Die Eigenschaften von colModel scheint falsch zu sein. Sie haben keine Testdaten vom Server zurückgegeben (von url: "/LicentaREST/rest/customers/getCustomersGrid"), aber es scheint, dass Sie die Bedeutung von name, index und label Eigenschaften von colModel mischen. Die name ist wie ID der Spalte. Es darf keine Leerzeichen enthalten. Die Werte wie name: 'Black Listed Status' sind definitiv falsch. Sie meinen wahrscheinlich label: 'Black Listed Status'. Die Werte, die Sie für die Eigenschaft index verwendet haben, sollten wahrscheinlich die Werte der Eigenschaft name sein. Es wird strengstens empfohlen, keine index Eigenschaft zu spezifizieren, wenn es wirklich benötigt wird. Daher sollte name: 'Black Listed Status', index: 'blackListed' zum Beispiel wahrscheinlich wie alle anderen Spalten von jqGrid in label: 'Black Listed Status', name: 'blackListed' geändert werden.
• Es wird empfohlen, pager: true anstelle von pager: "#customersPager" zu verwenden und '#customersPager' Parameter von inlineNav zu überspringen. Sie können nicht benötigte <div id="customersPager"></div> aus dem HTML-Markup der Seite entfernen und den Code ein wenig vereinfachen.
• Ich empfehle zu entfernen height: "330" (korrekt wäre height: 330) zu Standard height: "auto" verwenden. Der Wert rowNum definiert die Höhe des Gitters im Fall. Die Standardeinstellung height: "auto" ist die beste Wahl nicht in allen Szenarien, aber in den meisten Fällen.
• Sie sollten die CSS- und JS-Dateien überprüfen, die Sie auf der Seite enthalten. Einschließlich von jquery-ui.css, jquery-ui.min.css und jquery-ui.theme.css ist falsch. Es reicht, nur jquery-ui.min.css einzuschließen. Anstatt ui.jqgrid.css einzuschließen, können Sie ui.jqgrid.min.css einschließen. Sie sollten grid.locale-en.js entfernen, da die Datei jquery.jqgrid.min.js bereits alle Einstellungen für en-US von grid.locale-en.js enthält.
• Es wird empfohlen, Font Awesome 4.x CSS auf der Seite einzufügen und die Option iconSet: "fontAwesome" hinzuzufügen. Es verbessert das Aussehen der im Raster angezeigten Symbole. Sie sollten die Option addicon: 'ui-icon-plus' aus dem Anruf von inlineNav entfernen. Es ist der Standardwert im Falle der Verwendung von Standard-jQuery UI-Symbolen und der Wert ist falsch, wenn Sie Font Awesome-Symbole verwenden würden. Der Aufruf von inlineNav kann auf grid.jqGrid('inlineNav', {edit: false, save: false, cancel: false, addtext: 'Add', addParams: { position: 'last' }}
• reduziert werden Die Variable customersOrdersGrid, die Sie in ondblClickRow verwenden, scheint nicht definiert zu sein. Ich würde Ihnen empfehlen, "use strict"; als die erste Anweisung der $(function() {...});-Funktion einzuschließen, um solche Art von Fehler zu finden.
• Sie haben keine Informationen über die Gesamtzahl der Zeilen angegeben, die auf dem Server zurückgegeben werden könnten. Ich empfehle Ihnen, loadonce: true Option zu verwenden und alle Daten auf einmal zurückzugeben, wenn die Gesamtzahl der Zeilen nicht groß genug ist. Zum Beispiel weniger als 1000 oder weniger als 10000. The demo kann verwendet werden, um die Leistung von lokalen Paging, Sortierung und Filterung des Gitters mit 4000 Zeilen, 13 Spalten und 20 Zeilen pro Seite zu testen. Another demo verwendet sogar 40000 Zeilen und es funktioniert auch sehr schnell, wenn Sie moderne Webbrowser wie Chrome, Firefox oder Edge verwenden würden. Sie sollten über die Zeit für das Senden der Daten an den Server und den Overhead der Operation nachdenken. Die Verwendung von loadonce: true vereinfacht sowohl den Server-Code als auch den Client-Code und verbessert in den meisten Fällen die Verantwortlichkeit des Grids. Die genaue Auswahl hängt immer noch von der Gesamtzahl der Zeilen im Raster ab. Es wird nicht für eine sehr große Anzahl von Zeilen gut sein.