首页
所有分类
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 相关文章推荐
js中浮点型运算BUG的解决方法说明
Jan 06 Javascript
javascript读写json示例
Apr 11 Javascript
禁止按回车键提交表单的方法
Jun 11 Javascript
javascript产生随机数方法汇总
Jan 25 Javascript
jQuery实现的精美平滑二级下拉菜单效果代码
Mar 28 Javascript
浅谈JavaScript 执行环境、作用域及垃圾回收
May 31 Javascript
微信小程序 获取相册照片实例详解
Nov 16 Javascript
easyui combotree加载静态数据问题（选不上）解决方法
Dec 26 Javascript
学好js，这些js函数概念一定要知道【推荐】
Jan 19 Javascript
从Vuex中取出数组赋值给新的数组,新数组push时报错的解决方法
Sep 18 Javascript
如何解决js函数防抖、节流出现的问题
Jun 17 Javascript
解决js中的setInterval清空定时器不管用问题
Nov 17 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
界面设计(1) FTP服务器(1) 对撞机(1) DNS服务器(2) 粒子对撞机(1) 国际空间站(1) 磁盘分区(1) 太空(1) 人造肉(1) 夸克(1)
You might like
php实现MD5加密16位(不要默认的32位)
2013/08/12 PHP
php提示Warning:mysql_fetch_array() expects的解决方法
2014/12/16 PHP
php学习笔记之字符串常见操作总结
2019/07/16 PHP
用nodejs写的一个简单项目打包工具
2013/05/11 NodeJs
Jquery 例外被抛出且未被接住原因介绍
2013/09/04 Javascript
多引号嵌套的变量命名的问题
2014/05/09 Javascript
node.js下when.js 的异步编程实践
2014/12/03 Javascript
浅谈轻量级js模板引擎simplite
2015/02/13 Javascript
JavaScript的字符串方法汇总
2016/07/31 Javascript
AngularJS入门教程之过滤器详解
2016/08/19 Javascript
简单学习vue指令directive
2016/11/03 Javascript
Javascript使用SWFUpload进行多文件上传
2016/11/16 Javascript
基于jQuery的左滑出现删除按钮的示例
2017/08/29 jQuery
JavaScript动态绑定详解
2017/09/14 Javascript
移动端效果之IndexList详解
2017/10/20 Javascript
JavaScript实现计算圆周率到小数点后100位的方法示例
2018/05/08 Javascript
javaScript实现游戏倒计时功能
2018/11/17 Javascript
vue.js 子组件无法获取父组件store值的解决方式
2019/11/08 Javascript
vue中echarts引入中国地图的案例
2020/07/28 Javascript
[48:27]EG vs Liquid 2018国际邀请赛淘汰赛BO3 第二场 8.25
2018/08/29 DOTA
Python动态声明变量赋值代码实例
2019/12/30 Python
pytorch+lstm实现的pos示例
2020/01/14 Python
python实现快速文件格式批量转换的方法
2020/10/16 Python
英国二手物品交易网站：Preloved
2017/10/06 全球购物
请编写一个 C 函数，该函数在给定的内存区域搜索给定的字符，并返回该字符所在位置索引值
2014/09/15 面试题
若干个Java基础面试题
2015/05/19 面试题
公司年会演讲稿范文
2014/01/11 职场文书
高二政治教学反思
2014/02/01 职场文书
活动策划邀请函
2014/02/06 职场文书
美丽家庭事迹材料
2014/05/03 职场文书
公司运动会策划方案
2014/05/25 职场文书
论文答谢词
2015/01/20 职场文书
汽车转让协议书
2015/01/29 职场文书
2016年教师节慰问信
2015/12/01 职场文书
2016秋季幼儿园开学寄语
2015/12/03 职场文书
创作书写之导游词实用技巧分享（干货）
2019/12/20 职场文书