展开和折叠 HTML Table 数据行

Question

我运行一遍又一遍地陷入困境。我有一个非常可靠的 HTML table 功能，但是因为它将包含如此多的数据行，所以我也想要一种简化功能的方法。我想对具有相同“程序字段”的数据行进行分组，并创建一个 expand/collapse 函数，该函数将 hide/display 所有具有相同程序字段的行。

这是我的 table 输出的示例。例如，有两个程序以 X 作为值我想创建一个显示“x”的行并能够单击它并且它会下拉所有具有“x”值的行如果我再次单击它将折叠他们。

这个 YouTube 视频几乎正是我想要完成的，但很难理解，因为这个人的所有数据都很难coded/static，因为我的请求正在被拉走。

YouTube Video of Example

这是我的代码：


<script src="/jquery-3.3.1.min.js"></script>
<script>

var webAppUrl = _spPageContextInfo.webAbsoluteUrl;

function loadData(source, url) {
  return fetch(url, { headers: { accept: "application/json; odata=verbose" } }) // make request
    .then((r) => {
      if (!r.ok) throw new Error("Failed: " + url);  // Check for errors
      return r.json();  // parse JSON
    })
    .then((data) => data.d.results) // unwrap to get results array
    .then((results) => {
      results.forEach((r) => (r.source = source)); // add source to each item
      return results;
    });
}

window.addEventListener("load", function () {
  Promise.all([
    loadData("xDeliverables", "_api/web/lists/getbytitle('xDeliverables')/items?$select=Program,To,Date,Approved,Notes,Deliverable"),
    loadData("yDeliverables", "_api/web/lists/getbytitle('yDeliverables')/items?$select=Program,To,Date,Approved,Notes,Deliverable"),
    loadData("zDeliverables", "_api/web/lists/getbytitle('zDeliverables')/items?$select=Program,To,Date,Approved,Notes,Deliverable"),
  ])
    .then(([r1, r2, r3]) => {
      const objItems = r1.concat(r2,r3);
      var tableContent =
        '<table id="deliverablesTable" style="width:100%" border="1 px"><thead><tr><td><strong>Program</strong></td>' +
        "<td><strong>To</strong></td>" +
        "<td><strong>Date Submitted</strong></td>" +
        "<td><strong>Approved</strong></td>" +
        "<td><strong>Notes</strong></td>" +
        "<td><strong>Deliverable</strong></td>" +
        "</tr></thead><tbody>";

      for (var i = 0; i < objItems.length; i++) {
        tableContent += "<tr>";
        tableContent += "<td>" + objItems[i].Program + "</td>";
        tableContent += "<td>" + objItems[i].To + "</td>";
        tableContent += "<td>" + objItems[i].Date + "</td>";
        tableContent += "<td>" + objItems[i].Approved + "</td>";
        tableContent += "<td>" + objItems[i].Notes + "</td>";
        tableContent += "<td>" + objItems[i].Deliverable + "</td>";
        tableContent += "</tr>";
      }
      $("#deliverables").append(tableContent);
    })
    .catch((err) => {
      alert("Error: " + err);
      console.error(err);
    });
});
function searchTable() {
  var input, filter, table, tr, td, i, txtValue;
  input = document.getElementById("myInput");
  filter = input.value.toUpperCase();
  table = document.getElementById("deliverablesTable");
  tr = table.getElementsByTagName("tr");
  for (i = 0; i < tr.length; i++) {
    td = tr[i].getElementsByTagName("td")[0];
    if (td) {
      txtValue = td.textContent || td.innerText;
      if (txtValue.toUpperCase().indexOf(filter) > -1) {
        tr[i].style.display = "";
      } else {
        tr[i].style.display = "none";
      }
    }       
  }
}
</script>

<style>
#myInput {
  background-image: url('https://cdn1.iconfinder.com/data/icons/hawcons/32/698627-icon-111-search-256.png');
  background-position: left center;
  background-repeat: no-repeat;
  background-size: 30px;
  width: 100%;
  font-size: 16px;
  padding: 12px 20px 12px 40px;
  border: 1px solid #ddd;
  margin-bottom: 12px;
}

