Dynamical Ansicht nach Angaben

Question

Für ein Objekt hat mehrere Attribute, zum Beispiel kann ein Schuh hat unterschiedliche color, size und etc.

Wenn wir jetzt den Schuh zeigen versucht, und machen die Kunden verschiedene Attribute können wählen, verwenden wir Radio (das einfachste): https://jsfiddle.net/mwqy6217/

Aber wie man die Verfügbarkeit der Ansicht entsprechend den Daten macht? Wenn die roten Schuhe zum Beispiel ausverkauft sind, sollte das red Radio nicht überprüfbar sein. So sind verschiedene Größen.

Wir können diese Datenstruktur verwenden, um den Schuh darzustellen: {shoe:{name:'',available:['red','black','40','41']}}.

Allerdings können unterschiedliche Attribute zueinander in Beziehung stehen, zum Beispiel sind rote Schuhe mit 40er Größe ausverkauft, während schwarze Schuhe mit 40er Größe nicht ausverkauft sind. Ich denke, diese Datenstruktur:

{shoe:{name:'',available:{color:{red:[40,41,42]},black:[42,43]}}}

Wie der Schuh andere Attribute wie ‚Gewicht‘ haben kann, und ein Attribut hat 10+ Optionen.

Also, wie diese Art von Beziehung in der Datenbank darzustellen und sie vom Front-Ingenieur lesbar machen, um die Ansicht zu erstellen?

Update:

https://jsfiddle.net/xqtgqzt2/

Sehen Sie die Live-Demo, alle verfügbaren Optionen ist vordefiniert als:

var options= [ 
    ["A1","B1","C1","D1"], 
    ["A1","B3","D2"], 
    ["A2","B1","C3","D2"] 
]; 

Nun, wie das Optionsfeld Zustand entsprechend den Optionen geändert, um ? Wenn beispielsweise A1 geprüft wird, kann nur B1 B3 geprüft (aktiviert) werden, wenn A1 B1 geprüft wird, kann nur C1 D1 geprüft werden.

Answer 1

Um die Radio-Buttons in Bezug auf die Option multidimensionnal Array anzuzeigen, können Sie so etwas wie tun:

var options = [ 
 
    ["A1", "B1", "C1", "D1"], 
 
    ["A1", "B3", "D2"], 
 
    ["A2", "B1", "C3", "D2"] 
 
]; 
 
var firstLevel = []; 
 
var selectedList = []; 
 
//Enable first options, disable the others 
 
$("input[type=radio]").each(function (indexInput) { 
 
    var that = this; 
 
    that.disabled = true; 
 
    $.each(options, function (index, value) { 
 
     firstLevel.push(value[0]); 
 
     if (value[0] == that.value) { 
 
      that.disabled = false; 
 
     } 
 
    }); 
 
}); 
 
//on check radio, change states 
 
$("input[type=radio]").on("click", function() { 
 
    var thatClicked = this; 
 
    if (firstLevel.indexOf(thatClicked.value) !== -1) { 
 
     $('input[type=radio]').removeAttr('checked'); 
 
     $(thatClicked).prop('checked', true); 
 
    } 
 
    var possibleOptions = []; 
 
    selectedList.push(thatClicked.value); 
 
    $.each(options, function (index, value) { 
 

 
     possibleOptions = possibleOptions.concat(value[0]); 
 
     var posInArray = value.indexOf(thatClicked.value); 
 
     if (posInArray !== -1 && typeof value[posInArray + 1] !== 'undefined') { 
 
      //check previous options 
 
      $.each(selectedList, function (indexSelectedList, valueSelectedList) { 
 
       if (value.indexOf(valueSelectedList) !== -1) { 
 
        possibleOptions = possibleOptions.concat(value[posInArray + 1]); 
 
       } 
 
      }); 
 

 
     } 
 
    }); 
 
    $("input[type=radio]").each(function (indexInput) { 
 
     if (possibleOptions.indexOf(this.value) !== -1) { 
 
      this.disabled = false; 
 
     } else { 
 
      this.disabled = true; 
 
     } 
 
    }); 
 
});

.section { 
 
    padding: 10px; 
 
    overflow: hidden; 
 
} 
 
