首页
所有分类
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 相关文章推荐
Javascript 网页水印(非图片水印)实现代码
Mar 01 Javascript
Jquery 数据选择插件Pickerbox使用介绍
Aug 24 Javascript
利用javascript实现web页面中指定区域打印
Oct 30 Javascript
快速学习jQuery插件 jquery.validate.js表单验证插件使用方法
Dec 01 Javascript
jquery捕捉回车键及获取checkbox值与异步请求的方法
Dec 24 Javascript
喜大普奔！jQuery发布 3.0 最终版
Jun 12 Javascript
Bootstrap轮播插件使用代码
Oct 11 Javascript
js实现下一页页码效果
Mar 07 Javascript
JS库之Waypoints的用法详解
Sep 13 Javascript
一文快速了解JQuery中的AJAX
May 31 jQuery
React 实现车牌键盘的示例代码
Dec 20 Javascript
用vue设计一个日历表
Dec 03 Vue.js
微信小程序 本地存储及登录页面处理实例详解
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
答谢词(97) 方案(1080) 评语(336) 感言(394) 制度(225) 接收函(23) 感谢信(72) 寄语(276) 证明书(326) 计划书(118)
You might like
php读取本地文件常用函数(fopen与file_get_contents)
2013/09/09 PHP
MongoDB在PHP中的常用操作小结
2014/02/20 PHP
PHP互换两个变量值的方法(不用第三变量)
2016/11/14 PHP
详解Yii2.0 rules验证规则集合
2017/03/21 PHP
php传值和传引用的区别点总结
2019/11/19 PHP
用JQuery 实现的自定义对话框
2007/03/24 Javascript
在UpdatePanel内jquery easyui效果失效的解决方法
2010/04/11 Javascript
禁止选中文字兼容IE、Chrome、FF等
2013/09/04 Javascript
angularjs指令中的compile与link函数详解
2014/12/06 Javascript
JavaScript调用客户端Java程序的方法
2015/07/27 Javascript
防止Node.js中错误导致进程阻塞的办法
2016/08/11 Javascript
基于vue配置axios的方法步骤
2017/11/09 Javascript
解决vue+webpack打包路径的问题
2018/03/06 Javascript
vue下history模式刷新后404错误解决方法
2018/08/18 Javascript
angular 用Observable实现异步调用的方法
2018/12/27 Javascript
原生JS实现随机点名项目的实例代码
2019/04/30 Javascript
[49:17]DOTA2-DPC中国联赛 正赛 Phoenix vs Dynasty BO3 第三场 1月26日
2021/03/11 DOTA
python opencv实现任意角度的透视变换实例代码
2018/01/12 Python
Python实现的基于优先等级分配糖果问题算法示例
2018/04/25 Python
详解python中Numpy的属性与创建矩阵
2018/09/10 Python
详解Python:面向对象编程
2019/04/10 Python
Python Lambda函数使用总结详解
2019/12/11 Python
python 按钮点击关闭窗口的实现
2020/03/04 Python
Iconfont(矢量图标)+iconmoon(图标svg互转)配合javascript实现社交分享系统
2020/04/21 Python
keras读取h5文件load_weights、load代码操作
2020/06/12 Python
Noon埃及：埃及在线购物
2019/11/26 全球购物
员工自我鉴定范文
2013/10/06 职场文书
商场拾金不昧表扬信
2014/01/13 职场文书
骨干教师培训制度
2014/01/13 职场文书
社区平安建设方案
2014/05/25 职场文书
2014年作风建设剖析材料
2014/10/23 职场文书
小兵张嘎电影观后感
2015/06/03 职场文书
《正比例》教学反思
2016/02/23 职场文书
导游词之江苏溱潼古镇
2019/11/27 职场文书
MySQL触发器的使用
2021/05/24 MySQL
Go遍历struct,map,slice的实现
2021/06/13 Golang