首页
所有分类
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 要点归纳（三） jQuery中的事件和动画（下：动画篇）
Mar 24 Javascript
基于Jquery的淡入淡出的特效基础练习
Dec 13 Javascript
Extjs3.0 checkboxGroup 动态添加item实现思路
Aug 14 Javascript
IE10中flexigrid无法显示数据的解决方法
Jul 26 Javascript
jQuery实现可关闭固定于底（顶）部的工具条菜单效果
Nov 06 Javascript
js 动态生成html 触发事件传参字符转义的实例
Feb 14 Javascript
浅谈redux以及react-redux简单实现
Aug 28 Javascript
@angular前端项目代码优化之构建Api Tree的方法
Dec 24 Javascript
Vue.js中的extend绑定节点并显示的方法
Jun 20 Javascript
Javascript ParentNode和ChildNode接口原理解析
Mar 16 Javascript
JS实现数据动态渲染的竖向步骤条
Jun 24 Javascript
vue中实现弹出层动画效果的示例代码
Sep 25 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
二维码(2) 目录管理(1) 延时任务(1) Get(1) Post(1) 太阳码(1) Word(2) openGauss(1) 条码(1) 日志(1)
You might like
php实现文件下载功能的几个代码分享
2014/05/10 PHP
浅谈PDO的rowCount函数
2015/06/18 PHP
PHP实现PDO操作mysql存储过程示例
2019/02/13 PHP
JQery 渐变图片导航效果代码 漂亮
2010/01/01 Javascript
jQuery 表格工具集
2010/04/25 Javascript
两个Javascript小tip资料
2010/11/23 Javascript
IE和Firefox的Javascript兼容性总结[推荐收藏]
2011/10/19 Javascript
浅析JavaScript中的常用算法与函数
2013/11/21 Javascript
jQuery实现下拉框左右选择的简单实例
2014/02/22 Javascript
jQuery通过点击行来删除HTML表格行的实现示例
2014/09/10 Javascript
JavaScript实现数组在指定位置插入若干元素的方法
2015/04/06 Javascript
JavaScript判断用户名和密码不能为空的实现代码
2016/05/16 Javascript
js replace(a,b)之替换字符串中所有指定字符的方法
2016/08/17 Javascript
JS框架之vue.js(深入三:组件1）
2016/09/29 Javascript
微信小程序 教程之引用
2016/10/18 Javascript
深入理解javascript函数参数与闭包
2016/12/12 Javascript
通过sails和阿里大于实现短信验证
2017/01/04 Javascript
vue.js实现条件渲染的实例代码
2017/06/22 Javascript
详解NodeJS Https HSM双向认证实现
2019/03/12 NodeJs
JavaScript HTML DOM 元素 (节点)新增，编辑，删除操作实例分析
2020/03/02 Javascript
[02:48]DOTA2超级联赛专访海涛：你们的选择没有错
2013/06/07 DOTA
Python 生成 -1~1 之间的随机数矩阵方法
2018/08/04 Python
django如何连接已存在数据的数据库
2018/08/14 Python
Django uwsgi Nginx 的生产环境部署详解
2019/02/02 Python
python 使用matplotlib 实现从文件中读取x,y坐标的可视化方法
2019/07/04 Python
python实现动态数组的示例代码
2019/07/15 Python
对Django中的权限和分组管理实例讲解
2019/08/16 Python
Django3.0 异步通信初体验(小结)
2019/12/04 Python
pytorch GAN生成对抗网络实例
2020/01/10 Python
tensorflow实现测试时读取任意指定的check point的网络参数
2020/01/21 Python
Hotels.com拉丁美洲：从豪华酒店到经济型酒店的预定优惠和折扣
2019/12/09 全球购物
波兰品牌鞋履在线商店：Eastend.pl
2020/01/11 全球购物
七一建党节演讲稿
2014/09/11 职场文书
应届毕业生自荐信
2015/03/04 职场文书
会议简讯范文
2015/07/20 职场文书
Ajax常用封装库——Axios的使用
2021/05/08 Javascript