Ankündigung

Einklappen
Keine Ankündigung bisher.

resizen von Tabelle und Spalten nicht einheitlich und schlägt fehl

Einklappen

Neue Werbung 2019

Einklappen
X
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • resizen von Tabelle und Spalten nicht einheitlich und schlägt fehl

    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.

    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>
    Und so sieht die Funktion aus zum resizen der Tabelle.

    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();
    				};
    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
    Aus dem Dynamo Lande kommen wir. Trinken immer reichlich kühles Bier. Und dann sind wir alle voll, die Stimmung ist so toll. Aus dem Dynamo Lande kommen wir.
    [URL]http://www.lit-web.de[/URL]

  • #2
    Beim resize solltest du den DOM nicht mehr querien, im Idealfall solltest du dort gar nichts machen müssen. Ich würde den Spalten eine prozentuelle Breite geben und nur das äußere Wrapper-Table-Div resizen lassen. thead, tbody und tfooter kannst du auf 100% breite setzen. Dann sollte es schon performanter laufen.

    Spricht was dagegen, aus der div-Suppe eine echte Tabelle zu machen? Oder hast du darauf keinen Einfluss?

    Grid-Alternativen:
    http://trirand.com/blog/jqgrid/jqgrid.html
    http://flexigrid.info/
    http://visop-dev.com/jQuery.sheet/jquery.sheet.html

    Viele Grüße


    Basti
    I like cooking my family and my pets.
    Use commas. Don't be a psycho.
    [URL="http://jscouch.de"]Blog[/URL] - [URL="http://coverflowjs.github.io/coverflow/"]CoverflowJS[/URL]

    Kommentar


    • #3
      Zitat von rudygotya Beitrag anzeigen
      Beim resize solltest du den DOM nicht mehr querien, im Idealfall solltest du dort gar nichts machen müssen. Ich würde den Spalten eine prozentuelle Breite geben und nur das äußere Wrapper-Table-Div resizen lassen. thead, tbody und tfooter kannst du auf 100% breite setzen. Dann sollte es schon performanter laufen.

      Spricht was dagegen, aus der div-Suppe eine echte Tabelle zu machen? Oder hast du darauf keinen Einfluss?

      Grid-Alternativen:
      http://trirand.com/blog/jqgrid/jqgrid.html
      http://flexigrid.info/
      http://visop-dev.com/jQuery.sheet/jquery.sheet.html

      Viele Grüße


      Basti
      Danke, da werde ich das mal versuchen mit Prozenten zu machen. Ich habe darauf leider keinen Einfluss. War etwas was schon so bestand und ich muss nur Sachen hinzuentwickeln.

      Deshalb gibts da auch das Problem was die Prozente angeht, da ist alles auf Pixel ausgelegt.

      Ich habe darauf eben keinen Einfluss.

      Wie kann ich das Problem mit Pixeln dann lösen?
      Aus dem Dynamo Lande kommen wir. Trinken immer reichlich kühles Bier. Und dann sind wir alle voll, die Stimmung ist so toll. Aus dem Dynamo Lande kommen wir.
      [URL]http://www.lit-web.de[/URL]

      Kommentar


      • #4
        //Offtopic:
        Zitat von rudygotya Beitrag anzeigen
        Spricht was dagegen, aus der div-Suppe eine echte Tabelle zu machen?
        ich hab hier irgendwo gelesen tabellen seien old school und der neue heisse scheiss seinen listen.
        Ich da ein trendscout übres ziel hinausgeschossen, oder spielt das bei dem aktuellen problem einfach keine rolle?

        Kommentar


        • #5
          Sind denn die Spalten alle gleich breit? Oder haben die individuelle Größen?

          @moma: für mich sieht das danach aus als hätte da jemand aus irgendwelchen Gründen eine Tabelle nachgebastelt. Eine echte Tabelle hätte den Vorteil, dass man die Spaltenbreite über <colgroup /> setzen könnte. Das würde auf alle tds durchschlagen => weniger DOM querien
          I like cooking my family and my pets.
          Use commas. Don't be a psycho.
          [URL="http://jscouch.de"]Blog[/URL] - [URL="http://coverflowjs.github.io/coverflow/"]CoverflowJS[/URL]

          Kommentar


          • #6
            Zitat von moma Beitrag anzeigen
            //Offtopic:

            ich hab hier irgendwo gelesen tabellen seien old school und der neue heisse scheiss seinen listen.
            Zum Layout bauen, ja. Aber wenn man wirkliche Tabellen anzeigen möchte kann man immernoch auf die alte <table> setzen
            [QUOTE=nikosch]Macht doch alle was Ihr wollt mit Eurem Billigscheiß. Von mir aus sollen alle Eure Server abrauchen.[/QUOTE]

            Kommentar


            • #7
              Zitat von rudygotya Beitrag anzeigen
              Sind denn die Spalten alle gleich breit? Oder haben die individuelle Größen?
              Die Spalten haben alle individuelle Größen.
              Aus dem Dynamo Lande kommen wir. Trinken immer reichlich kühles Bier. Und dann sind wir alle voll, die Stimmung ist so toll. Aus dem Dynamo Lande kommen wir.
              [URL]http://www.lit-web.de[/URL]

              Kommentar


              • #8
                Vielleicht hilfts: http://jsfiddle.net/rudygotya/6W2ff/
                I like cooking my family and my pets.
                Use commas. Don't be a psycho.
                [URL="http://jscouch.de"]Blog[/URL] - [URL="http://coverflowjs.github.io/coverflow/"]CoverflowJS[/URL]

                Kommentar


                • #9
                  Zitat von rudygotya Beitrag anzeigen
                  Damit vergrößer ich ja die Tabelle, mir ging es um das vergrößern einzelner Spalten. Und da soll sich die Tabelle mit anpassen in der Größe.
                  Vielen Dank für deine Hilfe.
                  Aus dem Dynamo Lande kommen wir. Trinken immer reichlich kühles Bier. Und dann sind wir alle voll, die Stimmung ist so toll. Aus dem Dynamo Lande kommen wir.
                  [URL]http://www.lit-web.de[/URL]

                  Kommentar


                  • #10
                    Wöfür willst Du den diese vergrösern oder verkleinern können? Was ist der Sinn dahinter. In Zeiten von responsives Design finde ich dies nicht gerade fördernd und führt zu etlichen Problemen.

                    Kommentar


                    • #11
                      Zitat von strub Beitrag anzeigen
                      Wöfür willst Du den diese vergrösern oder verkleinern können? Was ist der Sinn dahinter. In Zeiten von responsives Design finde ich dies nicht gerade fördernd und führt zu etlichen Problemen.
                      Der Kunde ist nunmal König und die wollen das eben so haben.
                      Aus dem Dynamo Lande kommen wir. Trinken immer reichlich kühles Bier. Und dann sind wir alle voll, die Stimmung ist so toll. Aus dem Dynamo Lande kommen wir.
                      [URL]http://www.lit-web.de[/URL]

                      Kommentar


                      • #12
                        Hatte dein Ausgangsposting leider falsch verstanden. In dem Fall würd ich dir empfehlen, gleich ein richtiges Grid vorzuschlagen, jqgrid bspw. ist richtig klasse.
                        Wenn du den Quelltext nicht anfassen kannst, versteck den alten Output (sofern JS aktiv ist) und parse den DOM, um an die Griddaten zu kommen. jqgrid kannst du bpsw mit einem Array aus Datensätzen füttern. Und der noscript-Fallback kommt gratis mit.

                        Im 2. Schritt kann man ja immer noch über ein Refaktoring auch im Backend nachdenken, wenn das beim Kunden ankommt.
                        I like cooking my family and my pets.
                        Use commas. Don't be a psycho.
                        [URL="http://jscouch.de"]Blog[/URL] - [URL="http://coverflowjs.github.io/coverflow/"]CoverflowJS[/URL]

                        Kommentar


                        • #13
                          var col = $(this).attr("class").split(" ")[1].split("_")[2];
                          table.find(".table_body").find(".col_" + col).css("width", $(this).width());
                          Ganz eherlich: What the hell?! Bevor man mit solchem Mist anfängt, kann man genauso gut das DOM Parsen und die Felder in eine echte Tabelle kopieren.
                          [COLOR="#F5F5FF"]--[/COLOR]
                          [COLOR="Gray"][SIZE="6"][FONT="Georgia"][B]^^ O.O[/B][/FONT] [/SIZE]
                          „Emoticons machen einen Beitrag etwas freundlicher. Deine wirken zwar fachlich richtig sein, aber meist ziemlich uninteressant.
                          [URL="http://www.php.de/javascript-ajax-und-mehr/107400-draggable-sorttable-setattribute.html#post788799"][B]Wenn man nur Text sieht, haben viele junge Entwickler keine interesse, diese stumpfen Texte zu lesen.“[/B][/URL][/COLOR]
                          [COLOR="#F5F5FF"]
                          --[/COLOR]

                          Kommentar


                          • #14
                            Hallo allerseitz,

                            ich bin nun dabei mal das ganze etwas zu überarbeiten.

                            Hier ein fiddle http://jsfiddle.net/Litter/ggLr2myr/

                            Nun ist das auf wirkliche Tabellen aufgeteilt, einmal eine Haader Tabelle und eine Body Tabelle.

                            Das resizen macht mir dennoch Probleme, vielleicht vergess oder unterschätze ich dabei einiges.

                            Oben die Splaten verkleinern sich, aber die links nebenliegende verkleinert sich auch.
                            Die Splaten im Body hingegen machen ganz verrückte Sachen.

                            Könnt ihr mir bitte weiter helfen?

                            Im fiddle scheint das CSS nicht bekannt zu sein für die UI, ich fand es aber auch nicht wo ich das einstellen konnte.

                            Vielen Dank für eure Hilfe.

                            Gruß der Litter
                            Aus dem Dynamo Lande kommen wir. Trinken immer reichlich kühles Bier. Und dann sind wir alle voll, die Stimmung ist so toll. Aus dem Dynamo Lande kommen wir.
                            [URL]http://www.lit-web.de[/URL]

                            Kommentar


                            • #15
                              Guten Morgen,

                              hat vielleicht irgendjemand einen Tipp für mich?

                              Ich denke das Problem liegt da drin das der Header und der Body 2 verschiedene Tabellen sind, was aber wiederum sein muss, da der Tabellen Body scrollbar sein muss.

                              Mir fällt da auch grad nicht wirklich viel ein, alles wo ich was gefunden habe, handelt das in einer Tabelle ab, ohne scrollbaren Body.

                              Gruß Litter
                              Aus dem Dynamo Lande kommen wir. Trinken immer reichlich kühles Bier. Und dann sind wir alle voll, die Stimmung ist so toll. Aus dem Dynamo Lande kommen wir.
                              [URL]http://www.lit-web.de[/URL]

                              Kommentar

                              Lädt...
                              X