根据数据动态查看

Question

对于一个物体有多个属性，比如一只鞋子可能有不同的color、size等

现在我们尝试展示鞋子，让顾客可以选择不同的属性，我们使用radio（最简单）：https://jsfiddle.net/mwqy6217/

但是如何根据数据来判断视图的可用性呢？

比如红鞋卖完了，red收音机应该是不可勾选的。不同尺寸也是如此。

我们可以用这个数据结构来表示鞋子：{shoe:{name:'',available:['red','black','40','41']}}.

但是不同的属性可能是有关系的，比如40码的红鞋卖完了，而40码的黑鞋还没有卖完。我认为这个数据结构：

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

因为鞋子可能有其他属性，比如'weight'，一个属性可能有10+个选项。

那么如何在数据库中表示这种关系并让前端工程师可以读取它们来构建视图呢？

更新：

https://jsfiddle.net/xqtgqzt2/

查看现场演示，所有可用选项都预定义为：

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

现在如何让单选按钮状态根据选项改变？例如勾选A1时，只能勾选B1 B3（启用），勾选A1 B1时，只能勾选C1 D1。

Answer 1

要显示有关多维数组选项的单选按钮，您可以执行以下操作：

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

我会将我的数据设置为类似于您的第二个选项，但是因为他们首先要关心的是尺码（您不能更改鞋码），所以我会显示某个尺码的可用颜色，而不是颜色的可用尺寸。您首先会列出所有可用性，因为如果客户知道 9 号绿色 "happy shoe" 可能有货，他们可能稍后会回来购买。然后，您将遍历可用选项以更改该尺寸或颜色是否可用。

这里是数据设置：

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，尽管我使用 select 框而不是单选按钮。他们更整洁 :).

Answer 3

恕我直言，更简单的方法是将数据本身与属性的定义分开，并且属性之间没有层次结构。为此，您需要每个属性值都有一个唯一的 ID。

在这个例子中，我使用数组中每个属性的索引作为 id 从 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: {
                ...
            }
        }
    ]
}

在 GUI 上，您必须将每个选中属性的 availability 数组相交，以确定哪个选项可用。

根据数据动态查看

Dynamical view according to data

javascript

data-modeling