vista Dynamical secondo i dati

Question

Per un oggetto ha più attributi, per esempio, una scarpa può avere differente color, size ecc

Ora, quando abbiamo provato a visualizzare la scarpa, e rendere il cliente può scegliere diversi attributi , usiamo la radio (la più semplice): https://jsfiddle.net/mwqy6217/

Ma come rendere la disponibilità della vista in base ai dati?

Ad esempio, quando le scarpe rosse sono esaurite, la radio red deve essere deselezionata. Quindi sono diverse dimensioni.

Possiamo utilizzare questa struttura dati per rappresentare la scarpa: {shoe:{name:'',available:['red','black','40','41']}}.

Tuttavia, diversi attributi possono avere una relazione reciproca, ad esempio, le scarpe rosse con 40 dimensioni sono state esaurite, mentre le scarpe nere con 40 non lo sono. Credo che questa struttura dati:

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

Come la scarpa può avere altri attributi come 'peso', e un attributi possono avere 10+ opzioni.

Quindi, come rappresentare questo tipo di relazione nel database e renderli leggibili dal front engineer per creare la vista?

Aggiornamento:

https://jsfiddle.net/xqtgqzt2/

vedere la demo dal vivo, tutte le opzioni disponibili è pre-definita come:

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

Ora come rendere lo stato pulsante cambiato in base alle opzioni ? Ad esempio, se A1 è selezionato, solo B1 B3 può essere controllato (abilitato), se A1 B1 è selezionato, solo C1 D1 può essere controllato.

Answer 1

Per visualizzare i tuoi pulsanti di scelta per quanto riguarda la matrice multidimensionnal opzione, è possibile fare qualcosa di simile:

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

vorrei impostare i miei dati fino simile alla vostra seconda opzione, però, perché il primo La cosa di cui si preoccuperanno è la taglia (non puoi cambiare la taglia della tua scarpa), mostrerei i colori disponibili per una taglia, piuttosto che le taglie disponibili per un colore. Innanzitutto dovresti elencare tutta la disponibilità perché se un cliente sa che una "scarpa felice" verde di taglia 9 è potenzialmente disponibile, potrebbe tornare più tardi a comprarlo. Dovresti quindi scorrere tra le opzioni disponibili per cambiare se quella dimensione o colore è disponibile.

Ecco impostare i dati:

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, anche se ho usato selezionare le caselle al posto dei pulsanti di opzione. Sono più ordinate :).

Answer 3

Il modo più semplice per separare i dati stessi dalla definizione di un attributo e non avere una gerarchia tra attributi. Per fare questo avrai bisogno di ogni valore di attributo per avere un ID univoco.

In questo esempio, utilizzo l'indice di ogni attributo nell'array come un ID per fare riferimento all'oggetto availability.

{ 
    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: { 
       ... 
      } 
     } 
    ] 
} 

sulla GUI, dovrete intersecano i availability array da ogni attributo controllato al fine di determinare quale opzione è utilizzabile.