label { 
 
    float: left; 
 
    width: 100px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div> 
 
    <div class="section"> 
 
     <label> 
 
      <input type="radio" value="A1" /> <span>A1</span> 
 

 
     </label> 
 
     <label> 
 
      <input type="radio" value="A2" /> <span>A2</span> 
 

 
     </label> 
 
    </div> 
 
    <div class="section"> 
 
     <label> 
 
      <input type="radio" value="B1" /> <span>B1</span> 
 

 
     </label> 
 
     <label> 
 
      <input type="radio" value="B2" /> <span>B2</span> 
 

 
     </label> 
 
     <label> 
 
      <input type="radio" value="B3" /> <span>B3</span> 
 

 
     </label> 
 
    </div> 
 
    <div class="section"> 
 
     <label> 
 
      <input type="radio" value="C1" /> <span>C1</span> 
 

 
     </label> 
 
     <label> 
 
      <input type="radio" value="C2" /> <span>C2</span> 
 

 
     </label> 
 
     <label> 
 
      <input type="radio" value="C3" /> <span>C3</span> 
 

 
     </label> 
 
    </div> 
 
    <div class="section"> 
 
     <label> 
 
      <input type="radio" value="D1" /> <span>D1</span> 
 

 
     </label> 
 
     <label> 
 
      <input type="radio" value="D2" /> <span>D2</span> 
 

 
     </label> 
 
    </div> 
 
</div> 
 
<div id="info">var options= [ ["A1","B1","C1","D1"], ["A1","B3","D2"], ["A2","B1","C3","D2"] ];</div>

Answer 2

würde ich meine Daten ähnlich wie Ihre zweite Option ist jedoch festgelegt, da die erste Sache, die sie kümmern werden, ist Größe (Sie können Ihre Schuhgröße nicht ändern), würde ich verfügbare Farben für eine Größe anzeigen, anstatt verfügbare Größen für eine Farbe. Sie würden zuerst alle Verfügbarkeiten auflisten, denn wenn ein Kunde weiß, dass ein grüner "glücklicher Schuh" der Größe 9 potenziell verfügbar ist, könnten sie später wiederkommen, um ihn zu kaufen. Sie würden dann die verfügbaren Optionen durchlaufen, um zu ändern, ob diese Größe oder Farbe verfügbar ist.

Hier die Daten ein:

var objShoes = [{ 
    name: 'Happy Shoe', 
    sizes: [9,10,11,12,13], 
    colours: ['red','blue','green'], 
    available: [{ 
     size: 9, 
     colours: ['red'] 
    },{ 
     size: 10, 
     colours: ['red', 'blue'] 
    },{ 
     size: 11, 
     colours: ['blue'] 
    },{ 
     size: 12, 
     colours: ['red', 'blue'] 
    },{ 
     size: 13, 
     colours: ['red'] 
    }] 
}, { 
    name: 'Scary Shoe', 
    sizes: [8,9,10,11,12], 
    colours: ['black','grey'], 
    available: [{ 
     size: 8, 
     colours: ['black'] 
    }] 
}]; 

Here's an example of how that could work, obwohl ich Auswahlbox anstelle von Radio-Buttons. Sie sind ordentlicher :).

Answer 3

Der einfachere Weg IMHO ist, die Daten selbst von der Definition eines Attributs zu trennen, und keine Hierarchie zwischen Attributen zu haben. Dazu benötigen Sie für jeden Attributwert eine eindeutige ID.

In diesem Beispiel verwende ich den Index jedes Attributs im Array als eine ID, um es vom Objekt availability zu referenzieren.

{ 
    attributes: [ 
     {value: "red", type: "colour"}, // 0 
     {value: "green", type: "colour"}, // 1 
     {value: "black", type: "colour"}, // 2 
     {value: "brown", type: "colour"}, // 3 

     {value: 40, type: "size"}, // 4 
     {value: 41, type: "size"}, // 5 
     {value: 42, type: "size"}, // 6 
     {value: 43, type: "size"}, // 7 
     {value: 44, type: "size"}, // 8 

     {value: true, type: "with_shoelace"}, // 9 
     {value: false, type: "with_shoelace"}, // 10 
    ], 

    products: [ 
     { 
      name: 'some random shoe', 
      availability: { 
       0: [4, 7, 8, 9], // red is compatible with 40, 43 and 44, only with shoelace 
       1: [4, 5, 9, 10], // green is compatible with 40, 43 and 44, with or without shoelace 
       ... 
       6: [2, 3, 9, 10], // 42 can be black or brown, with or without shoelace 
       7: [0, 1, 10], // 43 can be red or green, without shoelace 
       ... 
       10: [1, 4, 6, 7, 8], // ... 
      } 
     }, 
     { 
      name: 'another shoe', 
      availability: { 
       ... 
      } 
     } 
    ] 
} 

Auf der GUI, werden Sie die availability Arrays von jedem Attribut checked, um zu bestimmen, welche Option verwendbar ist, schneiden müssen.