javascript - 创建 jqgrid local 时出错

Question

我尝试创建一个 jqgrid 本地:

这是我的代码:

  var mydata=
        [
         {example1:"example1", example2:"2007-10-01",example3:"example "},
        ]
    $("#grid_plan_accion").jqGrid({
        datatype:'local',
        data: mydata,
        colNames:['example1', 'example2',' example3'],
        colModel:[
            { label: 'example1', name: 'example1', width: 20, sorttype:"string", editable:true},
            { label: 'example2', name: 'example2', width: 20, sorttype:"string", editable:true},
            { label: 'example3', name: 'example3', width: 20, sorttype:"string", editable:true},
        ],
        rowNum:10,
        pager: '#pager_plan_accion',
        editurl: 'clientArray',
        width: 150,
        height: 150,
        shrinkToFit: true,

    });

我没有收到错误，只是不显示 jqgrid，我不知道我的错误是什么？请提供任何建议或链接来创建示例，谢谢

Answer 1

        var mydata =
            [
                { example1: "example1", example2: "2007-10-01", example3: "example " },
            ]

        $("#grid_plan_accion").jqGrid({
            datatype: 'json',
            data: mydata,
            colNames: ['example1', 'example2', ' example3'],
            colModel: [
                { label: 'example1', name: 'example1', width: 150, sorttype: "string", editable: true },
                { label: 'example2', name: 'example2', width: 150, sorttype: "string", editable: true },
                { label: 'example3', name: 'example3', width: 150, sorttype: "string", editable: true },
            ],
            rowNum: 10,
            height: 250,
            shrinkToFit: true,

        });
        for (var i = 0; i <= mydata.length; i++)
            jQuery("#grid_plan_accion").jqGrid('addRowData', i + 1, mydata[i]);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqgrid/4.6.0/js/jquery.jqGrid.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqgrid/4.6.0/css/ui.jqgrid.css" />
<table id="grid_plan_accion"></table>