0

我的 jqGrid 上的按钮不会显示（后退、前进、第一页、最后一页、搜索等）。

图片：

代码：

<h3><?php echo $title?></h3>
<?php $lastbids = SchedulesData::GetLatestBids(); print_r($lastbids);?>
<link rel="stylesheet" type="text/css" media="screen" href="website/lib/js/jqgrid/css/ui.jqgrid.css" />
<script src="website/lib/js/jqgrid/js/i18n/grid.locale-en.js" type="text/javascript"></script>
<script src="website/lib/js/jqgrid/js/jquery.jqGrid.min.js" type="text/javascript"></script>

<table id="grid"></table>
<div id="pager"></div>
<br />

<script type="text/javascript">
$("#grid").jqGrid({
   url: 'website/schedules/schedulegrid',
   datatype: 'json',
   mtype: 'GET',
   colNames: ['Code', 'Flight Num', 'Departure', 'Arrival', 'Aircraft', 'Distance', 'Route',
                'Bid'],
   colModel : [
        {index: 'code', name : 'code', width: 40, sortable : true, align: 'center', search: 'true', searchoptions:{sopt:['eq','ne']}},
        {index: 'flightnum', name : 'flightnum', width: 65, sortable : true, align: 'center', searchoptions:{sopt:['eq','ne']}},
        {index: 'depicao', name : 'depicao', width: 60, sortable : true, align: 'center',searchoptions:{sopt:['eq','ne']}},
        {index: 'arricao', name : 'arricao', width: 60, sortable : true, align: 'center',searchoptions:{sopt:['eq','ne']}},
        {index: 'a.name', name : 'aircraft', width: 100, sortable : true, align: 'center',searchoptions:{sopt:['in']}},
        {index: 'distance', name : 'distance', width: 100, sortable : true, align: 'center', searchoptions:{sopt:['lt','le','gt','ge']}},
        {index: 'route', name : 'route', width: 100, sortable : true, align: 'center',searchoptions:{sopt:['in']}},
        {index: '', name : '', width: 100, sortable : true, align: 'center', search: false}
    ],
    pager: '#pager', rowNum: 25,
    sortname: 'flightnum', sortorder: 'asc',
    viewrecords: true, autowidth: true,
    height: '100%'

});

jQuery("#grid").jqGrid('navGrid','#pager', 
    {edit:false,add:false,del:false,search:true,refresh:true},
    {}, // edit 
    {}, // add 
    {}, //del 
    {multipleSearch:true} // search options 
); 

function showroute(schedule_id)
{
    $('#jqmdialog').jqm({
        ajax:'website/schedules/viewmap?type=schedule&id='+schedule_id
    }).jqmShow();
}

function addbid(id)
{
    $.post("http://website/schedules/addbid", { id: id },
            function() 
            { 
                $("#grid").trigger("reloadGrid"); 
            }
        );
}

function removebid(id)
{
        $.post("http://website/schedules/removebid", { id: id },
            function() 
            { 
                $("#grid").trigger("reloadGrid"); 
            }
        );

}
</script>

我查看了有关堆栈溢出的其他一些帖子，但似乎没有一个对我有用。如何让按钮显示？

4

1 回答 1

1

您必须包含一些 jQuery UI CSS 文件。例如：

<link rel="stylesheet" type="text/css"
      href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/redmond/jquery-ui.css" />

请参阅文档中的示例。

于 2013-08-31T18:52:28.600 回答