jqgrid：如何更改寻呼机的布局？答案

【问题标题】：jqgrid: how do I change the layout of the pager?jqgrid：如何更改寻呼机的布局？
【发布时间】：2014-02-13 14:54:15
【问题描述】：

我想更改寻呼机的布局，使 VCR 按钮全部组合在一起，然后是页码输入字段，然后是行数下拉菜单。我将如何做到这一点？

这是我目前用来显示 jqgrid 的代码。它是标准的 JavaScript 代码：

$(function(){ 
  $("#" + listName).jqGrid({
    url: url,
    datatype: 'json',
    mtype: 'GET',
    colNames: columnNames,
    colModel: columnModel,
    pager: pagerName,
    rowNum: displayRows,
    rowList: rowList,
    sortname: initSortCol,
    sortorder: initSortOrder,
    viewrecords: true,
    multiselect: multiSelect,
    gridview: true,
    caption: caption,
    height: height,
    jsonReader: {
            root: 'data',
            page: 'currentPage',
            total: 'totalPages',
            records: 'totalRows',
            repeatitems: false,
            id: dataModelRowId
        }
  }); 
  jQuery("#" + listName).jqGrid('navGrid','#' + pagerName,{edit:false,add:false,del:false,search:false});

【问题讨论】：

你能发布你的代码吗？
我正在使用标准的 JavaScript 代码来显示网格。我还没有定制任何东西。我更新了我的帖子以显示我是如何调用 jqgrid 的。

标签： jqgrid

【解决方案1】：

带有page number、number of records per page 的 jqgrid 示例。

代码：

$(document).ready(function(){
    //jqGrid
    $("#librariesList").jqGrid({
        url:'<%=request.getContextPath()%>/Admin/getAllLibraries',
        datatype: "json",               
        colNames:['Id','Edit','Type','Created Date', 'Modified Date', 'Url', 'Use Url'],
        colModel:[
            {name:'libraryId', index:'libraryId',search:false, width:30,sortable: false,hidden:true},
            {name:'libraryId', index:'libraryId',search:false, width:30,sortable: false, formatter: editLink},
            {name:'type',index:'type',width:80},
            {name:'createdDate',index:'createdDate',width:150},
            {name:'modifiedDate',index:'modifiedDate',width:150},
            {name:'url',index:'url',width:150},
            {name:'useUrl',index:'useUrl',width:50},
            ],
            rowNum:20,
            rowList:[10,20,30,40,50],
            rownumbers: true,  
            pager: '#pagerDiv',
            sortname: 'createdDate',  
            viewrecords: true,  
            sortorder: "asc",
            autowidth:'true',
    });

    $('#gridContainer div:not(.ui-jqgrid-titlebar)').width("100%");
    $('.ui-jqgrid-bdiv').css('height', window.innerHeight * .55);
    $('#load_librariesList').width("130");
    $("#librariesList").jqGrid('navGrid','#pagerDiv',{edit:false,add:false,del:false},{},{},{},{closeAfterSearch:true});
    $(".inline").colorbox({inline:true, width:"20%"});
});
function editLink(cellValue, options, rowdata, action)
   {
    return "<a href='<%=request.getContextPath()%>/Admin/editLibrary/"+ rowdata.libraryId + "' class='ui-icon ui-icon-pencil' ></a>";
}

jggrid 显示如下：

【讨论】：

这没有回答我的问题。我想知道如何将寻呼机按钮一起显示，而不是被 Page 输入字段分隔。