jQuery如何在表上对字典数组进行分组

时间：2019-05-22 05:41:28

标签： javascript jquery html

我使用词典数组，所以我有大量数据，需要对其进行分组。

所以我按小时将其分组，最后我收到了这样的数据：

enter image description here

问题是，我有一个表，我需要按小时存储数据，并且我要按小时存储数据，并且需要将此数据分组为一行。

代码：

var lpmsData = [
    { item: "111000355B", order: "9999999999", actual: "59", target: "504", defects: "5", efficiency: 66, pefomance: 66, oee: "N/A", timeNumber: 5},
    { item: "102211549B", order: "8888888887", actual: "504", target: "366", defects: "123", efficiency: 125, pefomance: 96, oee: "N/A", timeNumber: 5 },
    { item: "112255458C", order: "7777777777", actual: "777", target: "555", defects: "1", efficiency: 155, pefomance: 102, oee: "N/A", timeNumber: 6  },
    { item: "111225445G", order: "6666666666", actual: "403", target: "404", defects: "1", efficiency: 34, pefomance: 78, oee: "N/A", timeNumber: 7  },
    { item: "584844455A", order: "5555555555", actual: "905", target: "905", defects: "1", efficiency: 100, pefomance: 68, oee: "N/A", timeNumber: 8  },
    { item: "111000354B", order: "9999999999", actual: "403", target: "404", defects: "1", efficiency: 70, pefomance: 78, oee: "N/A", timeNumber: 8  },
    { item: "102253212B", order: "8888888887", actual: "504", target: "366", defects: "123", efficiency: 125, pefomance: 96, oee: "N/A", timeNumber: 9  },
    { item: "112241678C", order: "7777777777", actual: "777", target: "555", defects: "1", efficiency: 50, pefomance: 102, oee: "N/A", timeNumber: 10  },
    { item: "111225456G", order: "6666666666", actual: "403", target: "404", defects: "1", efficiency: 89, pefomance: 78, oee: "N/A", timeNumber: 11  },
    { item: "584844000A", order: "5555555555", actual: "905", target: "905", defects: "1", efficiency: 100, pefomance: 78, oee: "N/A", timeNumber: 12  }
];

var timeShedule = [
    { firstShift: ["05:45 - 07:00", "07:00 - 08:00", "08:00 - 09:00", "09:00 - 10:00", "10:00 - 11:00", "11:00 - 12:00", "12:00 - 13:00", "13:00 - 14:00", "14:00 - 14:45",] },
    { seccondShift: ["15:00 - 16:00", "16:00 - 17:00", "17:00 - 18:00", "18:00 - 19:00", "19:00 - 20:00", "20:00 - 21:00", "21:00 - 22:00", "22:00 - 23:00", "23:00 - 00:00",] }
];

var groupedData = groupBy(lpmsData, 'timeNumber');



function buildTable() {
    $.each(groupedData, function (i, data) {
        var categoryBuild = `<tr class=${data.efficiency}>
    <td width="150">${timeShedule[0].firstShift[i]}</td>
    <td>${data.item[0].item}</td>
    <td>${data.item[0].actual}</td> 
    <td>${data.item[0].target}</td>
    <td>${data.item[0].defects}</td>
    <td>${data.item[0].efficiency} %</td>
    <td>${data.item[0].pefomance} %</td>
    <td class="oee">${data.item[0].oee}</td>
    </tr>`;

        $('.tableData').append(categoryBuild);
        console.log(data.item)
        rowColorChange(data.item[0].efficiency);
    });

}

buildTable()

function rowColorChange(data) {
    if (data <= 50) {
        $('.tableData tr:last').css("background-color", "#FF6363");
    } else if (data <= 70) {
        $('.tableData tr:last').css("background-color", "#FEF567");
    } else if (data <= 100) {
        $('.tableData tr:last').css("background-color", "#70FE67");
    } else if (data > 100) {
        $('.tableData tr:last').css("background-color", "#53B1EB");
    }
}

function sortByKey(array, key) {
    return array.sort(function (a, b) {
        var x = a[key]; var y = b[key];
        return ((x < y) ? -1 : ((x > y) ? 1 : 0));
    });
}

$(document).ready(function () {
    $(".footer").hide();
    sortByKey(lpmsData, "startTime");
});

function groupBy(arr, key) {
    var newArr = [],
        types = {},
        newItem, i, j, cur;
    for (i = 0, j = arr.length; i < j; i++) {
        cur = arr[i];
        if (!(cur[key] in types)) {
            types[cur[key]] = { date: cur[key], item: [] };
            newArr.push(types[cur[key]]);
        }
        types[cur[key]].item.push(cur);
    }
    return newArr;
}

HTML：

  <table>
        <thead>
            <tr>
                <th></th>
                <th>Item number</th>
                <th>Actual</th>
                <th>Target</th>
                <th>Defects</th>
                <th>Efficiency</th>
                <th>Performance</th>
                <th class="oee">OEE</th>
            </tr>
        </thead>
        <tbody class="tableData">
        </tbody>
    </table>

