实现简单的树形页面显示 treeable (此树不可异步加载 局限性很大)

1.库文件   

treeTable.min.css、jquery.treeTable.min.js

2.jsp 页面显示的core

<script type="text/javascript">
$(document).ready(function() {
    $("#contentTable").treeTable({expandLevel : 5,column:1}).show(); })
</script>

expandLevel  不为   1   的时候 ，是默认树形展开  显示

<c:forEach items="${list}" var="rule">
            <tr id="${rule.id}" pId="${rule.pId ne '1'?rule.pId:'0'}">
                <td style="display: none;"> <input type="checkbox" id="${rule.id}" class="i-checks"></td>

传来的数据类型是   list

rule  是我项目组使用到的entity 类

关键在于  <tr   id       pId  >  这两个属性是固定的

3.contoller    core 代码

for (int i = 0; i < themes.size(); i++) {
            String themeNameCode = themes.get(i).getCode();
            List<Rule> oneRuleList = new ArrayList<Rule>();// 同一种校验类型的集合
            Rule hiddenRule = new Rule();// 父节点

            hiddenRule.setpId("1");
            hiddenRule.setThemeName(themeNameCode);
            hiddenRule.setId(UUIDGenerator.getUUID());
            oneRuleList.add(hiddenRule);

            for (int j = 0; j < ruleList.size(); j++) {
                if (flagRepeat[j] == 1)
                    continue;
                if (themeNameCode.equals(ruleList.get(j).getThemeName())) {
                    // 如果 ThemeName 相同，即添加成子，且设置 flagRepeat 为 1，避免重复添加
                    ruleList.get(j).setpId(hiddenRule.getId());
                    oneRuleList.add(ruleList.get(j));
                    flagRepeat[j] = 1;
                }
            }
            list.addAll(oneRuleList);

        }

 

思路 ： 将父类的pid 设置为 1,将父类 id  赋值给 子类的pid 

效果：