如何在自由jqgrid中将寻呼机放在工具栏顶部的末尾 [英] how to place pager to end of top of toolbar in free jqgrid

问题描述

免费jqgrid顶部工具栏包含很多按钮，选择元素和寻呼机没有最后一页按钮。
按钮包装到多行。中心部分使用

删除

  #grid_toppager_center {
 width：0; 
} 
  

由于寻呼机在正确的区域，下面有很多未使用的空白

：

我尝试使用

删除空白区域。

  #grid_toppager_center，#grid_toppager_right {
 width：0; 
} 
  

和

  pagerpos：'left'，
  

工具栏按钮顶部：

如何将寻呼机放置到其他地方，例如到顶部工具栏的末尾？

jqgrid设置：

  $。extend（$。jgrid.defaults，{
 iconSet：fontAwesome，
 autoResizing： true，widthOfVisiblePartOfSortIcon：13}，
 toppager：true，
 viewrecords：false，
 pagerpos：'left'，
 rowList：[50,500,1000]，
 rowNum：50，
  

style：

  #grid_toppager_center，#grid_toppager_right {
 width：0; 
} 
 
 .ui-pg-button-text {
 margin：4px！important; 
} 
 
 .ui-jqgrid .ui-jqgrid-toppager .ui-pg-div> span {
 margin：0 5px; 
 font-size：20px; 
} 
 
 .ui-jqgrid .ui-pg-table .ui-pg-button.ui-state-active {
 margin：1px; 
 font-weight：normal; 
} 
  

更新

我从

试用了demo。

：

一般来说，可以使用传呼机，只隐藏传呼机的正确部分。在这种情况下，可以使用

  $（＃grid_toppager_right）。 
 $（＃grid_toppager_left）。attr（colspan，2）; 
  

请参见：

UPDATED ：问题的解决方案取决于您所拥有的确切需求。我想告诉你在寻呼机和导航栏中有一个主要的问题。

例如下一个演示会移动导航栏中的分页页面。结果如下图所示

如果您需要额外的自定义，您需要自己做。最后一个演示使用代码

  $（＃grid_toppager_left）。 
 $（＃grid_toppager_right）。hide（）; 
 $（＃grid_toppager_center）。attr（colspan，2）; 
 $（＃grid_toppager_center）。css（{width：，text-align：left，white-space：}）; 
 $（＃grid_toppager_center）。find（> .navtable）。append（
 $（＃grid_toppager_center）。find（> table.ui-pg-table） 
）; 
 $（＃grid_toppager_center）。find（> .navtable）。children（）。each（function（）{
 $（this）.css（float，left ）; 
}）; 
 $ grid.bind（jqGridAfterGridComplete，function（）{
 var p = $（this）.jqGrid（getGridParam），$ toppager = $（p.toppager）; 
 $ toppager.find（。navtable）。css（width，）; 
}）; 
  

free jqgrid top toolbar contains lot of buttons, select element and pager without last page button. Buttons are wrapped to multiple lines. Central part is removed using

#grid_toppager_center {
    width: 0;
}

Since pager is in right area, there is lot of unused empty space below and after pager:

I tried to remove empty space using

#grid_toppager_center, #grid_toppager_right {
    width: 0;
}

and

    pagerpos: 'left',

In this case pager appears in top of toolbar buttons:

How to place pager to other place, for example to end of top toolbar ?

jqgrid settings:

$.extend($.jgrid.defaults, {
    iconSet: "fontAwesome" ,
    autoResizing: { compact: true,widthOfVisiblePartOfSortIcon: 13 },
    toppager: true,
    viewrecords: false,
    pagerpos: 'left',
    rowList: [50, 500, 1000],
    rowNum: 50,

style:

#grid_toppager_center, #grid_toppager_right {
    width: 0;
}

.ui-pg-button-text {
    margin: 4px !important;
}

.ui-jqgrid .ui-jqgrid-toppager .ui-pg-div > span {
    margin: 0 5px;
    font-size: 20px;
}

.ui-jqgrid .ui-pg-table .ui-pg-button.ui-state-active {
    margin: 1px;
    font-weight: normal;
}

Update

I tried demo from

http://www.ok-soft-gmbh.com/jqGrid/OK/tougleButton1_iconOver2.htm

and decreased jqgrid width.

Empty space still appears:

How to put buttons to this area so that they use whole grid width and wrap as many lines as nessecary ? After buttons where should be pager.

Desired is compact toolbar occupying as few rows as possible (two last buttons removed in this sample):

解决方案

The simplest way to implement your requirements seems me the following:

First of all you remove creating unneeded elements of the pager by usage pgbuttons: false, pginput: false, rowList: [], viewrecords: false (the last two options rowList: [], viewrecords: false are already defaults).

The pager of free jqGrid 4.8 still consists from the table with one row and three cells: left, center and right. So to make the left part over the whole pager one can use the following:

$("#grid_toppager_center").hide();
$("#grid_toppager_right").hide();
$("#grid_toppager_left").attr("colspan", "3");

The results you can see on the demo:

In general one can use still the pager, and to hide only the right part of the pager. In the case one can use

$("#grid_toppager_right").hide();
$("#grid_toppager_left").attr("colspan", "2");

for example. See the next demo which displays:

One can of cause reduce the pager by removing unneeded elements like do the demo:

UPDATED: The solution of your problem depends on exact requirements which you have. I wanted to show you the main problem which one have in the pager and navigator bar. All other adjustments can be easy made depend on what you need.

For example the next demo moves the pager table inside of navigator bar. The results looks like on the picture below

If you need additional customization, you need to do this yourself. The last demo uses the code

$("#grid_toppager_left").hide();
$("#grid_toppager_right").hide();
$("#grid_toppager_center").attr("colspan", "2");
$("#grid_toppager_center").css({width: "", "text-align": "left", "white-space": ""});
$("#grid_toppager_center").find(">.navtable").append(
    $("#grid_toppager_center").find(">table.ui-pg-table")
);
$("#grid_toppager_center").find(">.navtable").children().each(function() {
    $(this).css("float", "left");
});
$grid.bind("jqGridAfterGridComplete", function () {
    var p = $(this).jqGrid("getGridParam"), $toppager = $(p.toppager);
    $toppager.find(".navtable").css("width", "");
});

这篇关于如何在自由jqgrid中将寻呼机放在工具栏顶部的末尾的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！