基于bootstrap table 清單展示父子級

<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <th:block th:include="include :: header('考季知識點清單')" />
</head>
<body class="gray-bg">
     <div class="container-div">
        <div class="row">
            <div class="col-sm-12 search-collapse">
                <form id="formId">
                    <input type="hidden" name="seasonId" id="seasonId" th:value="${seasonId}"/>
                    <div class="select-list">
                        <ul>
                            <li>
                                重要程度:
                                <select name="importance">
                                    <option value="">全部</option>
                                    <option value="1">1星</option>
                                    <option value="2">2星</option>
                                    <option value="3">3星</option>
                                </select>
                            </li>
                            <li>
                                難易度:
                                <select name="difficulty">
                                    <option value="">全部</option>
                                    <option value="1">難</option>
                                    <option value="2">中</option>
                                    <option value="3">易</option>
                                </select>
                            </li>
                            <li>
                                狀态:
                                <select name="status">
                                    <option value="">全部</option>
                                    <option value="0">建立</option>
                                    <option value="1">隐藏</option>
                                    <option value="2">激活</option>
                                </select>
                            </li>
                            <li>
                                所屬章:
                                <select name="chapterId" id="chapterId" onchange="refreshChapter()">
                                    <option value="">全部</option>
                                    <option th:each="chapter : ${chapters}" th:text="${chapter.chapterName}" th:value="${chapter.chapterId}"></option>
                                </select>
                            </li>

                            <li>
                                所屬節:
                                <select name="sectionId" id="sectionId">
                                    <option value="">全部</option>
                                </select>
                            </li>

                            <li>
                                知識點名稱：<input type="text" name="kpName"/>
                            </li>

                            <li>
                                知識點id：<input type="text" name="kpId"/>
                            </li>

                            <li>
                                <a class="btn btn-primary btn-rounded btn-sm" onclick="$.table.search()"><i class="fa fa-search"></i>&nbsp;搜尋</a>
                                <a class="btn btn-warning btn-rounded btn-sm" onclick="$.form.reset()"><i class="fa fa-refresh"></i>&nbsp;重置</a>
                            </li>
                        </ul>
                    </div>
                </form>
            </div>
            
            <div class="btn-group-sm" id="toolbar" role="group">
                <a class="btn btn-success" onclick="add()" shiro:hasPermission="project:seasonKnowledgePoint:add">
                    <i class="fa fa-plus"></i> 添加
                </a>
            </div>
            <div class="col-sm-12 select-table table-striped">
                <table id="bootstrap-table"></table>
            </div>
        </div>
    </div>
    <div th:include="include :: footer"></div>
    <script th:inline="javascript">
        var editFlag = [[${@permission.hasPermi('project:seasonKnowledgePoint:edit')}]];
        var removeFlag = [[${@permission.hasPermi('project:seasonKnowledgePoint:remove')}]];
        var changeFlag = [[${@permission.hasPermi('project:seasonKnowledgePoint:change')}]];
        var relationFlag = [[${@permission.hasPermi('project:knowledgePointLink:relation')}]];
        var cardFlag = [[${@permission.hasPermi('project:seasonKnowledgePoint:card')}]];
        var audioFlag = [[${@permission.hasPermi('project:seasonKnowledgePoint:audio')}]];
        var prefix = ctx + "project/seasonKnowledgePoint";

        //根據考季擷取目前綁定課程
        function refreshChapter() {
            $("#sectionId").empty();
            var chapterId = $("#chapterId").val();
            $.ajax({
                type: "get",
                url: prefix+"/getSearchSectionList",
                dataType: "html",
                data:{
                    chapterId: chapterId
                },
                async:false,
                success:function (html) {
                    if ($.trim(html) != "") {
                        $("#sectionId").append(html);
                    }
                }
            });
        }

        $(function() {
            var options = {
                url: prefix + "/list",
                createUrl: prefix + "/add/{id}",
                updateUrl: prefix + "/edit/{id}",
                modalName: "知識點管理",
                showExport: true,
                columns: [
                    {
                        title: '',
                        align: 'center',
                        formatter: function(value, row, index) {
                            var actions = [];
                            //有子級的父級添加加号
                            if(row.hasChild){
                                actions.push('<a class="" href="javascript:" onclick="addChildHtml(' + row.kpId + ', this )"><i class="glyphicon glyphicon-plus icon-plus"></i></a>');
                            }
                            return actions.join('');
                        }
                    },
                    {
                        field : 'kpId',
                        title : '知識點ID'
                    },
                    {
                        field : 'kpName',
                        title : '知識點名稱'
                    },
                    {
                        field : 'isExamPoint',
                        title : '是否考點',
                        formatter:function (value, row, index) {
                            //0.否 1.是
                            if (value == 1) {
                                return '是';
                            }else {
                                return '否';
                            }
                        }
                    },
                    {
                        field : 'importance',
                        title : '重要程度',
                        formatter:function (value, row, index) {
                            //1.1星2.2星3.3星
                            if (value == 1) {
                                return '1星';
                            }else if (value == 2) {
                                return '2星';
                            }else if (value == 3) {
                                return '3星';
                            }else {
                                return '-';
                            }
                        }
                    },
                    {
                        field : 'difficulty',
                        title : '難度',
                        formatter:function (value, row, index) {
                            //1.難2.中3.易
                            if (value == 1) {
                                return '難';
                            }else if (value == 2) {
                                return '中';
                            }else if (value == 3) {
                                return '易';
                            }else {
                                return '-';
                            }
                        }
                    },
                    {
                        field : 'attrStatus',
                        title : '屬性',
                        formatter:function (value, row, index) {
                            //1.正常2.新增3.變更
                            if (value == 1) {
                                return '不變';
                            }else if (value == 2) {
                                return '新增';
                            }else if (value == 3) {
                                return '變更';
                            }else {
                                return '-';
                            }
                        }
                    },
                    {
                        field : 'isMust',
                        title : '是否必學',
                        formatter:function (value, row, index) {
                            //0.否 1.是
                            if (value == 1) {
                                return '是';
                            }else {
                                return '否';
                            }
                        }
                    },
                    {
                        field : 'kpScore',
                        title : '知識點分值'
                    },
                    {
                        field : 'chapterOrder',
                        title : '章次序'
                    },
                    {
                        field : 'chapterName',
                        title : '章名稱'
                    },
                    {
                        field : 'chapSequence',
                        title : '章順序'
                    },
                    {
                        field : 'sectionName',
                        title : '節名稱'
                    },
                    {
                        field : 'sectSequence',
                        title : '節順序'
                    },
                    {
                        field : 'sequence',
                        title : '知識點順序'
                    },
                    {
                        field : 'qingyiPagenum',
                        title : '所在輕一頁碼'
                    },
                    {
                        field : 'status',
                        title : '狀态',
                        formatter:function (value, row, index) {
                            //0建立1.隐藏2.激活
                            if (value == 0) {
                                return '建立';
                            }else if (value == 1) {
                                return '隐藏';
                            }else if (value == 2) {
                                return '激活';
                            }else {
                                return '-';
                            }
                        }
                    },
                    {
                        title: '操作',
                        align: 'center',
                        formatter: function(value, row, index) {
                            var actions = [];
                            actions.push('<a class="btn btn-white btn-xs ' + editFlag + '" href="javascript:void(0)" onclick="$.operate.edit(\'' + row.kpId + '\')"><i class="fa fa-edit"></i> 編輯</a> ');
                            if (row.status == 2) {
                                //已經激活 出隐藏按鈕
                                actions.push('<a class="btn btn-white btn-xs ' + changeFlag + '" href="javascript:void(0)" onclick="disable(\'' + row.kpId + '\')"><i class="fa fa-save"></i> 隐藏</a> ');
                                //激活的可以關聯知識點
                                if (row.relation == "yes") {
                                    actions.push('<a class="btn btn-primary btn-xs ' + relationFlag + '" href="javascript:void(0)" onclick="relation(\'' + row.kpId + '\')"><i class="fa fa-creative-commons"></i> 關聯知識點</a> ');
                                }else {
                                    actions.push('<a class="btn btn-white btn-xs ' + relationFlag + '" href="javascript:void(0)" onclick="relation(\'' + row.kpId + '\')"><i class="fa fa-creative-commons"></i> 關聯知識點</a> ');
                                }
                            }else {
                                //不是激活狀态的可以删除 出激活按鈕
                                actions.push('<a class="btn btn-white btn-xs ' + changeFlag + '" href="javascript:void(0)" onclick="enable(\'' + row.kpId + '\')"><i class="fa fa-save"></i> 激活</a> ');
                                actions.push('<a class="btn btn-white btn-xs ' + removeFlag + '" href="javascript:void(0)" onclick="$.operate.remove(\'' + row.kpId + '\')"><i class="fa fa-remove"></i> 删除</a> ');
                            }
                            if (row.kpCard != null && row.kpCard != "") {
                                actions.push('<a class="btn btn-primary btn-xs ' + cardFlag + '" href="javascript:void(0)" onclick="kpCard(\'' + row.kpId + '\')"><i class="fa fa-adn"></i> 添加知識卡片</a> ');
                            }else {
                                actions.push('<a class="btn btn-white btn-xs ' + cardFlag + '" href="javascript:void(0)" onclick="kpCard(\'' + row.kpId + '\')"><i class="fa fa-adn"></i> 添加知識卡片</a> ');
                            }
                            if (row.kpVoice != null && row.kpVoice != "") {
                                actions.push('<a class="btn btn-primary btn-xs ' + audioFlag + '" href="javascript:void(0)" onclick="kpAudio(\'' + row.kpId + '\')"><i class="fa fa-pause"></i> 添加音頻</a> ');
                            }else {
                                actions.push('<a class="btn btn-white btn-xs ' + audioFlag + '" href="javascript:void(0)" onclick="kpAudio(\'' + row.kpId + '\')"><i class="fa fa-pause"></i> 添加音頻</a> ');
                            }
                            return actions.join('');
                        }
                    }]
            };
            $.table.init(options);
        });

        //父級加載子級方法
        function addChildHtml(kpId,tdThis) {
            //判斷是否是加号，加号的話展開并加載子類，如果是減号的話則删除掉子類
            if ($(tdThis).children('i').hasClass('glyphicon-plus')) {
            //加載子類資料
                var html = "";
                var formData = {"parentId":kpId};
                $.ajax({
                    url: prefix + "/getChildList",
                    type: 'post',
                    dataType: "json",
                    data: formData,
                    success: function(result) {
                        if(result.code == web_status.SUCCESS){
                            $.each(result.data,function (i,row) {
                                html += '<tr child-index="'+i+'" class="child-tr pid-'+kpId+'">';
                                html +='<td/>';
                                html +='<td style="">'+row.kpId+'</td>';
                                if(row.kpName==null){
                                    html +='<td style="">-</td>';
                                }else {
                                    html +='<td style="">'+row.kpName+'</td>';
                                }
                                if (row.isExamPoint == 1) {
                                    html +='<td style="">是</td>';
                                }else {
                                    html +='<td style="">否</td>';
                                }
                                if (row.importance == 1) {
                                    html +='<td style="">1星</td>';
                                }else if (row.importance == 2) {
                                    html +='<td style="">2星</td>';
                                }else if (row.importance == 3) {
                                    html +='<td style="">3星</td>';
                                }else {
                                    html +='<td style="">-</td>';
                                }
                                if (row.difficulty == 1) {
                                    html +='<td style="">難</td>';
                                }else if (row.difficulty == 2) {
                                    html +='<td style="">中</td>';
                                }else if (row.difficulty == 3) {
                                    html +='<td style="">易</td>';
                                }else {
                                    html +='<td style="">-</td>';
                                }
                                if (row.attrStatus == 1) {
                                    html +='<td style="">不變</td>';
                                }else if (row.attrStatus == 2) {
                                    html +='<td style="">新增</td>';
                                }else if (row.attrStatus == 3) {
                                    html +='<td style="">變更</td>';
                                }else {
                                    html +='<td style="">-</td>';
                                }
                                if (row.isMust == 1) {
                                    html +='<td style="">是</td>';
                                }else {
                                    html +='<td style="">否</td>';
                                }
                                if(row.kpScore==null){
                                    html +='<td style="">-</td>';
                                }else {
                                    html +='<td style="">'+row.kpScore+'</td>';
                                }
                                if(row.chapterOrder==null){
                                    html +='<td style="">-</td>';
                                }else {
                                    html +='<td style="">'+row.chapterOrder+'</td>';
                                }
                                if(row.chapterName==null){
                                    html +='<td style="">-</td>';
                                }else {
                                    html +='<td style="">'+row.chapterName+'</td>';
                                }
                                if(row.chapSequence==null){
                                    html +='<td style="">-</td>';
                                }else {
                                    html +='<td style="">'+row.chapSequence+'</td>';
                                }
                                if(row.sectionName==null){
                                    html +='<td style="">-</td>';
                                }else {
                                    html +='<td style="">'+row.sectionName+'</td>';
                                }
                                if(row.sectSequence==null){
                                    html +='<td style="">-</td>';
                                }else {
                                    html +='<td style="">'+row.sectSequence+'</td>';
                                }
                                if(row.sequence==null){
                                    html +='<td style="">-</td>';
                                }else {
                                    html +='<td style="">'+row.sequence+'</td>';
                                }
                                if(row.qingyiPagenum==null){
                                    html +='<td style="">-</td>';
                                }else {
                                    html +='<td style="">'+row.qingyiPagenum+'</td>';
                                }
                                if (row.status == 0) {
                                    html +='<td style="">建立</td>';
                                }else if (row.status == 1) {
                                    html +='<td style="">隐藏</td>';
                                }else if (row.status == 2) {
                                    html +='<td style="">激活</td>';
                                }else {
                                    html +='<td style="">-</td>';
                                }
                                //添加修改知識點點選事件
                                html +='<td style="text-align: center;">';
                                html +='<a class="btn btn-white btn-xs ' + editFlag + '" href="javascript:void(0)" onclick="$.operate.edit(' + row.kpId + ')"><i class="fa fa-edit"></i>編輯</a> ';
                                //已經激活 出隐藏按鈕
                                if (row.status == 2) {
                                    html +='<a class="btn btn-white btn-xs ' + changeFlag + '" href="javascript:void(0)" onclick="disable(' + row.kpId + ')"><i class="fa fa-save"></i>隐藏</a> ';
                                }else {
                                    //不是激活狀态的可以删除 出激活按鈕
                                    html +='<a class="btn btn-white btn-xs ' + changeFlag + '" href="javascript:void(0)" onclick="enable(' + row.kpId + ')"><i class="fa fa-save"></i>激活</a> ';
                                    html +='<a class="btn btn-white btn-xs ' + removeFlag + '" href="javascript:void(0)" onclick="$.operate.remove(' + row.kpId + ')"><i class="fa fa-remove"></i>删除</a> ';
                                }
                                html +='</td>';
                                html +='</tr>';
                            });
                            $(tdThis).parent().parent().after(html);
                        }else{
                            $.modal.alertError(result.msg);
                        }
                    }
                });
//              寫入之類成功之後在去掉加号等樣式，防止出錯
                $(tdThis).children('i').removeClass('glyphicon-plus');
                $(tdThis).children('i').removeClass('icon-plus');
                $(tdThis).children('i').addClass('glyphicon-minus');
                $(tdThis).children('i').addClass('icon-minus');
            }else {
//              減号的時候點選将子類資料移除，然後将減号變加号
                $('.pid-'+kpId+'').remove();
                $(tdThis).children('i').removeClass('glyphicon-minus');
                $(tdThis).children('i').removeClass('icon-minus');
                $(tdThis).children('i').addClass('glyphicon-plus');
                $(tdThis).children('i').addClass('icon-plus');
            }
        }



        /*添加知識點*/
        function add() {
            var seasonId = $("#seasonId").val();
            $.operate.add(seasonId);
        }
        /* 隐藏*/
        function disable(kpId) {
            $.modal.confirm("确認要隐藏嗎？", function() {
                $.operate.post(prefix + "/changeStatus", { "kpId": kpId, "status": 1 });
            })
        }

        /* 激活 */
        function enable(kpId) {
            $.modal.confirm("确認要激活嗎？", function() {
                $.operate.post(prefix + "/changeStatus", { "kpId": kpId, "status": 2 });
            })
        }

        /*關聯知識點*/
        function relation(kpId) {
            var url = prefix + "/relationKp?kpId=" + kpId;
            $.modal.open("添加關聯知識點", url);
        }

        /*添加知識卡片*/
        function kpCard(kpId) {
            var url = prefix + "/kpCard?kpId=" + kpId;
            $.modal.open("添加知識卡片", url);
        }

        /*添加音頻*/
        function kpAudio(kpId) {
            var url = prefix + "/kpAudio?kpId=" + kpId;
            $.modal.open("添加音頻", url);
        }

    </script>
