Hallo Leute,
ich habe ein Tabellekonstrukt was aus div Containern aufgebaut ist.
Nun soll es möglich sein eine Spalte kleiner oder größer zu ziehen und die Tabelle muss sich da natürlich mit verändern.
Das funktioniert nur nicht wirklich richtig, beim verkleinern, verkleinert sich die Tabelle nicht richtig, beim vergrößern, vergrößert sie sich zu langsam und wenn alles andere dann breiter wird, klappt die letzte Spalte um.
Die Tabelle ist so aufgebaut.
Und so sieht die Funktion aus zum resizen der Tabelle.
Was mache ich da falsch? Bin für jeden hilfreichen Tipp dankbar.
Fehlen noch Informationen die für das Problem wichtig sind?
Vielen Dank für eure Hilfe Gruß Litter
ich habe ein Tabellekonstrukt was aus div Containern aufgebaut ist.
Nun soll es möglich sein eine Spalte kleiner oder größer zu ziehen und die Tabelle muss sich da natürlich mit verändern.
Das funktioniert nur nicht wirklich richtig, beim verkleinern, verkleinert sich die Tabelle nicht richtig, beim vergrößern, vergrößert sie sich zu langsam und wenn alles andere dann breiter wird, klappt die letzte Spalte um.
Die Tabelle ist so aufgebaut.
Code:
<div class="table lv_table"> <div id="my_lv_table" class="calc_table"> <div class="table_header cols"> <div class="th col_1">Col 1</div> <div class="th col_2">Col 2</div> <div class="th col_3">Col 3</div> <div class="th col_4">Col 4</div> <div class="th col_5">Col 5</div> <div class="end_left"></div> </div> <div class="table_body"> <div class="row"> <div class="col_1 td">Wert Col 1</div> <div class="col_2 td">Wert Col 2</div> <div class="col_3 td">Wert Col 3</div> <div class="col_4 td">Wert Col 4</div> <div class="col_5 td">Wert Col 5</div> </div> <div class="row"> <div class="col_1 td">Wert Col 1</div> <div class="col_2 td">Wert Col 2</div> <div class="col_3 td">Wert Col 3</div> <div class="col_4 td">Wert Col 4</div> <div class="col_5 td">Wert Col 5</div> </div> <div class="row"> <div class="col_1 td">Wert Col 1</div> <div class="col_2 td">Wert Col 2</div> <div class="col_3 td">Wert Col 3</div> <div class="col_4 td">Wert Col 4</div> <div class="col_5 td">Wert Col 5</div> </div> <div class="row"> <div class="col_1 td">Wert Col 1</div> <div class="col_2 td">Wert Col 2</div> <div class="col_3 td">Wert Col 3</div> <div class="col_4 td">Wert Col 4</div> <div class="col_5 td">Wert Col 5</div> </div> <div class="row"> <div class="col_1 td">Wert Col 1</div> <div class="col_2 td">Wert Col 2</div> <div class="col_3 td">Wert Col 3</div> <div class="col_4 td">Wert Col 4</div> <div class="col_5 td">Wert Col 5</div> </div> <div class="row"> <div class="col_1 td">Wert Col 1</div> <div class="col_2 td">Wert Col 2</div> <div class="col_3 td">Wert Col 3</div> <div class="col_4 td">Wert Col 4</div> <div class="col_5 td">Wert Col 5</div> </div> <div class="row"> <div class="col_1 td">Wert Col 1</div> <div class="col_2 td">Wert Col 2</div> <div class="col_3 td">Wert Col 3</div> <div class="col_4 td">Wert Col 4</div> <div class="col_5 td">Wert Col 5</div> </div> <div class="row"> <div class="col_1 td">Wert Col 1</div> <div class="col_2 td">Wert Col 2</div> <div class="col_3 td">Wert Col 3</div> <div class="col_4 td">Wert Col 4</div> <div class="col_5 td">Wert Col 5</div> </div> </div> <div class="table_footer"></div> </div> </div>
Code:
$this.resizeCols = function() { var headCol = $("#" + $this.opts.tableId).find(".table_header").find(".th"); // initialisierungen für das resizen $this.moved = 0; $this.pos = null; $this.table = $("#" + $this.opts.tableId); $this.header = $this.table.find(".table_header"); $this.body = $this.table.find(".table_body"); $this.footer = $this.table.find(".table_footer"); headCol.bind("mousemove", function(event) { if ($this.moved < event.pageX) { $this.pos = "r"; } else if ($this.moved > event.pageX) { $this.pos = "l"; } $this.moved = event.pageX; }).resizable({ grid : [1, 10000], resize : function(event, ui) { var table = $("#" + $this.opts.tableId); var tableHeader = table.find(".table_header"); var tableBody = table.find(".table_body"); var tableFooter = table.find(".table_footer"); var tableRow = tableBody.find(".row"); var col = $(this).attr("class").split(" ")[1].split("_")[2]; table.find(".table_body").find(".col_" + col).css("width", $(this).width()); if ($this.pos == "r") { var w = table.width(); w++; table.css("width", w); tableHeader.css("width", w); tableBody.css("width", w); tableRow.css("width", w); tableFooter.css("width", w); } else if ($this.pos == "l") { var w = table.width(); w--; console.log(w); table.css("width", w); table.css("width", w); tableHeader.css("width", w); tableBody.css("width", w); tableRow.css("width", w); tableFooter.css("width", w); } } }); $(".ui-resizable-e").css("right", -1).css("width", 1); $(".ui-icon-gripsmall-diagonal-se").remove(); };
Fehlen noch Informationen die für das Problem wichtig sind?
Vielen Dank für eure Hilfe Gruß Litter
Kommentar