come posizionare il cercapersone alla fine della parte superiore della barra degli strumenti in free jqgrid

La barra degli strumenti jqgrid gratuita contiene molti pulsanti, seleziona elemento e cercapersone senza il pulsante dell’ultima pagina. I pulsanti sono avvolti su più righe. La parte centrale viene rimossa utilizzando

#grid_toppager_center { width: 0; } 

Dal momento che il cercapersone è nella giusta area, c’è molto spazio vuoto inutilizzato sotto e dopo il cercapersone:

spazio empire

Ho provato a rimuovere lo spazio vuoto usando

 #grid_toppager_center, #grid_toppager_right { width: 0; } 

e

  pagerpos: 'left', 

In questo caso il cercapersone appare nella parte superiore dei pulsanti della barra degli strumenti:

superiore

Come posizionare il cercapersone in un altro posto, ad esempio alla fine della barra degli strumenti in alto?

Impostazioni jqgrid:

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

stile:

 #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; } 

Aggiornare

Ho provato demo da

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

e diminuita la larghezza di jqgrid.

Lo spazio vuoto appare ancora:

vuoto

Come mettere i pulsanti in quest’area in modo che usino tutta la larghezza della griglia e avvolgano tante linee quante sono le nessarie? Dopo i pulsanti dove dovrebbe essere il cercapersone.

Desiderato è la barra degli strumenti compatta che occupa meno righe ansible (due ultimi pulsanti rimossi in questo esempio):

desired2

Il modo più semplice per implementare le tue esigenze mi sembra il seguente:

Prima di tutto rimuovi la creazione di elementi non necessari del cercapersone pgbuttons: false , pginput: false , rowList: [] , viewrecords: false (le ultime due opzioni rowList: [] , viewrecords: false sono già valori predefiniti).

Il cercapersone di free jqGrid 4.8 è ancora costituito dalla tabella con una riga e tre celle: sinistra, centro e destra. Quindi per rendere la parte sinistra su tutto il pager si può usare quanto segue:

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

I risultati che puoi vedere sulla demo : inserisci la descrizione dell'immagine qui

In generale si può usare ancora il cercapersone e hide solo la parte destra del cercapersone. Nel caso si può usare

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

per esempio. Guarda la prossima demo che mostra:

inserisci la descrizione dell'immagine qui

Uno può ridurre il cercapersone rimuovendo elementi non necessari come fare la demo :

inserisci la descrizione dell'immagine qui

AGGIORNATO : la soluzione del problema dipende dai requisiti esatti che hai. Volevo mostrarti il ​​problema principale che si verifica nella barra del cercapersone e del navigatore. Tutte le altre regolazioni possono essere fatte facilmente in base a ciò di cui hai bisogno.

Ad esempio il prossimo demo sposta la tabella del cercapersone all’interno della barra del navigatore. I risultati sono come nell’immagine qui sotto

inserisci la descrizione dell'immagine qui

Se hai bisogno di ulteriori personalizzazioni, devi farlo tu stesso. L’ultima demo usa il codice

 $("#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", ""); });