#deliverablesTable {
  border-collapse: collapse;
  width: 100%;
  border: 1px solid #ddd;
  font-size: 18px;
}

#deliverablesTable th, #deliverablesTable td {
  text-align: center;
  padding: 12px;
}

#deliverablesTable tr {
  border-bottom: 1px solid #ddd;
}
#deliverablesTable tr:nth-child(even) {
  background-color: #dddddd;
}

#deliverablesTable tr.header, #deliverablesTable tr:hover {
  background-color: #f1f1f1;
}
</style>
<div id="EmployeePanel">
   <table id='deliverablesTable' style="width: 100%;" border="1 px">
     <tr>
       <td>
          <div id="deliverables" style="width: 100%"></div>
      </td>
    </tr>
 </table>
</div>

Answer 1

在每个程序第一次出现后创建一行，并在单击该行时分配 searchTable() 函数：

window.addEventListener("load", function () {
//Create a empty array
  var programs = new Array();
  Promise.all([
    loadData("xDeliverables", "_api/web/lists/getbytitle('xDeliverables')/items?$select=Program,To,Date,Approved,Notes,Deliverable"),
    loadData("yDeliverables", "_api/web/lists/getbytitle('yDeliverables')/items?$select=Program,To,Date,Approved,Notes,Deliverable"),
    loadData("zDeliverables", "_api/web/lists/getbytitle('zDeliverables')/items?$select=Program,To,Date,Approved,Notes,Deliverable"),
  ])
    .then(([r1, r2, r3]) => {
      const objItems = r1.concat(r2,r3);
      var tableContent =
        '<table id="deliverablesTable" style="width:100%" border="1 px"><thead><tr><td><strong>Program</strong></td>' +
        "<td><strong>To</strong></td>" +
        "<td><strong>Date Submitted</strong></td>" +
        "<td><strong>Approved</strong></td>" +
        "<td><strong>Notes</strong></td>" +
        "<td><strong>Deliverable</strong></td>" +
        "</tr></thead><tbody>";

      for (var i = 0; i < objItems.length; i++) {
        if (programs.indexOf(objItems[i].Program)==-1){
          //first occurrence of this Program
          programs.push(objItems[i].Program);
          tableContent += '<tr><td colspan="*" class="searchRow">'+objItems[i].Program+ '</td><tr>';
        }
        tableContent += "<tr>";
        tableContent += "<td>" + objItems[i].Program + "</td>";
        tableContent += "<td>" + objItems[i].To + "</td>";
        tableContent += "<td>" + objItems[i].Date + "</td>";
        tableContent += "<td>" + objItems[i].Approved + "</td>";
        tableContent += "<td>" + objItems[i].Notes + "</td>";
        tableContent += "<td>" + objItems[i].Deliverable + "</td>";
        tableContent += "</tr>";
      }
      $(tableContent).find('.searchRow').click(function(){
         searchTable($(this).text());
      })
      $("#deliverables").append(tableContent);
    })
    .catch((err) => {
      alert("Error: " + err);
      console.error(err);
    });
});

更改 searchTable 使其可以接受参数。如果参数不为null，则赋值给搜索输入框。

function searchTable(srch) {
  if(srch!=== undefined){
    $('#myInput').val(srch)
  var input, filter, table, tr, td, i, txtValue;
  input = document.getElementById("myInput");
  filter = input.value.toUpperCase();
  table = document.getElementById("deliverablesTable");
  tr = table.getElementsByTagName("tr");
  for (i = 0; i < tr.length; i++) {
    td = tr[i].getElementsByTagName("td")[0];
    if (td) {
      txtValue = td.textContent || td.innerText;
      if (txtValue.toUpperCase().indexOf(filter) > -1) {
        tr[i].style.display = "";
      } else {
        tr[i].style.display = "none";
      }
    }       
  }

您可以用不同的方式处理参数/输入框，具体取决于您是希望用户输入覆盖行点击，还是相反。

展开和折叠 HTML Table 数据行

Expand and Collapse HTML Table Data Rows

html

javascript

ajax

sharepoint

jquery