首页
所有分类
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 相关文章推荐
Input 特殊事件onpopertychange和oninput
Jun 17 Javascript
javascript preload&amp;lazy load
May 13 Javascript
jQuery源码分析-03构造jQuery对象-源码结构和核心函数
Nov 14 Javascript
web基于浏览器的本地存储方法应用
Nov 27 Javascript
分享一个自己写的简单的javascript分页组件
Feb 15 Javascript
JS实现的仿淘宝交易倒计时效果
Nov 27 Javascript
纯JS代码实现一键分享功能
Apr 20 Javascript
JavaScript通过HTML的class来获取HTML元素的方法总结
May 24 Javascript
angularjs中使用ng-bind-html和ng-include的实例
Apr 28 Javascript
利用prop-types第三方库对组件的props中的变量进行类型检测
May 02 Javascript
zTree异步加载展开第一级节点的实现方法
Sep 05 Javascript
js序列化和反序列化的使用讲解
Jan 19 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
HBuilder(1) 分布式追踪(1) MutationObserver(1) 条形码(1) OOP(1) kubernetes(1) tree shaking(1) GPU(1) Three.js(1) Express(1)
You might like
上海地方志办公室－上海电子仪表工业志
2021/03/04 无线电
克隆一个新项目的快捷方式
2013/04/10 PHP
linux使用crontab实现PHP执行计划定时任务
2014/05/10 PHP
php实现cookie加密的方法
2015/03/10 PHP
php检查日期函数checkdate用法实例
2015/03/19 PHP
php设计模式之正面模式实例分析【星际争霸游戏案例】
2020/03/24 PHP
js表格分页实现代码
2009/09/18 Javascript
默认让页面的第一个控件选中的javascript代码
2009/12/26 Javascript
基于jquery的finkyUI插件与Ajax实现页面数据加载功能
2010/12/03 Javascript
JQuery实现绚丽的横向下拉菜单
2013/12/19 Javascript
JavaScript中最简洁的编码html字符串的方法
2014/10/11 Javascript
node.js中的http.response.addTrailers方法使用说明
2014/12/14 Javascript
使用jQuery制作Web页面遮罩层插件的实例教程
2016/05/26 Javascript
第四篇Bootstrap网格系统偏移列和嵌套列
2016/06/21 Javascript
jquery+CSS3实现3D拖拽相册效果
2016/07/18 Javascript
基于layer.js实现收货地址弹框选择然后返回相应的地址信息
2017/05/26 Javascript
js判断文件类型大小并给出提示的实现方法
2018/01/03 Javascript
angular4 共享服务在多个组件中数据通信的示例
2018/03/30 Javascript
Webpack 4如何动态切割JS注入文件名详解
2019/07/09 Javascript
浅析Angular 实现一个repeat指令的方法
2019/07/21 Javascript
vue子传父关于.sync与$emit的实现
2019/11/05 Javascript
vue.js 实现a标签href里添加参数
2019/11/12 Javascript
javascript 设计模式之组合模式原理与应用详解
2020/04/08 Javascript
深入了解JavaScript词法作用域
2020/07/29 Javascript
Javascript如何实现扩充基本类型
2020/08/26 Javascript
Python中用Decorator来简化元编程的教程
2015/04/13 Python
Python判断列表是否已排序的各种方法及其性能分析
2016/06/20 Python
利用Python如何生成hash值示例详解
2017/12/20 Python
python实现log日志的示例代码
2018/04/28 Python
pandas数据集的端到端处理
2019/02/18 Python
python 抓包保存为pcap文件并解析的实例
2019/07/23 Python
创业计划书如何编写
2014/02/06 职场文书
2015年社区平安建设工作总结
2015/05/13 职场文书
Angular CLI发布路径的配置项浅析
2021/03/29 Javascript
MySql如何将查询的出来的字段进行转换
2022/06/14 MySQL