client-side 层次结构排序：children-parent 来自数据库的列表，级别数未知

Question

我们在 table 命名 "list" 的数据库中有未知级别的 children 和 parent。每条记录都有 Id 、 title 和 parent （parent 的 ID ). top-level 项的 parent 为 0。

我们要打印所有行 children 在其 parent 下的排序方式。有许多使用服务器端脚本生成递归列表的解决方案。但是我们想要直观地对列表进行排序 (client-side) 以将服务器的负载转移给客户端。

Answer 1

Client-side 排序 children 和 parents 是个好主意，因为将服务器的负载转移到客户端。另外这个 client-side 脚本是 non-recursive 并在一个循环中解决了问题！

第 1 步：

将所有元素打印为 html div，没有关卡架构。但是我们说这个菜单是parent of what和child of what（设置为class of div）。我们还在内存中保存了一个名为 parentlist 的 id(s) 数组，以便稍后在 client-side 脚本中使用。

假设 rs 作为记录集并且 objcon 作为连接 object（在 vbScript 中）：

<%
parentlist="[0,"
sql="select * from list"
rs.open sql,objcon
while not rs.eof 
  parentlist=parentlist&"rs("id")&","
  %>
   <div class="child<%=rs("parent")%> parent<%=rs("id")%>"><%=rs("title")%></div>
  <%
  rs.movenext
wend
rs.close
'removing last comma and closing array
parentlist=Left(parentlist,Len(parentlist)-1)&"]" 
%>

如果你想在视觉上对 children 进行分组而不是将它们列在 parents 下面，那么最好为 div(s) 设置填充。

第 2 步：

通过遍历 parentlist 的数组，分离每个 [=56= 的 children ] 并将它们附加到它们的 parent （使用 Jquery）：

<script type="text/javascript">
  var parentlist=<%=parentlist%>;
  for (i = 0; i < parentlist.length; i++) 
   { 
    $(".child"+parentlist[i]).detach().appendTo(".parent"+parentlist[i]);
   }
</script>

client-side 层次结构排序：children-parent 来自数据库的列表，级别数未知

client-side hierarchy sorting: children-parent list from database with unknown number of levels

sorting

recursion

parent

client-side

hierarchy