在遵守一些（主要是排序）条件的同时，在网格中显示字母和数字

debugcn 发表于 Dev

史密斯

我正在显示产品网格（在我的网站上出售的项目）。

网格项目显示的逻辑是：

每行最多10个项目。
行必须由数字或字母组成（不能混合）
项目必须井井有条（数字或字母）。
网格末尾的字母。
当行由数字组成时，同一行中只允许相同“十”之内的数字。例如，如果我们有数字3、1、2、23、15、11，则代码会将这些数字分组，例如：[1,2,3]，[11、15]，[23]。（然后，在我的代码中，然后在网格中显示适当的项目，[1,2,3]进入第1行的[11，15]进入第2行，等等。

假设数组（代码中的category.products）如下所示：

[{
    style_code: '1'
},{
    style_code: '12'
},{
    style_code: '2'
},{
    style_code: '11'
},{
    style_code: 'D'
},{
    style_code: 'A'
},{
    style_code: 'B'
},{
    style_code: 'CAB'
},{
    style_code: 'CAA'
},{
    style_code: 'F'
},{
    style_code: 'G'
},{
    style_code: 'H'
},{
    style_code: 'I'
},{
    style_code: 'J'
},{
    style_code: 'K'
}]

这些组看起来像：[1,2]，[11,12]，[A，B，CAA，CAB，D，F，G，H，I，J]，[K]

现在，该代码可以正确地对数字进行分组。

但是，当涉及字母时，代码会将它们全部放在同一个组中-这不是期望的行为，我需要一些帮助来纠正代码以使其按需工作。

function dynamicSort(property) {
    var sortOrder = 1;
    if(property[0] === "-") {
        sortOrder = -1;
        property = property.substr(1);
    }
    return function (a,b) {
        var result = (a[property] < b[property]) ? -1 : (a[property] > b[property]) ? 1 : 0;
        return result * sortOrder;
    }
}

// Grouping the style codes
function groupBy(ary, keyFunc) {
    var r = {};
    ary.forEach(function (x) {
        var y = keyFunc(x.style_code);
        r[y] = (r[y] || []).concat(x);
    });
    return Object.keys(r).map(function (y) {
        return r[y];
    });
}

category.products.sort(dynamicSort('style_code'));

if (category.products.length > 0) {
    var sortedProductsArray = groupBy(category.products, isNaN);

    if (sortedProductsArray[1]) {
        sortedProductsArray = [].concat(
            groupBy(sortedProductsArray[0], function (x) { return Math.floor(x / 10) }),
            [sortedProductsArray[1].sort()]
        );
    } else {
        sortedProductsArray = groupBy(sortedProductsArray[0], function (x) {
            // if (!isNaN(x)) {
                return Math.floor(x / 10);
            // }
            // return x;
        });
    }
}

妮娜·斯科茨（Nina Scholz）

基本上，我为所有元素申请一个new属性group，该属性包含有关排序顺序的信息（以字符串形式）：

style_code group comment
---------- ----- ---------------------------------
      1      0   integer part of log10(style_code)
     11      1   integer part of log10(style_code)
      a      l   small letter l for all not numeric strings

然后，我用group和对数据进行排序style_code。最后一点是重新定义页面中的排序组。因此，如果新页面是第一页或组已更改或页面长度已达到10，则将应用新页面。

如果需要，您可以使用以下代码group从所有元素中删除该属性paged：

function deleteGroup(a) {
    if (Array.isArray(a)) {
        a.forEach(deleteGroup);
    } else {
        delete a.group;
    }
}
paged.forEach(deleteGroup);

现在是工作示例：

function getPaged() {
    data.forEach(function (a) {
        a.group = isFinite(a.style_code) ? '' + (Math.log(a.style_code) / Math.log(10) | 0) : 'l';
    });
    data.sort(function (a, b) {
        return a.group.localeCompare(b.group) || a.style_code.localeCompare(b.style_code);
    });
    return data.reduce(function (r, a) {
        var i = r.length - 1,
            j = ~i && r[i].length - 1;
        if (!~i || r[i][j].group !== a.group || j === 9) {
            r.push([]);
        }
        r[r.length - 1].push(a);
        return r;
    }, []);
}

var data = [
        { style_code: '1' },
        { style_code: '12' },
        { style_code: '2' },
        { style_code: '11' },
        { style_code: 'D' },
        { style_code: 'A' },
        { style_code: 'B' },
        { style_code: 'CAB' },
        { style_code: 'CAA' },
        { style_code: 'F' },
        { style_code: 'G' },
        { style_code: 'H' },
        { style_code: 'I' },
        { style_code: 'J' },
        { style_code: 'K' }
    ],
    paged = getPaged();

document.write('<pre>' + JSON.stringify(paged, 0, 4) + '</pre>');

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。