页面效果
点击“显示答案”按钮，显示参考答案。
页面代码
<% layout('/layouts/default.html', {title: '脑筋急转弯管理', libs: ['dataGrid']}){ %>
<div class="main-content">
<div class="box box-main">
<div class="box-header">
<div class="box-title">
<i class="fa icon-notebook"></i> ${text('脑筋急转弯管理')}
</div>
<div class="box-tools pull-right">
<a href="#" class="btn btn-default" id="btnSearch" title="${text('查询')}"><i class="fa fa-filter"></i> ${text('查询')}</a>
<% if(hasPermi('question:question:edit')){ %>
<a href="${ctx}/question/question/form" class="btn btn-default btnTool" title="${text('新增脑筋急转弯')}"><i class="fa fa-plus"></i> ${text('新增')}</a>
<% } %>
<a href="#" class="btn btn-default" id="btnSetting" title="${text('设置')}"><i class="fa fa-navicon"></i></a>
</div>
</div>
<div class="box-body">
<#form:form id="searchForm" model="${question}" action="${ctx}/question/question/listData" method="post" class="form-inline hide"
data-page-no="${parameter.pageNo}" data-page-size="${parameter.pageSize}" data-order-by="${parameter.orderBy}">
<div class="form-group">
<label class="control-label">${text('问题')}：</label>
<div class="control-inline">
<#form:input path="questionContent" maxlength="45" class="form-control width-120"/>
</div>
</div>
<div class="form-group">
<label class="control-label">${text('答案')}：</label>
<div class="control-inline">
<#form:input path="questionAnswer" maxlength="45" class="form-control width-120"/>
</div>
</div>
<div class="form-group">
<button type="submit" class="btn btn-primary btn-sm"><i class="glyphicon glyphicon-search"></i> ${text('查询')}</button>
<button type="reset" class="btn btn-default btn-sm isQuick"><i class="glyphicon glyphicon-repeat"></i> ${text('重置')}</button>
</div>
</#form:form>
<table id="dataGrid"></table>
<div id="dataGridPage"></div>
</div>
</div>
</div>
<% } %>
<script>
function showAnswer(element){
$(element).next().show()
}
//# // 初始化DataGrid对象
$('#dataGrid').dataGrid({
searchForm: $('#searchForm'),
columnModel: [
{header:'${text("问题")}', name:'questionContent', index:'a.question_content', width:150, align:"left", frozen:true, formatter: function(val, obj, row, act){
return '<a href="${ctx}/question/question/form?questionId='+row.questionId+'" class="btnList" data-title="${text("编辑脑筋急转弯")}">'+(val||row.id)+'</a>';
}},
{header:'${text("答案")}', name:'questionAnswer', index:'a.question_answer', width:150, align:"left", formatter: function(val, obj, row, act){
return '<button οnclick="showAnswer(this)">显示答案</button><span style="display: none">'+row.questionAnswer+'</span>';
}},
{header:'${text("操作")}', name:'actions', width:120, formatter: function(val, obj, row, act){
var actions = [];
//# if(hasPermi('question:question:edit')){
actions.push('<a href="${ctx}/question/question/form?questionId='+row.questionId+'" class="btnList" title="${text("编辑脑筋急转弯")}"><i class="fa fa-pencil"></i></a> ');
actions.push('<a href="${ctx}/question/question/delete?questionId='+row.questionId+'" class="btnList" title="${text("删除脑筋急转弯")}" data-confirm="${text("确认要删除该脑筋急转弯吗？")}"><i class="fa fa-trash-o"></i></a> ');
//# }
return actions.join('');
}}
],
//# // 加载成功后执行事件
ajaxSuccess: function(data){
}
});
</script>
数据库表
CREATE TABLE `question` (
`question_id` int NOT NULL AUTO_INCREMENT COMMENT '编号',
`question_content` varchar(45) COLLATE utf8mb4_cs_0900_ai_ci DEFAULT NULL COMMENT '问题',
`question_answer` varchar(45) COLLATE utf8mb4_cs_0900_ai_ci DEFAULT NULL COMMENT '答案',
PRIMARY KEY (`question_id`)
) ENGINE=InnoDB AUTO_INCREMENT=12 DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_cs_0900_ai_ci COMMENT='脑筋急转弯';
question_id,question_content,question_answer
1,什么东西天天往上升，永远也掉不下来,你的年龄
2,桌上有5只苍蝇，打死1只，桌上还剩几只呢？,就剩打死的那一只
3,什么东西比乌鸦更讨厌？,乌鸦嘴
4,你用什么办法能将一个鸡蛋从5米的高空中摔下来而不会摔破？,从6米的高空扔下来，在离地面1米的地方接住它
5,现在地球上最大的动物是大海里的鲸鱼，那么第二大的动物是什么？,小鲸鱼
6,一个盒子最少有几个边？,里边和外边
7,什么话可以一语道破天机？,天气预报
8,什么时候10加3会等于1？,算时间的时候。13点等于下午1点钟。
9,青蛙和狗参加游泳比赛，为什么青蛙在水里游不过狗？,比赛禁止蛙泳
10,楚楚的生日是3月30日，请问是哪年的3月30日？,每年的3月30日
11,我不会轻功，但一只脚搭在鸡蛋上，鸡蛋却不会破，这是为什么？,另外一只脚踩在地面上
