Knockout.js分组查找

时间:2014-02-28 04:49:56

标签: json knockout.js knockout-mvc

对淘汰赛来说是新手,所以我似乎在努力解决这个问题。

服务器返回以下json

{"EmployeeData":[{"Id":1,"EmployeeName":"AA Guy1","EmployeeNumber":1004,"Department":1},{"Id":2,"EmployeeName":"BB Guy2","EmployeeNumber":1004,"Department":2},{"Id":3,"EmployeeName":"CC Guy3","EmployeeNumber":1004,"Department":2},{"Id":4,"EmployeeName":"DD Guy4","EmployeeNumber":1004,"Department":3},{"Id":5,"EmployeeName":"EE Guy5","EmployeeNumber":1004,"Department":1},{"Id":6,"EmployeeName":"FF Guy6","EmployeeNumber":1004,"Department":3}],"Dpts":[{"Id":1,"Name":"First Level Department","Desc":"1st somewhere out there"},{"Id":2,"Name":"Finance services","Desc":"Show me the money"},{"Id":3,"Name":"HR Department","Desc":"No education needed"}]}

然后我有一张表

<tbody data-bind="foreach: GroupEmployees" >
    <tr class="employee-row">
    <td>
        <strong>
           <span data-bind="text: EmployeeName"></span>
        </strong>
    </td>
    <td>
        <span data-bind="text: EmployeeNumber"></span>
    </td>
    <td>
        <span data-bind="text: Department" />
    </td>
    </tr>
</tbody>

这显示了员工和部门编号,.... 我将dpts添加到了json,现在我必须按部门分组。所以它必须有一个部门标题 - 并在该列表下该部门的所有员工,然后重复每个部门..

我正在努力寻找如何做到这一点。

对于有更多淘汰经验的人来说,这可能很简单。

1 个答案:

答案 0 :(得分:1)

我能看到的最简单的方法是将数据修改为:

{
  "Dpts" : [
      {
          "Name" : "Finance",
          "EmployeeData" : 
          [
             { "Id":"1", "EmployeeNumber":1001 },
             { "Id":"2", "EmployeeNumber":1002 },
             { "Id":"3", "EmployeeNumber":1003 }
          ]
      },
      {
          "Name" : "HR",
          "EmployeeData" : 
          [
             { "Id":"4", "EmployeeNumber":1004 },
             { "Id":"5", "EmployeeNumber":1005 },
             { "Id":"6", "EmployeeNumber":1006 }
          ]
      },
  ]
}

然后有两个嵌套的淘汰赛“foreach”:

<tbody data-bind="foreach: Dpts" >
<tr>
  <td>
    <strong>
       <span data-bind="text: Name"></span>
    </strong>
  </td>
  <td>
     <table>
       <tbody data-bind="foreach: EmployeeData">
       ...
       </tbody>
     </table>
  </td>
</tr>
</tbody>