Stellen Sie jqGrid füllen Ihre container

Ich bin mit dem jQuery-layout-plugin und den jqGrid-plugin in einem meiner Projekte, und Sie funktionieren sehr gut, außer ein kleines problem...

Ich will das jqGrid zu füllen vollständig den Bereich (jQuery layout-Fenster), die es enthält. Die Größe des Bereich sollte die Größe der jqGrid, schließen Sie den Bereich ausblenden soll das jqGrid, etc, etc.

Beide jqGrid und jQuery Layout bieten Rückrufe, aber wenn ich verwenden Sie die Seitenlayout-Pausen schrecklich.

Hat jemand eine Erfahrung mischen jqGrid jQuery Layout?

InformationsquelleAutor Horacio | 2010-05-27

6

Empfehle ich Ihnen die Lektüre durch Größe ändern-jqgrid-als-browser-wird-in der Größe verändert, die werden mehrere Techniken behandelt, die Größe Ihres Gitters.
- Danke, das führt mich zu der Antwort, die ich brauchte.
- Du bist willkommen, gerne helfen
- wie machen wir das als ein fluid grid wie twitter bootstrap-Tabelle. Beispiel hier 192.69.216.111/themes/preview/ace/tables.html
- Die Links, die von Murali scheint kaputt zu sein jetzt. Kannst du den link aktualisieren? Ich bin daran interessiert zu sehen, wie seine Lösung funktioniert.
InformationsquelleAutor Justin Ethier

Dies ist meine aktuelle Lösung:

Erstellen Sie zuerst eine resize-Funktion, die aufgerufen wird, das onresize-Ereignis:

function resizeGrid(pane, $Pane, paneState) {
  if(grid = $('.ui-jqgrid-btable:visible')) {
    grid.each(function(index) {
      var gridId = $(this).attr('id');
      $('#' + gridId).setGridWidth(paneState.innerWidth - 2);
    });
  }
}

Dann in Ihrem layout haben wir das resize-Ereignis diese Methode aufrufen:

$('#mylayout_id').layout({
  center: {
    closable: false,
    resizable: false,
    slidable: false,
    onresize: resizeGrid,
    triggerEventsOnLoad: true  //resize the grin on load also
  },
  west: {
    fxName: "slide",
    size:    250,
    maxSize: 300
  },
  east: {
    fxName: "slide",
    size:    250,
    maxSize: 300
  }
});

Mit dieser können Sie stellen Sie jqGrid ist in jedem Bereich Ihres Layouts, und Sie werden geändert werden, um fit die Scheibe ist, wenn das mittlere Fenster in der Größe geändert wird.

InformationsquelleAutor Horacio

2

Ich bin mit jqgrid 4.0 (via jquery struts 2-Plug-in) und jQuery layout plugin. Die Vorherige Antwort nicht für mich arbeiten. Nur die Funktion resizeGrid war ein problem. Ersetzen Sie einfach die resizeGrid - Funktion oben mit dabei. Dies wird nur die Größe eines raster - derjenige, dessen id ist gridtable.
```
function resizeGrid(pane, $Pane, paneState) {
    jQuery("#gridtable").jqGrid('setGridWidth',paneState.innerWidth - 2, 'true');
};
```
#gridtable ist die id der Tabelle element, das Sie erstellen für jqgrid
```
<div id="grid_container">
  <table id="gridtable" class="mygrid"></table>
  <div id="grid_pgr"></div>
</div>
```
Auch, wenn Sie das struts2 jquery plugin, das raster wird automatisch über < script > Blöcke innerhalb der < body > (nicht im Skript-Blöcke innerhalb < head >). Also, wenn Sie genannt layout() - und set - triggerEventsOnLoad: true im < head > erhalten Sie einen javascript-Fehler. Um dies zu vermeiden, können Sie dieses Skript block irgendwo nach Ihrem grid(s) deklariert ist.
```
<script type="text/javascript">
jQuery(document).ready(function () {
    jQuery("#gridtable").jqGrid('setGridWidth',$myLayout.state.center.innerWidth - 2, 'true');
});
</script>
```
Wenn du mehr als ein raster, können Sie mit einer Klasse, die Sie definiert haben, auf das table-element (siehe html-snippet oben), und führen Sie dann das resizeGrid Methode auf jeden von Ihnen.

InformationsquelleAutor Rosh

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.