基于bootstrap table 列表展示父子级

约定不等于承诺〃 2023-02-22 03:58 12阅读 0赞

### 基于bootstrap table 列表展示父子级 ###

*   *  页面展示效果
     *   *  展开前
         *  展开后
     *  页面代码
     *  后台controller

## 页面展示效果 ##

### 展开前 ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NzZG41NjU5NzM4NTA_size_16_color_FFFFFF_t_70][]

### 展开后 ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NzZG41NjU5NzM4NTA_size_16_color_FFFFFF_t_70 1][]

## 页面代码 ##

<!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> 搜索</a>
    								<a class="btn btn-warning btn-rounded btn-sm" onclick="$.form.reset()"><i class="fa fa-refresh"></i> 重置</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

<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"/>
    	
    	<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

<div th:fragment="footer">
    	<script th:src="@{/js/jquery.min.js}"></script>
    	<script th:src="@{/js/bootstrap.min.js}"></script>
    	
    	<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>
    	
    	<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>
    	
    	<script th:src="@{/ajax/libs/bootstrap-treetable/bootstrap-treetable.js}"></script>
    	
    	<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>

## 后台controller ##

/**
         * 查询子级列表
         */
        @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("子级知识点为空");
            }
        }

**注：** 以上内容为个人记录，不用做商业用途，部分代码仅供参考，主要关注逻辑调用。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NzZG41NjU5NzM4NTA_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/2020070116035149.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NzZG41NjU5NzM4NTA=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NzZG41NjU5NzM4NTA_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200701160450444.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NzZG41NjU5NzM4NTA=,size_16,color_FFFFFF,t_70