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

2024-10-28 22:46:54

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

BootStrap数据表格实例代码

首先初始化页面 $(function(){ $('#archives-table').bootstrapTable({ url: "/coinSend/list",//数据源 dataField: "rows",//服务端返回数据键值就是说记录放的键值是rows,分页时使用总记录数的键值为total search: true,//是否搜索 cache: false, striped: true, pagination: true,//是否分页 sortable:
Angualrjs和bootstrap相结合实现数据表格table

AngularJS的数据表格需要使用angualarjs.bootstrap.dirPagination.js 效果图: 1.html部分 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" data-ng-app="app"> <head> <meta http-equiv="Content-Type" content="te
BootStrap Fileinput插件和Bootstrap table表格插件相结合实现文件上传、预览、提交的导入Excel数据操作步骤

bootstrap-fileinput源码:https://github.com/kartik-v/bootstrap-fileinput bootstrap-fileinput在线API:http://plugins.krajee.com/file-input bootstrap-fileinput Demo展示:http://plugins.krajee.com/file-basic-usage-demo 这个插件主要是介绍如何处理图片上传的处理操作,原先我的Excel导入操作使用的是Upl
bootstrap table 数据表格行内修改的实现代码

js中设置列的属性 editable : { type : 'text',//数据显示在文本框内 emptytext : "--",//数据为空时显示 validate : function(value) { if ($.trim(value) == '') { return '不能为空';//修改是数据为空显示 } } } js中设置bootstrop-table加载数据时属性 onEditableSave : function(field, row, oldValue, $el)
Bootstrap Table表格一直加载(load)不了数据的快速解决方法

bootstrap-table是一个基于Bootstrap风格的强大的表格插件神器,官网:http://bootstrap-table.wenzhixin.net.cn/zh-cn/ 这里列出遇到的一个小问题:Bootstrap Table表格一直加载不了数据. $("#button").click(function(){ var name=$("input[name='name']").val(); $('#table').bootstrapTable('load
bootstrap jquery dataTable 异步ajax刷新表格数据的实现方法

异步请求 var postData = { "env_name" : new_env_name, "env_url": new_env_url, "env_desc" : new_env_desc }; $.ajax({ type: 'POST', url : '/test_env_add/', data : postData, dataType : 'json', success : function(data){ $('#table_test
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.
Python3读取和写入excel表格数据的示例代码

python操作excel主要用到 xlrd 和 xlwt 这两个库,xlrd读取excel表格数据, 支持 xlsx和xls格式的excel表格 :xlwt写入excel表格数据: 一.python读取excel表格数据 1.读取excel表格数据常用操作 import xlrd # 打开excel表格 data_excel=xlrd.open_workbook('data/dataset.xlsx') # 获取所有sheet名称 names=data_excel.sheet_names()
运用El表达式截取字符串/获取list的长度实例

${fn:substring(wjcd.lrsj, 0, 16)} 使用functions函数来获取list的长度 ${fn:length(list)} <%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %> 函数名函数说明使用举例 fn:contains 判断字符串是否包含另外一个字符串 <c:if test="${fn:contains(name
Bootstrap表格和栅格分页实例详解

拼接table请将以下代码直接运行:换下 bootstrap.css jquery-1.12.3.min.js bootstrap-paginator.min.js" <!DOCTYPE html> <html> <head lang="zh-cn"> <title>产品列表</title> <meta charset="utf-" /> <meta http-equiv=&qu
新手vue构建单页面应用实例代码

本文介绍了新手vue构建单页面应用实例代码,分享给大家,具体如下步骤: 1.使用vue-cli创建项目 2.使用vue-router实现单页路由 3.用vuex管理我们的数据流 4.使用vue-resource请求我们的node服务端 5.使用.vue文件进行组件化的开发一.目录结构: 二.搭建项目先安装 vue-cli: sudo npm install -g vue-cli 使用vue-cli构建初始化项目:vue init webpack project(创建webpack项目并下载
layui table 表格模板按钮的实例代码

这是个是全部的jsp 页面: <%@page pageEncoding="UTF-8" contentType="text/html; charset=UTF-8" %> <html> <link rel="icon" href="../../../static/images/favicon.png" rel="external nofollow" > <title
使用vue重构资讯页面的实例代码解析

从我接手到将这个页面代码重构前,一直都还是使用angular1的代码去做的,需求来了也是用angular去实现:作为一个憧憬新技术的前端,怎么忍受得了现在还在使用这么有历史感的框架,所以,以前就一直在酝酿着如何将angular重构成vue. 代码结构设计这个资讯项目代码整体都是使用angular.js来去实现的,而此次想重构的资讯详情页面只是其中的一个页面,所以新建了一个文件夹 /newApp .作为以后新技术的文件夹,以后使用vue技术的都放在这个文件夹下,区别于原先文件夹 /app . 在
jQuery 实现鼠标画框并对框内数据选中的实例代码

jquery库: jquery -1.10.2.min.js,jQuery UI - v1.12.1. jQuery 代码不多说了,之间上代码.不懂的地方看注释. <script type="text/javascript"> //鼠标按下时的X Y坐标 var mouseDownX; var mouseDownY; //鼠标按下时移动的X Y 坐标 var mouseMoveX; var mouseMoveY; //移动的状态 var isMove = false; /
python处理csv数据动态显示曲线实例代码

本文研究的主要是python处理csv数据动态显示曲线,分享了实现代码,具体如下. 代码: # -*- coding: utf-8 -*- """ Spyder Editor This temporary script file is located here: C:\Users\user\.spyder2\.temp.py """ """ Show how to modify the coordinate form
Android实现一个包含表格的图标库实例代码

之前有写过一个图表lib,但是开发的速度,大多很难跟上产品需求变化的脚步,所以修改了下原先的图表库,支持图表下面能整合table显示对应的类目,用曲线替换了折线,支持多曲线的显示,增加了显示的动画,,增加了一些可定制的属性,支持水平柱状图和叠加柱状图,以及多曲线图和饼状图的显示 1.效果图 2.各种图表的使用方式 1.饼状图这个和原先的使用一样,只不过增加了一个动画,可以参看之前的文章,饼状图使用. 2.水平多柱状图 2.1 xml布局 <wellijohn.org.varchart.hor_

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

相关推荐

随机推荐

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