基于bootstrap table 列表展示父子级

六月的雨在Tencent

发布于 2024-03-28 20:39:49

12600

代码可运行

文章被收录于专栏：CSDNCSDN

运行总次数：0

代码可运行

基于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>

后台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("子级知识点为空");
        }
    }

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

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2024-03-28，如有侵权请联系 cloudcommunity@tencent.com 删除

table