指引网

当前位置: 主页 > 网页制作 > JavaScript >

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

来源:网络 作者:佚名 点击: 时间:2017-07-02 09:35
[摘要]  这篇文章介绍了el表达式 写入bootstrap表格数据页面的实例代码,有需要的同学可以参考一下本文

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:setvar="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:forEachvar="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(){

      varid ;

      $("#myModalLabel_content").text("知识反馈");

      varstr=$(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(){

      varstr=$(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>

 

------分隔线----------------------------