脑筋急转弯在线问答

太空漫步11

于 2024-05-02 07:11:46 发布

阅读量1.6k

点赞数 28

文章标签：脑筋急转弯

本文链接：https://blog.csdn.net/zhourongxiang1/article/details/138350576

版权

本文详细展示了如何在网页中实现脑筋急转弯管理页面，包括表单搜索、数据表格展示以及操作功能，如编辑和删除。涉及到了页面布局、数据绑定和数据库表结构的设计。

摘要由CSDN通过智能技术生成

页面效果

在这里插入图片描述
点击“显示答案”按钮，显示参考答案。

页面代码

<% 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>&nbsp;');
				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>&nbsp;');
			//# }
			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,我不会轻功，但一只脚搭在鸡蛋上，鸡蛋却不会破，这是为什么？,另外一只脚踩在地面上