JQGrid не отображает

Я пытаюсь использовать JQGrid, как в http://trirand.com/blog/jqgrid/jqgrid.html. Но это ничего не показывает. Пожалуйста, помогите мне получить эту работу.JQGrid не отображает

<html> 
<head> 
    <script type="text/javascript" src="jquery-3.1.1.min.js"></script> 
    <script type="text/javascript"> 
     $(document).ready(function() { 
      jQuery("#s3list").jqGrid({ 
       url:'search.php?q=1', 
       datatype: "json", 
       width: 700, colNames:[ 
       'Inv No','Date', 'Client', 'Amount','Tax','Total','Notes'], 
       colModel:[ 
        {name:'id',index:'id', width:65}, 
        {name:'invdate',index:'invdate', width:90, 
         searchoptions:{ 
         dataInit:function(el) { 
          $(el).datepicker({dateFormat:'yy-mm-dd'}); 
         } }}, 
        {name:'name',index:'name', width:100}, 
        {name:'amount',index:'amount', width:80, align:"right"}, 
        {name:'tax',index:'tax', width:80, align:"right", stype:'select', 
         editoptions:{value:":All;0.00:0.00;12:12.00;20:20.00;40:40.00;60:60.00;120:120.00"}}, 
        {name:'total',index:'total', width:80,align:"right"} 
        {name:'note',index:'note', width:150, sortable:false} 
       ], 
       rowNum:10, 
       mtype: "POST", 
       rowList:[10,20,30], 
       pager: '#s3pager', 
       sortname: 'id', 
       viewrecords: true, 
       rownumbers: true, 
       sortorder: "desc", 
       gridview : true, 
       caption:"Toolbar Search Example" 
      }); 
      jQuery("#s3list").jqGrid('navGrid','#s3pager', 
       {edit:false,add:false,del:false,search:false,refresh:false}); 
      jQuery("#s3list").jqGrid('navButtonAdd',"#s3pager", { 
       caption:"Toggle", 
       title:"Toggle Search Toolbar", 
       buttonicon :'ui-icon-pin-s', 
       onClickButton:function(){ 
        mygrid[0].toggleToolbar() 
       } 
      }); 
      jQuery("#s3list").jqGrid('navButtonAdd',"#s3pager", { 
       caption:"Clear", 
       title:"Clear Search", 
       buttonicon :'ui-icon-refresh', 
       onClickButton:function(){ 
        mygrid[0].clearToolbar() 
       } 
      }); 
      jQuery("#s3list").jqGrid('filterToolbar'); 
     }); 
</script>  
</head> 
<body> 
    <table id="s3list"></table> 
     <div id="s3pager"></div> 
     <div id="filter" style="margin-left:30%;display:none">Search Invoices</div>  
</body> 
</html>

источник

2017-02-21 SaikiHanee

Try библиотеки импорта jqgrid. Ваш пример работает здесь. http://jsfiddle.net/vwb1c0mk/143/ – Zzap

Вы должны отформатировать код, чтобы люди могли его прочитать. Текущий код содержит ** синтаксическую ошибку **: отсутствует запятая между столбцом 'total' и' note' в 'colModel'. Это была ошибка ввода, тогда вы должны включить данные JSON, возвращенные с его 'url'. Вы должны включить во все вопросы о jqGrid информацию о ** версии ** jqGrid, которую вы используете (можете использовать) и ** fork ** ([free jqGrid] (https://github.com/free- jqgrid/jqGrid), коммерческий [Guriddo jqGrid JS] (http://guriddo.net/?page_id=103334) или старый jqGrid в версии <= 4.7). – Oleg

Перед использованием этих функций вам необходимо загрузить библиотеку jqGrid javascript. Загрузите скрипты с http://www.trirand.com/blog/?page_id=6 и добавьте их в свой скрипт. (Загрузите скрипт сразу после загрузки JQuery)

или просто добавьте это:

<script type="text/javascript" src="https://cdn.jsdelivr.net/jqgrid/4.6.0/jquery.jqGrid.min.js"></script>

Надеется, что помогло :)

источник

2017-02-21 11:40:53

ответ

Смежные вопросы