Question

这是我需要表达的IA。（树模型）

about us
    company
        history
        location
    ceo
product
    mobile
        iphone
        galaxy 3

这是我需要制作的HTML DOM。如您所见，depth2和depth3（最多5个或6个）位于同一级别的DOM中，depth1将它们作为子级。（因为CSS，我必须这样做）

<div class="depth1"><span>about us</span>

    <div class="depth2">company</div>   
    <div class="depth2">ceo</div><!--CEO is here! not below "location" -->

    <div class="depth3">history</div>   
    <div class="depth3">location</div>

</div>


<div class="depth1"><span>product</span>

    <div class="depth2">mobile</div>

    <div class="depth3">iphone</div>    
    <div class="depth3">galaxy 3</div>

</div>

数据插入mysql就像这样。（p_id表示父母的身份）

id(pk)  p_id    level   order   name
------------------------------------------
1       root        0       0       -
2       1       1       100     about us
3       7       2       100     mobile
4       5       3       200     location
5       2       2       100     company
6       5       3       100     history
7       1       1       200     product
8       3       3       100     iphone
9       3       3       200     galaxy
10      2       2       200     ceo

我尝试order by level, order但结果不合适。（订单应与HTML DOM订单相同）

id(pk)  p_id    level   order   name
------------------------------------------
1       root        0       0       -
2       1       1       100     about us
7       1       1       200     product
3       7       2       100     mobile
5       2       2       100     company
10      2       2       200     ceo
8       3       3       100     iphone
6       5       3       100     history
4       5       3       200     location
9       3       3       200     galaxy

我如何订购与HTML订单相同的内容？

最难的部分是depth2或depth3在其父级（depth1）下面（作为一个组）。

id(pk)  p_id    level   order   name
------------------------------------------
1       root        0       0       -
2       1       1       100     about us
5       2       2       100     company
10      2       2       200     ceo
6       5       3       100     history
4       5       3       200     location
7       1       1       200     product
3       7       2       100     mobile
8       3       3       100     iphone
9       3       3       200     galaxy 3

我制作了jQuery代码来解决我的问题。但我无法应用jQuery，因为实际数据太大（几百个），重新排列HTML元素需要花费一些烦人的时间。我无法承担客户方的责任。

我搜索了improve jQuery performance的方法。但我必须考虑禁用用户javascript。

请分享您的不同观点或新鲜想法甚至技巧。（表达语言是JSP）谢谢。

Answer 1

如您所见，可以通过简单查询从数据库中提取数据，然后编写使用该数据填充树结构的代码。

我不确定为什么你认为唯一的选择是在流程的最末端 - 数据库和表示层。

你没有说你在中间层使用的编程语言 - 我猜它不是jQuery的JavaScript。无论是什么，执行数据库查询的中间层服务器端语言肯定比客户端javascript更适合创建树结构。

如果由于某种原因你真的必须在数据库中这样做，我会建议一个存储过程。

另请注意，其他一些数据库为此目的具有分层查询语法（如Oracle的“CONNECT BY”）。

[mysql] SQL检索树数据但有些不同的顺序

1 个答案: