el表达式写入bootstrap表格数据页面的实例代码

2019-11-19 17:59:49

字体：大中小

来源：转载

供稿：网友

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>

以上所述是小编给大家介绍的el表达式写入bootstrap表格数据页面的实例代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对武林网网站的支持！

上一篇：bootstrap手风琴制作方法详解

下一篇：微信小程序本地存储及登录页面处理实例详解