Javascript komplexen Array „Element reduction“ - Aufbau einer HTML-Tabelle basierend auf Array-Elementen

Question

Ich habe ein Projekt, das die folgenden erfordert.

Vier-Arrays wird im Code als solche deklariert werden:

var ROW1 = ['module1'];
var ROW2 = ['module2', 'module3'];
var ROW3 = ['module4', 'module5', 'module6'];
var ROW4 = ['module7', 'module8'];

Jedes Element dieser Arrays repräsentiert ein Modul in einem konfigurierbaren HTML-Widget. Nach dem, was Elemente in jedem Array spezifiziert ist, wird der Code ein HTML-Aufbau, der diese „Module“ für - jedes „ZeileX“ Array wird eine Tabellenzeile () sein, und jedes Modul wird eine Tabellenzelle () in der Tabelle sein.

ROW1 kann leer sein (in diesem Fall wird es nicht in der HTML enthalten sein) oder ein Modul hat „module1.“

ROW2, Row3 und ROW4 können jeweils zwischen 0 und 3 Module (alle von Module2 - Module8, in beliebiger Reihenfolge).

Unter Verwendung der Beispiel-Arrays oben, würde ich programmatisch eine HTML-Tabelle wie folgt erzeugen:

<table>
  <tr id="row1">
    <td colspan="6">[module1]</td>
  </tr>
  <tr id="row2">
    <td colspan="3">[module2]</td>
    <td colspan="3">[module3]</td>
  </tr>
  <tr id="row3">
    <td colspan="2">[module4]</td>
    <td colspan="2">[module5]</td>
    <td colspan="2">[module6]</td>
  </tr>
  <tr id="row4">
    <td colspan="3">[module7]</td>
    <td colspan="3">[module8]</td>
  </tr>
</table>

(Die colspans sind nur dort das richtige Tabellen-Layout zu erhalten; 6 ist die kleinste gemeinsame Vielfache zwischen 1, 2 und 3).

Das Problem ist, wird der Inhalt für diese Module bestückt dynamisch (ich es von einem AJAX-Aufruf zu einer URL erhalten, die ein JSON-Objekt zurückgibt), und der Inhalt ist nicht immer für jedes Modul zur Verfügung. Anstatt eine leere Zelle zu schaffen () für ein Modul ohne Inhalt, mag ich aus dem Layout, dass die Zelle vollständig entfernen, die, wie es nie in der ursprünglichen Konfiguration (das heißt die Arrays oben) war.

Ich habe verbrachte schon viel Zeit mit der Erstellung Code, der die Modulerstellung abstrahiert - es schafft eine „Shell“ HTML-Layout auf, wie viele Module in jeder Reihe sind, und dann fügt Inhalt auf die entsprechende Tabellenzelle, auf deren Grundlage Modul sollte es sein. Ich möchte in der Lage sein, diesen Code weiterverwenden, so dass ich denke, der beste Weg, dies zu tun ist in den Arrays durch jedes Element zu gehen, bevor die „Schale“ bauen, und wenn ich keinen Inhalt haben, entfernen Sie das Element aus dem Array. Dann kann ich die neu modifizierte Array verwenden, um die „Schale“ üblich zu bauen - ich bin im Grunde die Verarbeitung es nur vorher für Inhalte in jedem Modul zu überprüfen und, falls keine vorhanden ist, wirkt wie das Modul nie in der ursprünglichen Anordnung festgelegt wurde (indem sie sie in der neuen Anordnung zu entfernen und dann die Verwendung der „Schale“ zu bauen).

Zum Beispiel, sagen wir mal, die Konfiguration als solche eingerichtet:

var ROW1 = ['module1'];
var ROW2 = ['module4', 'module2'];
var ROW3 = ['module5'];
var ROW4 = ['module7', 'module3', 'module8'];

Ich möchte in jedem Array durch jedes Element gehen und nach verfügbaren Inhalten im Modul überprüfen. Lassen Sie uns sagen, dass es keinen Inhalt für „module3“ zur Verfügung steht und „Module5.“ Ich mag dann mit dieser Arrays am Ende:

var ROW1 = ['module1'];
var ROW2 = ['module4', 'module2'];
var ROW3 = ['module7', 'module8'];

Bitte beachten Sie, was mit den Zeilen passiert - da „Module5“ entfernt wurde, wurden die Elemente aus der ROW4 Array verschoben in Zeile 3 und ROW4 wurde dann gelöscht. Auch in dem neuen Row3 (früher ROW4), "module3" entfernt wurde, "Module8" von der Position [2] in Position geschoben. [1]

So:

