如何做网站信息,wordpress禁用编辑器可视化,网站制作 文案,慢慢网站建设再写树型列表 HTML标签的选择th:block的使用 以前用jQuery写过一个树型列表#xff0c;当时选择采用jQuery或者说javascript实现的原因是可以动态获取数据#xff0c;实现无限层级。现在又要用到这个东西#xff0c;发现一个问题#xff1a;其实大多数时候数据并不多#… 再写树型列表 HTML标签的选择th:block的使用 以前用jQuery写过一个树型列表当时选择采用jQuery或者说javascript实现的原因是可以动态获取数据实现无限层级。现在又要用到这个东西发现一个问题其实大多数时候数据并不多完全可以一次性加载动态加载的必要性并不高。至于无限层级也不是使用客户端实现的理由因为使用模板同样可以递归调用同样能根据数据实现无限层级。至少现在使用的thymeleaf模板是支持的。所以就重写了一个有新的心得如下
HTML标签的选择
以前没有HTML5的时候用html标签很随意所以基本上都是用div来包装现在仍然是用div但想发不一样。按HTML5建议应该尽量使用符合语义的标签这种列表的话当然应该用ul或ol并且浏览器的用户代理样式表还会自动给予缩进本来是最合适的。但是如果想要替换前导符并且实现点击前导符而展开或收缩的功能的话就只能用图形按钮实现前导符这个时候要把按钮改为inline还得要用div包装起来使得前导符和节点在一行。那还不如直接用div。如果直接用行内元素a当按钮就要在事件处理程序中阻止其默认行为这种用法很让人费解还不如牺牲语义直接用div。另外即使坚持用ul、ol也还要把默认的缩进去掉因为用list-style: none;去掉前导符号自己加的前导符并不能代替那个位置所以总体上有一个缩进不太美观。用CSS去掉默认缩进当然也行但如果直接用div就没这么多考虑的。所以综合起来还是继续用div。
th:block的使用
以前没用过thymeleaf的唯一的标签不是属性即使是用th:each也是把其他th属性直接写后面。但现在需要用到模块引用就不能这样了。一开始是这样写的 div classtree th:withnodedata${tree}div th:fragmenttreenode(nodedata)button typebutton th:if${not #lists.isEmpty(nodedata.subordinate)}img th:src{/resources/images/chevron-right.svg} width16px height16px/buttondiv th:text${nodedata.name} styledisplay:inline-block/divdiv th:if${not #lists.isEmpty(nodedata.subordinate)}div th:eachchild:${nodedata.subordinate} th:replace~{::treenode(${child})}/div/div/div
/div然后报空对像错误查了很久才发现thymeleaf的属性是有优先级的而th:include和th:replace的优先级最高th:each其次。以前一直把th:each与其他属性一起用没有发现现在用到片断包含了它就先替换了这个片断所以th:each定义的循环变量就没有了传的参数就成了null。这里即使是把th:replace换成th:include也不行原因就是th:include优先级最高先执行这时候传的参数是空就已经错了就算th:each仍然起作用它会再次执行include也没用之前就已经出错了。这时就需要用到th:block这个元素把each放在外面。
div classtree th:withnodedata${tree}div th:fragmenttreenode(nodedata)button typebutton th:if${not #lists.isEmpty(nodedata.subordinate)}img th:src{/resources/images/chevron-right.svg} width16px height16px/buttondiv th:text${nodedata.name} styledisplay:inline-block/divdiv th:if${not #lists.isEmpty(nodedata.subordinate)}th:block th:eachchild:${nodedata.subordinate}div th:replace~{::treenode(${child})}/div/th:block/div/div
/div其他相关的CSS、JavaScript变化、难度不大不值得记录就不粘出来了。
