iis服务器助手广告广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >el表达式如何写入bootstrap表格数据页面
  • 786
分享到

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

2024-04-02 19:04:59 786人浏览 薄情痞子
摘要

这篇文章将为大家详细讲解有关el表达式如何写入bootstrap表格数据页面,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。el表达式,写入bootstrap表格,简化代码

这篇文章将为大家详细讲解有关el表达式如何写入bootstrap表格数据页面,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。

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: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" > 
    <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 > 
  <table> 
    <thead> 
      <tr> 
          <td ><label>关键字</label></td> 
          <td ><input type="text" class="fORM-control" aria-describedby="sizing-addon2" id="keyWord" value="" placeholder="请输入关键字"/></td> 
          <td ><label>标题</label></td> 
          <td ><input type="text" class="form-control" aria-describedby="sizing-addon2" id="title" value="" placeholder="请输入标题"/></td> 
          <td ><label>内容</label></td> 
          <td ><input type="text" class="form-control" aria-describedby="sizing-addon2" id="content" value="" placeholder="请输入内容"/></td> 
      </tr> 
    </thead> 
  </table> 
  <div > 
        <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表格数据页面”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,使各位可以学到更多知识,如果觉得文章不错,请把它分享出去让更多的人看到。

--结束END--

本文标题: el表达式如何写入bootstrap表格数据页面

本文链接: https://www.lsjlt.com/news/72651.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • el表达式如何写入bootstrap表格数据页面
    这篇文章将为大家详细讲解有关el表达式如何写入bootstrap表格数据页面,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。el表达式,写入bootstrap表格,简化代码...
    99+
    2024-04-02
  • Struts2中EL表达式如何执行
    在Struts2中,EL表达式是通过OGNL(Object-Graph Navigation Language)来执行的。EL表达式...
    99+
    2023-08-19
    Struts2
  • python3 写入excel表格数据
    import xlwt #导入xlwt 库 book = xlwt.Workbook(encoding=‘utf-8’) #创建工作簿 sheet = book.add_sheet(‘sheet1’) ...
    99+
    2023-01-31
    表格 数据 excel
  • EL表达式如何在JAVA中使用
    这篇文章将为大家详细讲解有关EL表达式如何在JAVA中使用,文章内容质量较高,因此小编分享给大家做个参考,希望大家阅读完这篇文章后对相关知识有一定的了解。一、概念表达式语言(Expression Language),或称EL表达式,简称EL...
    99+
    2023-05-31
    java ava el表达式
  • Bootstrap如何实现响应式表格
    这篇文章给大家分享的是有关Bootstrap如何实现响应式表格的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。Bootstrap 的响应式 CSS 能够自适应于台式机、平板电脑和手...
    99+
    2024-04-02
  • Python如何写入excel表格
    这篇“Python如何写入excel表格”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“Python如何写入excel表格”文...
    99+
    2023-06-27
  • php替换表达式如何写
    这篇文章主要讲解了“php替换表达式如何写”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“php替换表达式如何写”吧!php替换表达式的写法有:1、“str_ireplace($search,...
    99+
    2023-06-22
  • Bootstrap中怎么直接录入表格行数据
    这篇文章主要介绍Bootstrap中怎么直接录入表格行数据,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!在Winform开发的时候,我们很多时候可以利用表格控件来直接录入数据,不过在Web上较少看到,其实也可以利用d...
    99+
    2023-06-15
  • struts2之使用EL表达式,显示Action中的数据
    在Struts2中,可以使用EL表达式(Expression Language)来显示Action中的数据。首先,在JSP页面中导入...
    99+
    2023-09-28
    struts2
  • Bootstrap中直接录入表格行数据的方法
    这篇文章给大家分享的是有关Bootstrap中直接录入表格行数据的方法的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。具体内容如下:1、直接录入数据的界面分析在之前介绍的数据直接录入处理的时候,界面效果如下所示。上...
    99+
    2023-06-15
  • php中三元表达式如何写
    这篇文章主要介绍“php中三元表达式如何写”,在日常操作中,相信很多人在php中三元表达式如何写问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”php中三元表达式如何写”的疑惑有所帮助!接下来,请跟着小编一起来...
    99+
    2023-06-29
  • Vue2.0如何实现将页面中表格数据导出excel
    小编给大家分享一下Vue2.0如何实现将页面中表格数据导出excel,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧!项目中将后台返回的数据v-for到表格中,然后需要将这个表格导出为EXCE...
    99+
    2024-04-02
  • Angualrjs和bootstrap相结合如何实现数据表格table
    这篇文章主要介绍Angualrjs和bootstrap相结合如何实现数据表格table,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!AngularJS的数据表格需要使用anguala...
    99+
    2024-04-02
  • sql检查约束表达式如何写
    在SQL中,约束表达式是用来定义对表中数据的限制条件的。约束可以在表的创建过程中设置,也可以在表创建后通过ALTER TABLE语句...
    99+
    2023-10-12
    sql
  • python怎么创建表格并写入数据
    在Python中,可以使用`openpyxl`库来创建表格并写入数据。首先需要安装`openpyxl`库,可以使用以下命令进行安装:...
    99+
    2023-10-25
    python
  • 如何入门正则表达式Regex
    这篇文章给大家介绍如何入门正则表达式Regex,内容非常详细,感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助。今天要分享的内容是正则表达式Regex。某天中午正要拿起手机打...
    99+
    2024-04-02
  • 正则表达式空格如何匹配
    正则表达式中,空格可以使用`\s`匹配。`\s`匹配任意空白字符,包括空格、制表符、换行符等。 举个例子,如果想要匹配一个包含空格的...
    99+
    2023-10-08
    正则表达式
  • oracle如何向分区表写入数据
    要向分区表写入数据,您可以使用INSERT语句来执行。以下是一个示例:```sqlINSERT INTO partitioned_t...
    99+
    2023-08-23
    oracle
  • 如何使用Lambda表达式编写递归函数
    这篇文章主要介绍“如何使用Lambda表达式编写递归函数”,在日常操作中,相信很多人在如何使用Lambda表达式编写递归函数问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”如何使用Lambda表达式编写递归函数...
    99+
    2023-06-17
  • PHP页面如何去掉表格边框
    这篇文章主要介绍“PHP页面如何去掉表格边框”,在日常操作中,相信很多人在PHP页面如何去掉表格边框问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”PHP页面如何去掉表格边框”的疑惑有所帮助!接下来,请跟着小编...
    99+
    2023-07-05
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作