el表达式写入bootstrap表格数据页面

最新推荐文章于 2022-10-09 14:09:16 发布

Java软件小白

最新推荐文章于 2022-10-09 14:09:16 发布

阅读量3k

点赞数 3

分类专栏： bootstrap javascript

本文链接：https://blog.csdn.net/qq_34117825/article/details/54343470

版权

bootstrap 同时被 2 个专栏收录

12 篇文章 0 订阅

订阅专栏

javascript

6 篇文章 0 订阅

订阅专栏

el表达式，写入bootstrap表格，简化代码，效果图：

不多说，上干货：

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>
<c:set var="ctx" value="${pageContext.request.contextPath}"/>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>知识库</title>
<link rel="stylesheet" href="<%=basePath %>knowledge-bs/css/bootstrap.min.css">
<link rel="stylesheet" href="<%=basePath %>knowledge-bs/css/bootstrap-table.min.css">
<link href="<%=basePath %>knowledge-bs/css/toastr.css" rel="stylesheet" />
<link href="<%=basePath %>knowledge-bs/css/sweetalert.css" rel="stylesheet" />

<script src="<%=basePath %>knowledge-bs/js/jquery.min.js"></script>
<script src="<%=basePath %>knowledge-bs/js/sweetalert.min.js"></script>
<script src="<%=basePath %>knowledge-bs/js/bootstrap.min.js"></script>
<script src="<%=basePath %>knowledge-bs/js/tableExport.js"></script>
<script src="<%=basePath %>knowledge-bs/js/jquery.base64.js"></script> 
<script src="<%=basePath %>knowledge-bs/js/bootstrap-table.js"></script>
<script src="<%=basePath %>knowledge-bs/js/bootstrap-table-export.js"></script>
<script src="<%=basePath %>knowledge-bs/js/toastr.js"></script> 
<style type="text/css">
 #reportTableDiv  td{height: 50px; text-align: center; line-height: 50px; width: auto;}
 #reportTableDiv  th{height: 50px; text-align: center; line-height: 50px; width: auto;}
</style>
</head>
<body>
<jsp:include page="zsfktck.jsp"></jsp:include>
<center>
	<div id="container" style="padding-top: 30px;padding-right: 60px;padding-left: 60px;margin-right: auto;margin-left: auto;height:auto">
		<ul id="myTab" class="nav nav-tabs">
			<li><a href="/receiverShow/knowledge-bs/knowledge.html#container">知识库管理</a></li>
			<li><a href="/receiverShow/findKnowRevi_el.action#container">知识库审核</a></li>
			<li><a href="/receiverShow/findAskManagement_el.action#container1">提问管理</a></li>
		</ul>
  <div style="padding-left: 50px;">
  	<table>
  		<thead>
  			<tr>
  					<td style="padding-left: 30px;"><label>关键字</label></td>
					<td style="padding-left: 10px;"><input type="text" class="form-control" aria-describedby="sizing-addon2" id="keyword"  value="" placeholder="请输入关键字"/></td>
					<td style="padding-left: 120px;"><label>标题</label></td>
					<td style="padding-left: 10px;"><input type="text" class="form-control" aria-describedby="sizing-addon2" id="title"  value="" placeholder="请输入标题"/></td>
					<td style="padding-left: 120px;"><label>内容</label></td>
					<td style="padding-left: 10px;"><input type="text" class="form-control" aria-describedby="sizing-addon2" id="content"  value="" placeholder="请输入内容"/></td>
  			</tr>
  		</thead>
  	</table>
  	<div style="padding-top: 10px;">
				<button id="serch" class="btn btn-info">查询</button>
				<button id="reset" class="btn btn-primy">重置</button>
	</div>

  </div>
   <div id="reportTableDiv" class="span10">
		<table class="table table-hover" id="tablepos">
		<thead>
			<tr>
				<th>标题</th>
				<th>分类</th>
				<th>关键字</th>
                <th>点击数</th>
                <th>提交时间</th>
                <th>详情</th>
                <th>操作</th>
			</tr>
		</thead>
		<tbody>
			<c:forEach var="list" items="${protectLists}">
			<tr>
				<td>${list.title }</td>
				<td>${list.classification }</td>
				<td>${list.keyword }</td>
				<td>${list.clicks}</td>
				<td>${list.committime}</td>
				<td><a  data-toggle="modal"  data-target="#myModal"  class="details_button"  name="${list.title },${list.clicks},${list.committime},${list.contentss}">详情</a> 
				</td>
				<td><a  data-toggle="modal"  data-target="#myModal"  class="review_button" name="${list.title },${list.clicks},${list.committime},${list.contentss},${list.id },">审核</a> 
				</td>
			</tr>
			</c:forEach>
		</tbody>
		</table>
	</div>
  </div>
	</center>
