基于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> 搜索</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
<!-- 通用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("子级知识点为空"); } }
注： 以上内容为个人记录，不用做商业用途，部分代码仅供参考，主要关注逻辑调用。