• Für alle Zeilen, die nach dem Entfernen von Modulen verbleibenden ein oder mehr Elemente aufweisen, die Inhalte nicht hat, ich mag die Zeile intakt halten, auch mit nur einem Modul.
• Für alle Zeilen, die mit Elementen keine verbleibenden Ende nach oben, würde Ich mag jede nachfolgende Zeile zu verschieben, „up“ ein, in die vorherige Anordnung, im Grunde eine Reihe Herausziehen und Verschieben des Unteren auf. Der HTML-Code aus diesem Beispiel würde wie folgt aussehen:

VOR (wie durch Konfiguration angefordert):

<table>
  <tr id="row1">
    <td colspan="6">[module1]</td>
  </tr>
  <tr id="row2">
    <td colspan="3">[module4]</td>
    <td colspan="3">[module2]</td>
  </tr>
  <tr id="row3">
    <td colspan="6">[module5]</td>
  </tr>
  <tr id="row4">
    <td colspan="2">[module7]</td>
    <td colspan="2">[module3]</td>
    <td colspan="2">[module8]</td>
  </tr>
</table>

AFTER (basierend auf welche Inhalte tatsächlich verfügbar ist)

<table>
  <tr id="row1">
    <td colspan="6">[module1]</td>
  </tr>
  <tr id="row2">
    <td colspan="3">[module4]</td>
    <td colspan="3">[module2]</td>
  </tr>
  <tr id="row3">
    <td colspan="3">[module7]</td>
    <td colspan="3">[module8]</td>
  </tr>
</table>

Daran erinnern, dass ROW1 ein Sonderfall ist, dass es keine andere Zeilen nicht beeinträchtigt. Wenn der Inhalt für „module1“ (das einzige Modul, das in ROW1 gehen kann) zur Verfügung steht, dann sollte ROW1 unangetastet bestehen. Wenn keine Inhalte verfügbar sind, dann kann ROW1 gelöscht werden, aber immer noch verlassen ROW2, Row3 und ROW4 wie sie ist (das heißt, sie nicht jeweils bis eine Zeile verschieben). Ich wirklich nur eine Lösung benötigen für den Umgang mit ROW2, Row3 und ROW4, da die Logik für ROW1 ziemlich einfach ist.

Ich bin ein Anfänger / Zwischen JavaScript-Programmierer, und nicht viel Erfahrung mit Arrays haben. Ich habe stundenlang auf diesem gearbeitet und aus, aber einfach nicht Gebührl dass das, was ich komme mit ist ein robustes und elegante / compact Verfahren.

Wenn irgendwelche JavaScript-Gurus eine Lösung für diese teilen kann, würde ich sehr schätzen! Dank einem Haufen.

Answer 1

Zu allererst, speichern Sie Ihre Zeilen in einem Array als auch, Ihre ROW1 - ROW4 geht dir Kopfschmerzen geben

.

var ROWS = [
 ['module1'],
 ['module4', 'module2'],
 ['module5'],
 ['module7', 'module3', 'module8']
];

Sie wollen auch einen Weg, um ein Element zu entfernen. .splice() in Arrays aufgebaut, und funktioniert gut auf Elemente zu entfernen.

// lets clear out our disabled modules

var disabledModules = ['module3', 'module5'];

// quick sample function - yours might check for empty content or whatever else...
function isDisabled(module) {  
  for (var i=0, test; test=disabledModules[i]; i++) {
    if (test === module) return true;
  }
  return false;
}

for(var i=0,row; row=ROWS[i]; i++) {
  for (var j=0,module; module=row[j]; j++) {
    // is this module in our disabled modules list?

    if (isDisabled(module)) { // the module is disabled
      row.splice(j,1);
      j--; // so we recheck this point in the array
    }
  }
  if (row.length < 1) {
    // all items were deleted
    ROWS.splice(i,1);
    i--; // so we recheck this point..
  }
}

// ROWS === [["module1"], ["module4", "module2"], ["module7", "module8"]]

Ihr Kommentar gefragt, die for-Schleife Syntax verwendet. Es ist eine ziemlich schnelle Möglichkeit, eine Schleife durch Arrays Sie wissen nicht „false“ Werte haben. Brechen einer auseinander und Einschalten ausführliche Protokollierung:

 for(
  // Part 1 of for loop: Setup, create two variables, i=0, and row.
  var i=0,row; 
  // Part 2: The test - when false, loop will exit, gets executed pre-loop every time
  // Assignment operator returns the value assigned, so row=ROWS[i] will be undefined
  // (false) when we reach then end of the array.
  row=ROWS[i]; 
  // Part 3: Post loop - increment i
  i++) {

Die Gefahren, die Verwendung dieser Methode allerdings nicht existieren, wenn sie eine Reihe von Zahlen, zum Beispiel, und eine dieser Zahlen gleich 0 ist, werden die Schleife vorzeitig beenden. Die Alternative wäre, zu schreiben:

for(var i=0; i<ROWS.length; i++) { 
  var row = ROWS[i];
}