首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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

Posted in Javascript onJanuary 11, 2017

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" 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表格数据页面的实例代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持！

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

- Author -

Java软件小白

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
jquery上传插件fineuploader上传文件使用方法(jquery图片上传插件)
Dec 05 Javascript
JavaScript获得url所有参数键值表的方法
Mar 21 Javascript
javascript实现删除前弹出确认框
Jun 04 Javascript
jQuery入门基础知识学习指南
Aug 14 Javascript
JQuery datepicker 用法详解
Dec 25 Javascript
基于JavaScript实现手机短信按钮倒计时(超简单)
Dec 30 Javascript
js实现分割上传大文件
Mar 09 Javascript
jQuery前端开发35个小技巧
May 24 Javascript
微信小程序 教程之模块化
Oct 17 Javascript
JS作用域链详解
Jun 26 Javascript
javascript简写常用的12个技巧（可以大大减少你的js代码量）
Mar 28 Javascript
详解ES6语法之可迭代协议和迭代器协议
Jan 13 Javascript
微信小程序 本地存储及登录页面处理实例详解
Jan 11 #Javascript
js仿iphone秒表功能 计算平均数
Jan 11 #Javascript
jQuery实现限制文本框的输入长度
Jan 11 #Javascript
angularjs 实现带查找筛选功能的select下拉框实例
Jan 11 #Javascript
微信小程序 轮播图swiper详解及实例（源码下载）
Jan 11 #Javascript
Angularjs中使用layDate日期控件示例
Jan 11 #Javascript
web打印小结
Jan 11 #Javascript
五子棋(12) 计算器(5) 图像处理(1) Springboot-cli(1) 异步回调(1) 底部导航(1) 对齐打印(1) format(1) CompletableFuture(1) 井字棋(1)
You might like
关于文本留言本的分页代码
2006/10/09 PHP
PHP类的使用 实例代码讲解
2009/12/28 PHP
php连接MSsql server的五种方法总结
2018/03/04 PHP
php 使用expat方式解析xml文件操作示例
2019/11/26 PHP
JavaScript 模拟用户单击事件
2009/12/31 Javascript
jQuery Tips 为AJAX回调函数传递额外参数的方法
2010/12/28 Javascript
javascript采用数组实现tab菜单切换效果
2012/12/12 Javascript
纯js实现瀑布流展现照片(自动适应窗口大小)
2013/04/08 Javascript
Javascript中克隆一个数组的实现代码
2013/12/06 Javascript
JavaScript实现鼠标滑过图片变换效果的方法
2015/04/16 Javascript
Ajax使用原生态JS验证用户名是否存在
2020/05/26 Javascript
js基础之DOM中元素对象的属性方法详解
2016/10/28 Javascript
JS实现的简单轮播图运动效果示例
2016/12/22 Javascript
Nodejs高扩展性的模板引擎 functmpl简介
2017/02/13 NodeJs
nodeJS服务器的创建和重新启动的实现方法
2018/05/12 NodeJs
VUE中v-on:click事件中获取当前dom元素的代码
2018/08/22 Javascript
jQuery pagination分页示例详解
2018/10/23 jQuery
Jquery和CSS实现选择框重置按钮功能
2018/11/08 jQuery
浅谈laytpl 模板空值显示null的解决方法及简单的js表达式
2019/09/19 Javascript
vue多页面项目中路由使用history模式的方法
2019/09/23 Javascript
跟老齐学Python之总结参数的传递
2014/10/10 Python
使用Python中PDB模块中的命令来调试Python代码的教程
2015/03/30 Python
使用pycharm生成代码模板的实例
2018/05/23 Python
Python使用pymysql从MySQL数据库中读出数据的方法
2018/07/25 Python
selenium+python自动化测试之使用webdriver操作浏览器的方法
2019/01/23 Python
PyQt5实现简易电子词典
2019/06/25 Python
Python math库 ln(x)运算的实现及原理
2019/07/17 Python
python自带tkinter库实现棋盘覆盖图形界面
2019/07/17 Python
Python中的 sort 和 sorted的用法与区别
2019/08/10 Python
Python文件操作方法详解
2020/02/09 Python
CSS3基础(RGBa、text-shadow、box-shadow、border-radius)
2012/11/13 HTML / CSS
Joseph官网：英国小众奢侈品牌
2019/05/17 全球购物
副总经理岗位职责范本
2014/09/30 职场文书
大学学生会竞选稿
2015/11/19 职场文书
详解CocosCreator消息分发机制
2021/04/16 Javascript
Python内置包对JSON文件数据进行编码和解码
2022/04/12 Python