Пример jqgrid с использованием данных массива, чего мне не хватает - PullRequest
2 голосов
/ 17 марта 2010

Я новичок в jqgrid, я просто пытаюсь, чтобы этот пример работал. У меня есть только HTML-файл, не более того. Когда я запустил этот файл, данные массива не отображаются. Что мне здесь не хватает? Заранее спасибо.

<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 голосов
/ 24 октября 2011

Ах, это чертовски опечатка в демо-коде.

Массив, который объявлен, называется mydata, а массив в цикле - mydata1 [..] (обратите внимание, что зло 1)

grid.locale-en должен быть объявлен первым! Тогда отладчик браузера может сказать вам.

(больше "bugyi's, у меня есть странная загрузка текста сверху и полосатый серый фон.)

1 голос
/ 09 июня 2011

Я думаю, что проблема в colModel как-то.Проверьте, запускается ли скрипт после colModel.Возьмите только colModel и проверьте снова.У меня также есть эта проблема в данный момент.

пример:

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

*some code* <- won't run

Неудивительно, что цикл не работает, если сетка не позволит вам выполнить код после.*

Но когда я делаю это:

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

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

Grid строится просто отлично, но код после него вообще не выполняется.Я не знаю, где ошибка.

1 голос
/ 18 ноября 2010

Это css и js для включения, которые делают трюк для меня. Очень важно включить grid.base.js

1 голос
/ 15 сентября 2010

Вы пытаетесь использовать пейджер, если вы не указали в пейджере другую необходимую информацию, такую ​​как количество строк и номер страницы. Ваш цикл сталкивается с проблемами, когда он не может определить значения этих переменных.

0 голосов
/ 08 июля 2014
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 голосов
/ 04 октября 2012

Ваше объявление массива и цикл манипуляции должны быть внутри анонимной функции jQuery(document).ready(function(){...}), а не вне ее. Таким образом, он будет выполняться после инициализации jqQrid, а не до.

0 голосов
/ 22 октября 2010

Я также пытаюсь разработать тот же пример, но также получил ту же ошибку, и после того, как я сделал много попыток и ошибок, я наконец пришел по правильному пути Я помещаю мой пример для загрузки данных массива в jqgrid. это рабочий пример.

Я включил много файлов сценариев в свой тег head, потому что я не уверен в этом. Удалите теги «<» и «>», пожалуйста, добавьте его. рабочий код: -

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 голосов
/ 18 марта 2010

Код примера, кажется, не работает. Попробуйте это в цикле for:

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

Эти параметры: rowId, data, position.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...