Jqxgrid wird nicht angezeigt

Question

Jqxgrid wird nicht angezeigt.

Als ich es im Chrome öffnen und prüfen, zeigt es eine Fehlermeldung,:

Uncaught Typeerror:. # (...) jqxgrid keine Funktion ist.

Ich habe den Fehler gesucht, aber keine der Lösungen geholfen. Ich lade Daten von einem Servlet in JSON-Array-Form.

Im Anschluss an die Javascript-Code

$(document).ready(function() { 
    var myarray = new Array(); 
    vUrlStr = 'SERVLTGrid'; 
    $.ajax({ 
     type: "GET", 
     url: vUrlStr, 
     async: false, 
     dataType: "json", 
     success: function (data) { 
      $.each(data, function (i, data) 
      { 
       var row = {}; 
       row["ref_no"] = new String(data.ref_no); 
       row["ref_name"] = new String(data.ref_name); 
       row["date_col"] = new String(data.date_issued); 
       row["doc_name"] = new String(data.max_credit); 
       row["max_credit"] = new String(data.val_period); 
       row["val"] = new String(data.treat_needed); 
       row["latest_start"] = new String(data.late_start); 
       row["treat_need"] = new String(data.doc_name); 
       row["ref_date"] = new String(data.ref_date); 
       myarray[i] = row; 
      }); 
     }, 
     error: function (e, ts, et) { 
      alert("error" + ts + et); 
     } 
    }); 
    var source = { 
     localdata: myarray, 
     datafields: [ 
      { 
       name: 'ref_no', 
       type: 'string' 
      }, 
      { 
       name: 'ref_name', 
       type: 'string' 
      }, 
      { 
       name: 'date_col', 
       type: 'string' 
      }, 
      { 
       name: 'doc_name', 
       type: 'string' 
      }, 
      { 
       name: 'max_credit', 
       type: 'string' 
      }, 
      { 
       name: 'val', 
       type: 'string' 
      }, 
      { 
       name: 'latest_start', 
       type: 'string' 
      }, 
      { 
       name: 'treat_need', 
       type: 'string' 
      }, 
      { 
       name: 'ref_date', 
       type: 'string' 
      } 
     ], 
     datatype: "array" 
    }; 
    //var dataAdapter = new $.jqx.dataAdapter(source); 
    $("#jqxgrid").jqxGrid({ 
     width: 500, 
     source: source, 
     columnsresize: true, 
     pageable: true, 
     autoheight: true, 
     filterable: true, 
     sortable: true, 
     altrows: true, 
     enabletooltips: true, 
     autoshowfiltericon: true, 
     editable: true, 
     selectionmode: 'singlerow', 
     columns: [ 
      { 
       text: 'Reference No.', 
       datafield: 'ref_no', 
       editable: false, 
       width: 50 
      }, 
      { 
       text: 'Referral Hospital', 
       datafield: 'ref_name', 
       editable: false, 
       width: 100 
      }, 
      { 
       text: 'Date issued', 
       datafield: 'date_col', 
       editable: false, 
       hidden: true, 
       width: 50 
      }, 
      { 
       text: 'Doctors Name', 
       datafield: 'doc_name', 
       hidden: true, 
       editable: false, 
       width: 50 
      }, 
      { 
       text: 'Maximum Credit, Rs.', 
       hidden: true, 
       datafield: 'max_credit', 
       editable: false, 
       width: 50 
      }, 
      { 
       text: 'Validation Period', 
       hidden: true, 
       datafield: 'val', 
       editable: false, 
       width: 50 
      }, 
      { 
       text: 'Latest Start by', 
       datafield: 'latest_start', 
       editable: false, 
       width: 50 
      }, 
      { 
       text: 'Treatment Needed', 
       hidden: true, 
       datafield: 'treat_need', 
       editable: false, 
       width: 50 
      }, 
      { 
       text: 'Referral Date', 
       hidden: true, 
       datafield: 'ref_date', 
       editable: false, 
       width: 50 
      } 
     ] 
    }); 
}); 

Hier werden die Script-Tags verwendet werden:

<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script> 
<link rel="stylesheet" href="jqwidgets/styles/jqx.base.css" type="text/css"> 
<script type="text/javascript" src="jqwidgets/jqxcore.js"></script> 
<script type="text/javascript" src="jqwidgets/jqxdata.js"></script> 
<script type="text/javascript" src="jqwidgets/jqxbuttons.js"></script> 
<script type="text/javascript" src="jqwidgets/jqxscrollbar.js"></script> 
<script type="text/javascript" src="jqwidgets/jqxmenu.js"></script> 
<script type="text/javascript" src="jqwidgets/jqxcheckbox.js"></script> 
<script type="text/javascript" src="jqwidgets/jqxlistbox.js"></script> 
<script type="text/javascript" src="jqwidgets/jqxdropdownlist.js"></script> 
<script type="text/javascript" src="jqwidgets/jqxgrid.js"></script> 
<script type="text/javascript" src="jqwidgets/jqxgrid.filter.js"></script> 
<script type="text/javascript" src="jqwidgets/jqxgrid.sort.js"></script> 
<script type="text/javascript" src="jqwidgets/jqxgrid.selection.js"></script> 
<script type="text/javascript" src="jqwidgets/jqxgrid.columnsresize.js"></script> 
<script type="text/javascript" src="jqwidgets/jqxgrid.pager.js"></script> 
<script type="text/javascript" src="jqwidgets/jqxdata.export.js"></script> 
<script type="text/javascript" src="jqwidgets/jqxgrid.edit.js"></script> 
<script type="text/javascript" src="jqwidgets/jqxgrid.export.js"></script> 

Answer 1

Was ich getan habe ist das datafields Array zu reinigen, die columns Array aus jqxGrid Deklaration und der JSON, um diese 3 Elemente mit den gleichen Schlüsseln zu versehen und eine schmerzhafte Umwandlung zu vermeiden, wenn Daten empfangen werden.

Die name eines datafield (datafields Array einer source) muss die datafield eines column (columns Array der jqxGrid Einstellungen) entsprechen und mit einem Eigenschaftsnamen in den JSON Daten übereinstimmen.

Alle benötigten JS-Dateien von jQWidgets sind enthalten. Sie können es in den JS-Eigenschaften des Stifts sehen (das Rad in der oberen linken Ecke des JS-Bedienfelds).

So, hier ist ein Arbeits exmaple auf CodePen: http://codepen.io/adrenalinedj/pen/zBvYLb

Und hier die JSON für exmaple Base don, was Sie im Chat teilten wir gemacht: http://codepen.io/adrenalinedj/pen/mEedGr

Answer 2

Uncaught Typeerror: # (.. .). jqxgrid ist keine Funktion wird ausgelöst, wenn Sie jqxgrid anstelle von jqxGrid verwenden, weil jqxgrid keine Funktion ist, jqxGrid ist. Auch Ihre Datenbindung ist falsch. Sie sollten es an den Adapter binden, aber Sie haben diesen Code auskommentiert.