Question

Jqxgrid未显示。

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

Uncaught Typeerror：＃（...）。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数组，jqxGrid声明中的columns数组和JSON，以使这3个项具有相同的键并避免在收到数据时进行痛苦的转换

name datafield的{{1}}数组的datafields必须与source的{{1}}匹配（{{1} datafield设置的数组）并且必须与JSON数据中的属性名称匹配。

包含jQWidgets所需的所有JS文件。你可以在Pen的JS属性中看到它（JS面板左上角的轮子）。

所以，这是CodePen的一个有效例子：http://codepen.io/adrenalinedj/pen/zBvYLb

这里用于exmaple base的JSON不是你在我们聊天中分享的内容： http://codepen.io/adrenalinedj/pen/mEedGr

Answer 2

Uncaught Typeerror：＃（...）。当你使用jqxgrid代替jqxGrid时，jqxgrid不会被引发，因为jqxgrid不是函数，jqxGrid是。您的数据绑定也是错误的。您应该将它绑定到适配器，但您注释掉了该代码。

Jqxgrid没有出现

2 个答案: