列表页的树表格

需要使用 treeTable 插件

引用 CSS

<link href="/assets/plugins/treeTable/themes/vsStyle/treeTable.min.css" rel="stylesheet" type="text/css"/>

引用 JS

<script src="/assets/plugins/treeTable/jquery.treeTable.min.js" type="text/javascript"></script>

表格的 HTML

<table class="table table-striped table-bordered table-hover" id="html_table" width="100%">
    <thead>
    <tr>
        <th title="Field #1">
            频道名称
        </th>
        <th title="Field #2">
            排序
        </th>
        <th title="Field #3">
            操作
        </th>
    </tr>
    </thead>
    <tbody>
    <tr th:each="channel : ${channels}" th:attr="id=${channel.id}, pId=${channel.pid}">
        <td th:text="${channel.name}">天涯明月刀</td>
        <td th:text="${channel.sort}">100</td>
        <td>
            <div class="m-demo__preview m-demo__preview--btn">
                <a href="#" class="btn btn-primary btn-sm m-btn  m-btn m-btn--icon">
                    <span>
                        <i class="la la-edit"></i>
                        <span>
                            编辑
                        </span>
                    </span>
                </a>

                <a href="#" class="btn btn-danger btn-sm m-btn  m-btn m-btn--icon">
                    <span>
                        <i class="la la-close"></i>
                        <span>
                            删除
                        </span>
                    </span>
                </a>

                <a href="#" class="btn btn-brand btn-sm m-btn  m-btn m-btn--icon">
                    <span>
                        <i class="la la-plus"></i>
                        <span>
                            添加下级菜单
                        </span>
                    </span>
                </a>
            </div>
        </td>
    </tr>
    </tbody>
</table>

调用 JS 代码

<script>
    $(function () {
        $("#html_table").treeTable({expandLevel: 2, column: 0}).show();
    });
</script>

频道排序代码

树表格插件需要数据排序后才会生效，这里的排序是子节点行元素需要紧随父节点行元素

排序

/**
 * 频道排序，用于配合前端属性表格展示
 * @param targetList 排序后的集合
 * @param sourceList 数据源的集合
 */
private void sortChannelList(List<Channel> targetList, List<Channel> sourceList) {
    for (Channel channel : sourceList) {
        // 判断是否为父节点
        if ("0".equals(channel.getIsParent())) {
            targetList.add(channel);
            // 判断是否有子节点
            for (Channel subChannel : sourceList) {
                if (subChannel.getPid().equals(channel.getId())) {
                    targetList.add(subChannel);
                }
            }
        }
    }
}

调用

/**
 * 跳转到频道列表页
 *
 * @return
 */
@RequestMapping(value = "list", method = RequestMethod.GET)
public String list(Model model) {
    List<Channel> targetList = Lists.newArrayList();
    List<Channel> sourceList = channelService.selectAll();

    // 频道排序
    sortChannelList(targetList, sourceList);

    model.addAttribute("channels", targetList);
    return "modules/channel/list";
}

效果图