按 2 个不同的属性对数组进行排序/分组

Question

我有一个基于其“程序”属性的分组/排序数组，这很棒。但是现在我需要根据该分组内的不同属性（可交付）进行排序，这可能吗？如果是这样，我怎样才能做到这一点？这是我的桌子的照片。看看它是如何按程序组织的？在程序分组中，我还想根据可交付项目进行排序/分组，因为每个程序中会有两个以上的方法。此外，如果工作量不大，我也希望使这些行可点击（展开/折叠），这样表格在加载后不会有 100 行长。这是我的预期输出：预期结果+------------+----------------------+-----------+------------+--------------+---------------------+| Program    | Deliverable          |  Date     |   Approved | Notes        | To                  |+------------+----------------------+-----------+------------+--------------+---------------------+| Program 1  |                                                                                    |+------------+----------------------+-----------+------------+--------------+---------------------+|            | Monthly Status Report|                                                             |+------------+----------------------+-----------+------------+--------------+---------------------+|            |                      | 05/10/2020| Yes        | Example Notes| [e-mail] |+------------+----------------------+-----------+------------+--------------+---------------------+|            |                      | 03/30/2020| No         | Example Notes| [e-mail] |+------------+----------------------+-----------+------------+--------------+---------------------+|            | Meeting Minutes      |                                                             |+------------+----------------------+-----------+------------+--------------+---------------------+

Answer 1

只需对您的结果进行排序。

Object.keys(sortedObj).forEach(key => {

      tableContent += "<tr>";

      tableContent += "<td>" + key + "</td>";

      tableContent += "</tr>";

      sortedObj[key].sort((a,b)=>{

          if (a.Deliverable > b.Deliverable) return 1;

          if (a.Deliverable < b.Deliverable) return -1;

          return 0;

      }).forEach(obj => {

        tableContent += "<tr>";

        tableContent += "<td> </td>";

        tableContent += "<td>" + obj.To + "</td>";

        tableContent += "<td>" + obj.Date + "</td>";

        tableContent += "<td>" + obj.Approved + "</td>";

        tableContent += "<td>" + obj.Notes + "</td>";

        tableContent += "<td>" + obj.Deliverable + "</td>";

        tableContent += "</tr>";

      });

    });

Answer 2

这是代码：

var sortedObj = {}

objItems.forEach(item => {

var program = item.Program;

var deliverable = item.Deliverable;

delete (item.Program); //remove this line to keep the program in the item data

delete (item.Deliverable); //remove this line to keep the deliverable in the item data

if(!sortedObj[program]){

sortedObj[program] = {};

}

if(!sortedObj[program][deliverable]){

sortedObj[program][deliverable] = [];

}

sortedObj[program][deliverable].push(item);

});

 

Object.keys(sortedObj).forEach((program, index) => {

tableContent += "<tr class='breakrow'>";

tableContent += "<td>" + program + "</td>";

tableContent += "</tr>";

Object.keys(sortedObj[program]).forEach((deliverable, index) => {

tableContent += "<tr class='datarow'>";

tableContent += "<td> </td>";

tableContent += "<td>" + deliverable + "</td>";

tableContent += "</tr>";

sortedObj[program][deliverable].forEach(obj => {

tableContent += "<tr class='subdatarow'>";

tableContent += "<td> </td>";

tableContent += "<td> </td>";

tableContent += "<td>" + obj.To + "</td>";

tableContent += "<td>" + obj.Date + "</td>";

tableContent += "<td>" + obj.Approved + "</td>";

tableContent += "<td>" + obj.Notes + "</td>";

tableContent += "</tr>";

});

});

});

      $("#deliverables").append(tableContent);

      $('.datarow').hide();

    $('.subdatarow').hide();

 

      $('#deliverablesTable').on('click', 'tr.breakrow', function(){

      console.log('hello');

        $(this).nextUntil('tr.breakrow').slideToggle(200);

      });

      $(document).on('click','#deliverablesTable tr.datarow', function(){

        $(this).nextUntil('tr.breakrow, tr.datarow').slideToggle(200);

      });

      })