jqgrid sample using array data, what am I missing

2019-02-15 18:35发布

站内问答 / jQuery
404 8 6

I'm new in jqgrid, I'm just trying thes example to work. I have a html file only, nothing more. When I ran this file, array data is not showing. What am I missing here? Thanks in advance.

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>jqGrid Demos</title>
    <link rel="stylesheet" type="text/css" media="screen" href="lib/jquery-ui-1.7.1.custom.css" />
    <link rel="stylesheet" type="text/css" media="screen" href="lib/ui.jqgrid.css" />
    <link rel="stylesheet" type="text/css" media="screen" href="lib/ui.multiselect.css" />
    <style type="text/css">
        html, body {
            margin: 0;   /* Remove body margin/padding */
            padding: 0;
            overflow: hidden; /* Remove scroll bars on browser window */
            font-size: 75%;
        }
        /*Splitter style */


        #LeftPane {
            /* optional, initial splitbar position */
            overflow: auto;
        }
        /*
         * Right-side element of the splitter.
        */

        #RightPane {
            padding: 2px;
            overflow: auto;
        }
        .ui-tabs-nav li {position: relative;}
        .ui-tabs-selected a span {padding-right: 10px;}
        .ui-tabs-close {display: none;position: absolute;top: 3px;right: 0px;z-index: 800;width: 16px;height: 14px;font-size: 10px; font-style: normal;cursor: pointer;}
        .ui-tabs-selected .ui-tabs-close {display: block;}
        .ui-layout-west .ui-jqgrid tr.jqgrow td { border-bottom: 0px none;}
        .ui-datepicker {z-index:1200;}
    </style>
    <script src="lib/jquery-1.4.2.js" type="text/javascript"></script>
    <script src="lib/jquery-ui-1.7.2.custom.min.js" type="text/javascript"></script>
    <script src="lib/jquery.layout.js" type="text/javascript"></script>
    <script src="lib/grid.locale-en.js" type="text/javascript"></script>
    <script src="lib/jquery.jqGrid.min.js" type="text/javascript"></script>
    <script src="lib/jquery.tablednd.js" type="text/javascript"></script>
    <script src="lib/jquery.contextmenu.js" type="text/javascript"></script>
    <script src="lib/ui.multiselect.js" type="text/javascript"></script>
    <script type="text/javascript">
        // We use a document ready jquery function.
        jQuery(document).ready(function(){
            jQuery("#list").jqGrid({
                datatype: "local",
                height: 250,
                colNames:['Inv No','Date', 'Client', 'Amount','Tax','Total', 'Notes'],
                colModel:[
                    {name:'id',index:'id', width:60, sorttype:"int"},
                    {name:'invdate',index:'invdate', width:90, sorttype:"date"},
                    {name:'name',index:'name', width:100},
                    {name:'amount',index:'amount', width:80, align:"right",sorttype:"float"},
                    {name:'tax',index:'tax', width:80, align:"right",sorttype:"float"},
                    {name:'total',index:'total', width:80,align:"right",sorttype:"float"},
                    {name:'note',index:'note', width:150, sortable:false}
                ],
                pager: '#pager',
                rowNum:10,
                rowList:[10,20,30],
                sortname: 'id',
                sortorder: 'desc',
                viewrecords: true,
                multiselect: true,
                imgpath: "lib/basic/images",
                caption: "Manipulating Array Data"
            });
        });
        var mydata = [
            {id:"1",invdate:"2007-10-01",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
            {id:"2",invdate:"2007-10-02",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
            {id:"3",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},
            {id:"4",invdate:"2007-10-04",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
            {id:"5",invdate:"2007-10-05",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
            {id:"6",invdate:"2007-09-06",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},
            {id:"7",invdate:"2007-10-04",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
            {id:"8",invdate:"2007-10-03",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
            {id:"9",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"}
        ];
        for(var i=0;i<=mydata.length;i++)
            jQuery("#list").jqGrid('addRowData',i + 1, mydata1[i]);
    </script>
</head>
<body>
    <table id="list" class="scroll"></table>
    <div id="pager" class="scroll" style="text-align:center;"></div>
</body>

8条回答
甜甜的少女心
2楼-- · 2019-02-15 19:13

I think the problem is in the colModel somehow. Check if the script after colModel runs. Take only colModel out and then check again. I'm also having this problem at the moment.

example:

jQuery("#appGrid").jqGrid({
    datatype: "local", //or clientSide
    colNames: ["Patient"],
    colModel:[{name:'pat',index:'pat'}]
});

*some code* <- won't run

No wonder the loop doesn't work if the grid won't let you execute code after.

But when I do this:

jQuery("#appGrid").jqGrid({
    datatype: "local", //or clientSide
    colNames: ["Patient"]
});

*some code* <- will run after col error message

The Grid builds just fine, but the code after it isn't executed at all. I don't know where the error is.

查看更多
0人赞 添加讨论(0) 举报
迷人小祖宗
3楼-- · 2019-02-15 19:16 
Try this friends
<link rel="stylesheet" type="text/css" href="css/ui.jqgrid.css" />
<script src="js/jquery-1.11.0.min.js" type="text/javascript"></script>
<script src="js/i18n/grid.locale-en.js" type="text/javascript"></script>
<script src="js/jquery.jqGrid.min.js" type="text/javascript"></script>

<script type="text/javascript">
var mydata = [{
    Sno: "1",
    StudentName: "Ricky",
    DateOfJoining: "05/12/2014"
}, {
    Sno: "3",
    StudentName: "Hyden",
    DateOfJoining: "06/12/2014"
}, {
    Sno: "4",
    StudentName: "Gill Crist",
    DateOfJoining:"04/12/2014"
}, {
    Sno: "2",
    StudentName: "Lee",
    DateOfJoining: "07/12/2014"
}];

$(function () {
    $("#grid").jqGrid({
        data: mydata,       
        datatype: "local",        
        colNames: ["Sno", "StudentName", "DateOfJoining"],
        colModel: [
            { name: "Sno", width: 100},
            { name: "StudentName", width: 160 },
            { name: "DateOfJoining", width: 150, align: "right" }           
        ],
        pager: "#pager",
        rowNum: 2,
        rowList: [1, 2, 3],
        sortname: "Sno",
        sortorder: "desc",
        viewrecords: true,
        gridview: true,
        autoencode: true,
        caption: "Student Details"
    }); 
}); 
</script>

</head>
<body>
    <table id="grid"></table> 
    <div id="pager"></div> 
</body>
查看更多
0人赞 添加讨论(0) 举报
Rolldiameter
4楼-- · 2019-02-15 19:21

The example code seems to be broken. Try this in the for loop:

$("#list").addRowData( i, mydata[i], "last" );

Those parameters are: rowId, data, position.

查看更多
0人赞 添加讨论(0) 举报
何必那么认真
5楼-- · 2019-02-15 19:24

I am also trying to develop the same example but also received same error and after doing lots of try and error , finally i come to the right path. i am putting my sample example for loading array data in jqgrid. this is working example.

i have included lots of script file in my head tag because i am not sure about it. i Remove '<' and '>' tag please add it. working code is :-

html xmlns="http://www.w3.org/1999/xhtml

head

<link rel="stylesheet" type="text/css" href="jquery-ui-1.8.22.custom.css" />

<link rel="stylesheet" type="text/css" href="ui.jqgrid.css" />

<script src="js/jquery-1.7.2.min.js" type="text/javascript"></script>
<script src="js/jquery-ui-1.8.2.custom.min.js" type="text/javascript"></script>
<script type="text/javascript" src="js/jquery.jqGrid.min.js"></script>    

script type="text/javascript"

    jQuery(document).ready(function()
    {       jQuery("#list4").jqGrid
            (
                {
                        data: mydata,
                        datatype: "local",
                        height: 250,
                        colNames:['Inv No','Date', 'Client'],
                        colModel:[
                            {name:'id',index:'id', width:60},
                            {name:'invdate',index:'invdate' },
                            {name:'name',index:'name', width:100}

                                ],
                                pager: '#pager',
                                rowNum:2,
                                rowList:[10,20,30],
                                sortname: 'id',
                                sortorder: 'desc',
                                viewrecords: true,
                                multiselect: true,
                                imgpath: "themes/basic/images",
                                caption: "Manipulating Array Data"
                }
            );


    var mydata = [  {id:"1",invdate:"2007-10-01",name:"test"},
                    {id:"2",invdate:"2007-10-01",name:"test"},
                    {id:"3",invdate:"2007-10-01",name:"test"},
                    {id:"4",invdate:"2007-10-01",name:"test"},
                    {id:"5",invdate:"2007-10-01",name:"test"},
                    {id:"6",invdate:"2007-10-01",name:"test"},
                    {id:"7",invdate:"2007-10-01",name:"test"},
                    {id:"8",invdate:"2007-10-01",name:"test"},
                    {id:"1",invdate:"2007-10-01",name:"test"},
                    {id:"1",invdate:"2007-10-01",name:"test"},
                    {id:"1",invdate:"2007-10-01",name:"test"},
                    {id:"1",invdate:"2007-10-01",name:"test"},
                    {id:"1",invdate:"2007-10-01",name:"test"},
                    {id:"1",invdate:"2007-10-01",name:"test"},
                    {id:"1",invdate:"2007-10-01",name:"test"},
                    {id:"1",invdate:"2007-10-01",name:"test"},
                    {id:"1",invdate:"2007-10-01",name:"test"},
                    {id:"1",invdate:"2007-10-01",name:"test"},
                    {id:"1",invdate:"2007-10-01",name:"test"},
                    {id:"1",invdate:"2007-10-01",name:"test"},
                    {id:"1",invdate:"2007-10-01",name:"test"},
                    {id:"1",invdate:"2007-10-01",name:"test"},
                    {id:"1",invdate:"2007-10-01",name:"test"},
                    {id:"1",invdate:"2007-10-01",name:"test"},
                    {id:"1",invdate:"2007-10-01",name:"test"},
                    {id:"1",invdate:"2007-10-01",name:"test"},
                    {id:"1",invdate:"2007-10-01",name:"test"},
                    {id:"1",invdate:"2007-10-01",name:"test"},
                    {id:"1",invdate:"2007-10-01",name:"test"},
                    {id:"1",invdate:"2007-10-01",name:"test"},
                    {id:"1",invdate:"2007-10-01",name:"test"},
                    {id:"1",invdate:"2007-10-01",name:"test"}
                    ];


        for(var i=0;i<=mydata.length;i++)
            jQuery("#list4").addRowData(i, mydata[i]);              
            }//function
    );//ready

script
head

body

This is table

table id="list4"

/table

div id="pager" class="scroll" style="text-align:center;"

/div

This is table

/body
/html
查看更多
0人赞 添加讨论(0) 举报
Anthone
6楼-- · 2019-02-15 19:26

Your array declaration and manipulation loop should be inside of anonymous function jQuery(document).ready(function(){...}), and not outside of it. This way it will be executed after jqQrid initialization and not before.

查看更多
0人赞 添加讨论(0) 举报
手持菜刀，她持情操
7楼-- · 2019-02-15 19:29

You are trying to use a pager when you have not set the pager other needed info like the number of rows and page number. Your loop runs into problems when it can't figure out the values for these variables.

查看更多
0人赞 添加讨论(0) 举报
1 2 下一页
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(6)