Jqxgrid没有出现

Question

没有显示Jqxgrid。

当我在Chrome中打开它并检查它时，它会显示一个错误：

Uncaught：#(.).jqxgrid不是函数。

我一直在寻找错误，但没有一个解决方案有所帮助。我正在以json数组形式从servlet加载数据。

以下是javascript代码

$(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
             }
        ]
    });
});

下面是使用的脚本标记：

<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

我所做的是从datafields声明和JSON中清除jqxGrid数组、columns数组，使这3项具有相同的键，并避免在接收数据时发生痛苦的转换。

name of a datafield (source的datafields数组)必须匹配column的datafield ( jqxGrid设置的columns数组)，并且必须匹配JSON数据中的属性名。

包括来自jQWidgets的所有所需的JS文件。您可以在笔的JS属性( JS面板左上角的轮子)中看到它。

因此，下面是CodePen：http://codepen.io/adrenalinedj/pen/zBvYLb的一个工作示例

在这里，用于exmaple底部的JSON可以实现我们在聊天中共享的内容：http://codepen.io/adrenalinedj/pen/mEedGr

Answer 2

：#(.).jqxgrid不是函数，当您使用jqxgrid而不是jqxGrid时会引发函数，因为jqxgrid不是函数，jqxGrid是函数。此外，您的数据绑定也不正确。应该将其绑定到适配器，但注释掉了该代码。