因此，如您所见，我有mok数据，当时我有 timeNumber 使用此timeNumber将一组数据分组。

在一个小组中，我收集第一行的数据，但它们是分开的。

所以最后我必须拥有：

enter image description here

我希望我解释得很好。

1 个答案:

答案 0 :(得分：0)

我想这个答案来得有点晚，但是也许您仍然感兴趣。我基本上重写了所有JavaScript部分，以表明经常可以通过减少编写来做更多。

分组阶段已经将.map()对象转换为一个数组数组。这样，使用.reduce()或<td>方法就可以更轻松地处理这些数组。

换色器和分类功能也缩短了。我注释掉了排序功能，因为它对于timeNumber并不是真正必需的。但是，可能会发现按效率排序很有趣...

我对将多个结果“收集”到一个timeNumber中的解释是将相关记录放在时间代码rowspan="n"后面，其中n，timeNumber的范围是结果给定的timeNumber。

将您的timeSchedule对象从您的times对象转换为实际时间时，我有些疑问，我也简化为数组var lpmsData = [ { item: "111000355B", order: "9999999999", actual: "59", target: "504", defects: "5", efficiency: 66, pefomance: 66, oee: "N/A", timeNumber: 5}, { item: "102211549B", order: "8888888887", actual: "504", target: "366", defects: "123", efficiency: 125, pefomance: 96, oee: "N/A", timeNumber: 5 }, { item: "112255458C", order: "7777777777", actual: "777", target: "555", defects: "1", efficiency: 155, pefomance: 102, oee: "N/A", timeNumber: 6 }, { item: "111225445G", order: "6666666666", actual: "403", target: "404", defects: "1", efficiency: 34, pefomance: 78, oee: "N/A", timeNumber: 7 }, { item: "584844455A", order: "5555555555", actual: "905", target: "905", defects: "1", efficiency: 100, pefomance: 68, oee: "N/A", timeNumber: 8 }, { item: "111000354B", order: "9999999999", actual: "403", target: "404", defects: "1", efficiency: 70, pefomance: 78, oee: "N/A", timeNumber: 8 }, { item: "102253212B", order: "8888888887", actual: "504", target: "366", defects: "123", efficiency: 125, pefomance: 96, oee: "N/A", timeNumber: 9 }, { item: "112241678C", order: "7777777777", actual: "777", target: "555", defects: "1", efficiency: 50, pefomance: 102, oee: "N/A", timeNumber: 10 }, { item: "111225456G", order: "6666666666", actual: "403", target: "404", defects: "1", efficiency: 89, pefomance: 78, oee: "N/A", timeNumber: 11 }, { item: "584844000A", order: "5555555555", actual: "905", target: "905", defects: "1", efficiency: 100, pefomance: 78, oee: "N/A", timeNumber: 12 } ]; var times = [["05:45 - 07:00", "07:00 - 08:00", "08:00 - 09:00", "09:00 - 10:00", "10:00 - 11:00", "11:00 - 12:00", "12:00 - 13:00", "13:00 - 14:00", "14:00 - 14:45",], ["15:00 - 16:00", "16:00 - 17:00", "17:00 - 18:00", "18:00 - 19:00", "19:00 - 20:00", "20:00 - 21:00", "21:00 - 22:00", "22:00 - 23:00", "23:00 - 00:00",] ]; var getcolor= v=>'upto'+(v<=50?50:v<=70?70:v<=100?100:'anything'); var cols=['item','actual','target','defects','efficiency','pefomance','oee'],cls=[]; var grp=lpmsData // .sort((a,b)=>a.efficiency-b.efficiency) .reduce((coll,el)=>{if (!coll[el.timeNumber]) coll[el.timeNumber]=[]; coll[el.timeNumber].push(cols.map(c=>el[c])); return coll},{}); $(function (){ $('.tableData').append(Object.keys(grp).map(tc=> '<tr><td class="tc" rowspan="'+grp[tc].length+'">'+tc+': '+times[0][tc-6] +'</td><td>'+grp[tc].map(tl=>{cls.push(tl[4]);return tl.join('</td><td>')}) .join('</td></tr><tr><td>') +'</td></tr>').join("\n")); $('tr:gt(0)').each((i,tr)=>tr.className=getcolor(cls[i])); });。当前，timeNumber为5似乎与任何给定的时隙都不对应。 

.upto50 {background-color:#FF6363}
.upto70 {background-color:#FEF567}
.upto100 {background-color:#70FE67}
.uptoanything {background-color:#53B1EB}
td.tc {background-color:#eee}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table><thead><tr>
  <th></th>
  <th>Item number</th>
  <th>Actual</th>
  <th>Target</th>
  <th>Defects</th>
  <th>Efficiency</th>
  <th>Performance</th>
  <th class="oee">OEE</th>
  </tr></thead>
  <tbody class="tableData">
  </tbody>
</table>
{{1}}

相关问题
最新问题