基於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("子級知識點爲空");
}
}
注： 以上內容爲個人記錄，不用做商業用途，部分代碼僅供參考，主要關注邏輯調用。