AJAX获取服务端JSON后如何实现HTML表格按Department字段分组展示

你只需要先对接口返回的人员数据按Department字段做分组，再依次渲染部门分组行、对应部门的人员行即可，修改后的代码如下：

function getData() {
  var $tbl = $('#tblInfo');
  $.ajax({
    url: $("#Get").val(),
    type: 'GET',
    datatype: 'json',
    success: function (data) {
      $tbl.empty();
      // 第一步：按Department字段分组
      const groupByDept = {};
      data.JsonResult.forEach(item => {
        // 不存在该部门分组就初始化数组
        if (!groupByDept[item.Department]) {
          groupByDept[item.Department] = [];
        }
        groupByDept[item.Department].push(item);
      });

      // 第二步：遍历分组依次渲染
      Object.keys(groupByDept).forEach(deptName => {
        // 先渲染部门分组行，dept-group类可用于自定义样式
        $tbl.append(`<tr class="dept-group">
          <td colspan="3">${deptName}</td>
        </tr>`);
        // 再渲染当前部门下的所有人员行
        groupByDept[deptName].forEach(model => {
          $tbl.append(`<tr>
            <td>${model.Name}</td>
            <td>${model.Email}</td>
            <td>${model.Title}</td>
          </tr>`);
        });
      });
    }
  });
}

• 你可以给.dept-group类添加CSS样式区分分组行，比如设置背景色、字体加粗、左侧缩进等，和普通人员行做视觉区分
• 如果需要实现折叠/展开效果，可以给部门行绑定点击事件，点击时切换对应人员行的显示隐藏即可

内容的提问来源于stack exchange，提问作者Азат