</body>
<script type="text/javascript">
        $('#serch').click(function () {
            $.ajax({
                type: "POST",
                url: "findKnowRevi_el.action",
                success: function (data,msg) {
                	if(msg == "success"){
                	window.location.href="<%=basePath %>findKnowRevi_el.action?"+"workOrderTDTO1.keyword=" + escape($('#keyword').val()) + "&workOrderTDTO1.title=" + escape($('#title').val())+ "&workOrderTDTO1.content=" + escape($('#content').val());
                	}
                },
                error: function (XMLHttpRequest, textStatus, thrownError) {
                	alert('模块加载异常！');
                }
            });
 	   });
        $('#reset').click(function(){
 			$('#keyword').val("");
           $('#title').val("");
           $('#content').val("");
 		});
		$(".review_button").click(function(){
			var id ;
			$("#myModalLabel_content").text("知识反馈");
			var str=$(this).attr("name");
			strs=str.split(","); //字符分割
			for (i=0;i<strs.length ;i++ ){
				$("#txt_title_details").val(strs[0]);
				$("#txt_clicks_details").val(strs[1]);
				$("#txt_committime_details").val(strs[2]);
				$("#txt_content_details_sub").val(strs[3]);
				id =strs[4];
			};
	    	$('#myModal_content').modal();
	    	$("#button_sub").removeClass("hidden");
	    	$("#button_sub").addClass("modal-footer");
	    	$("#btn_submit_content").click(function(){
					  $.ajax({
		                    type: "POST",
		                    url: "agreeExamine.action",
	 	                    data: "knowledge.id=" +id,
		                    success: function (data,msg) {
		                    	if(msg == "success"){
		                    		$('#myModal_content').modal('hide');
		 						    window.location.href="<%=basePath %>findKnowRevi_el.action";
		                    	    toastr.success('审核成功');
		                    	}
		                    },
		                    error: function (XMLHttpRequest, textStatus, thrownError) {
		                    	alert('模块加载异常！');
		                    }
		                });
	    	});
	    	$("#btn_refuse").click(function(){
				  $.ajax({
	                    type: "POST",
	                    url: "deleteKnowExamine.action",
	                    data: "id=" +id,
	                    success: function (data,msg) {
	                    	if(msg == "success"){
	                    		$('#myModal_content').modal('hide');
 						    	window.location.href="<%=basePath %>findKnowRevi_el.action";
	                    		toastr.success('拒绝通过');
	                    	}
	                    },
	                    error: function (XMLHttpRequest, textStatus, thrownError) {
	                    	alert('模块加载异常！');
	                    }
	                });
   	});
		});
		$(".details_button").click(function(){
			var str=$(this).attr("name");
			strs=str.split(","); //字符分割
			for (i=0;i<strs.length ;i++ ){
				$("#txt_title_details").val(strs[0]);
				$("#txt_clicks_details").val(strs[1]);
				$("#txt_committime_details").val(strs[2]);
				$("#txt_content_details_sub").val(strs[3]);
			};
			$("#myModalLabel_content").text("");
	    	$('#myModal_content').modal();
	    	$("#button_sub").addClass("hidden");
		});
</script>
</html>