</body>
</html>

頁面css

<!-- 通用CSS -->
<head th:fragment=header(title)>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <title th:text="${title}"></title>
    <link rel="shortcut icon" href="favicon.ico">
    <link th:href="@{/css/bootstrap.min.css}" rel="stylesheet"/>
    <link th:href="@{/css/font-awesome.min.css}" rel="stylesheet"/>
    <!-- bootstrap-table 表格插件樣式 -->
    <link th:href="@{/ajax/libs/bootstrap-table/bootstrap-table.min.css}" rel="stylesheet"/>
    <link th:href="@{/css/animate.css}" rel="stylesheet"/>
    <link th:href="@{/css/style.css}" rel="stylesheet"/>
    <link th:href="@{/ruoyi/css/ry-ui.css}" rel="stylesheet"/>
</head>

頁面js

<!-- 通用JS -->
<div th:fragment="footer">
    <script th:src="@{/js/jquery.min.js}"></script>
    <script th:src="@{/js/bootstrap.min.js}"></script>
    <!-- bootstrap-table 表格插件 -->
    <script th:src="@{/ajax/libs/bootstrap-table/bootstrap-table.min.js}"></script>
    <script th:src="@{/ajax/libs/bootstrap-table/locale/bootstrap-table-zh-CN.min.js}"></script>
    <script th:src="@{/ajax/libs/bootstrap-table/extensions/mobile/bootstrap-table-mobile.js}"></script>
    <script th:src="@{/ajax/libs/bootstrap-table/extensions/toolbar/bootstrap-table-toolbar.min.js}"></script>
    <script th:src="@{/ajax/libs/bootstrap-table/extensions/columns/bootstrap-table-fixed-columns.js}"></script>
    <!-- jquery-validate 表單驗證插件 -->
    <script th:src="@{/ajax/libs/validate/jquery.validate.min.js}"></script>
    <script th:src="@{/ajax/libs/validate/messages_zh.min.js}"></script>
    <script th:src="@{/ajax/libs/validate/jquery.validate.extend.js}"></script>
    <!-- jquery-validate 表單樹插件 -->
    <script th:src="@{/ajax/libs/bootstrap-treetable/bootstrap-treetable.js}"></script>
    <!-- jquery-export 表格導出插件 -->
    <script th:src="@{/ajax/libs/bootstrap-table/extensions/export/bootstrap-table-export.js}"></script>
    <script th:src="@{/ajax/libs/bootstrap-table/extensions/export/tableExport.js}"></script>
    <!-- 遮罩層 -->
    <script th:src="@{/ajax/libs/blockUI/jquery.blockUI.js}"></script>
    <script th:src="@{/ajax/libs/iCheck/icheck.min.js}"></script>
    <script th:src="@{/ajax/libs/layer/layer.min.js}"></script>
    <script th:src="@{/ajax/libs/layui/layui.js}"></script>
    <script th:src="@{/ruoyi/js/common.js?v=3.3.0}"></script>
    <script th:src="@{/ruoyi/js/ry-ui.js?v=3.3.0}"></script>
    <script th:src="@{/ruoyi/js/domain.js}"></script>
    <script th:inline="javascript"> var ctxa = [[@{/}]];
    var ctx=[[${#httpServletRequest.getScheme() + '://' + #httpServletRequest.getServerName() }]] + ctxa;
    </script>
</div>

/**
     * 查詢子級清單
     */
    @RequiresPermissions("project:seasonKnowledgePoint:list")
    @PostMapping("/getChildList")
    @ResponseBody
    public AjaxResult getChildList(SeasonKnowledgePoint seasonKnowledgePoint)
    {
        List<SeasonKnowledgePoint> list = seasonKnowledgePointService.selectSeasonKnowledgePointList(seasonKnowledgePoint);
        if (CollectionUtils.isNotEmpty(list)) {
            return AjaxResult.success("擷取子級知識點成功",list);
        }else {
            return AjaxResult.error("子級知識點為空");
        }
    }

注：以上内容為個人記錄，不用做商業用途，部分代碼僅供參考，主要關注邏輯調用。

基于bootstrap table 清單展示父子級

基于bootstrap table 清單展示父子級

繼續閱讀

主流浏覽器四大綜合性能測試

JavaScript自學筆記【4】函數的聲明與調用目錄二、函數的聲明三、函數的調用

請求逾時VUE axios重新再次請求

nodejs微信開發---授權登入+擷取使用者資訊微信網頁授權

debian9更新4.9.0核心到4.19.2核心過程

Javascript建構Bingo卡片遊戲

JavaScript的那些坑之事件代理事件代理事件階段

javascript的for (var i in data)慎用javascript中的for (var i in data)謹慎用

tab滑鼠經過菜單切換

vue （vue2.0）使用總結(從大體結構總結)

vue搭建過程及出現問題

/\B(?=(?:\d{3})+$)/g 一條令人費解的正規表達式

适用于JavaScript的ECMAScript 2020規範向前發展

JS生成uuid的四種方法

layui多任務上傳添加進度條