tab標籤頁切換iframe

阿新 • • 發佈：2021-12-17

簡介：li中的for是渲染給介面input中value值，form表單提交，在給layui中的渲染資料連線和where中的條件在後端查詢資料

1.父類介面

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="/kms/technologyProject/css/base.css">
    <link rel="stylesheet" href="/kms/technologyProject/css/list.css">
    <link rel="stylesheet" href="/kms/technologyProject/css/toubu.css">
    <link rel="stylesheet" href="/kms/layui/layui/css/layui.css">
    <script src="/kms/layui/layui/layui.js"></script>


</head>

<body>
<div class 
="w">
    <div class="search">
        <div class="search-input">
            <form class="sear-post" id="SearchForm" name="VelcroForm"
                  action="/ServiceAction/com.velcro.workflow.report.servlet.ReportAction?action=search&reportid=2c923dae67313bc70167396dc8d1497b"
                 name 
="searchForm" method="post">
            <input type="text" name="topicname" id="keyword" placeholder="請輸入你想查詢的專案名稱">
            <button class="btn-search" onclick="search_result()">搜尋</button>
            </form>
        </div>
    </div>
    <div class="list">

        <div class 
="list-left">
            <div class="list-title">分類導航</div>
                <ul>
                    <li for="/kms/instrumentUnitAction/view.do" class="anxia">
                        <a href="#" >
                            <i><img src="/kms/technologyProject/image/list-books.png" alt=""></i>
                            裝置臺賬
                        </a>
                    </li>
                    <li for="/kms/weekInstrument/view.do">
                        <a href="#">
                            <i><img src="/kms/technologyProject/image/list-books.png" alt=""></i>
                            周檢計劃
                        </a>
                    </li>
                    <li for="/kms/lowerInstrument/view.do">
                        <a href="#">
                            <i><img src="/kms/technologyProject/image/list-books.png" alt=""></i>
                            降級報廢登記
                        </a>
                    </li>

                </ul>
            </div>
        <div class="list-right">
            <iframe src="/kms/instrumentUnitAction/view.do" width="1000" height="990" frameborder="0" scrolling="no" style="border-radius: 4px 4px 4px 4px;border-radius: 4px 4px 4px 4px;-moz-border-radius: 4px 4px 4px 4px;-webkit-border-radius: 4px 4px 4px 4px;"></iframe>
        </div>
    </div>
</div>
<script src="/kms/js/jquery-1.12.4.min.js"></script>
<script>
    //  右側
    $(function () {
        $(".list-left>ul>li").click(function () {
            $(this).addClass("anxia").siblings().removeClass("anxia")
            var html =  $(this)[0].attributes.for.value
            $("iframe")[0].attributes.src.value = html
        })

    })
    function search_result() {
        var kw = $("#keyword").val();
        if (kw == "" || kw == "請輸入你想查詢的專案名稱") {
            alert("請輸入你想查詢的專案名稱!");
            return;// 請輸入搜尋內容
        }
        $('#SearchForm').submit();
    }
</script>
</body>

</html>

2.子介面，iframe中的介面

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>科技專案-申報管理</title>
    <link rel="stylesheet" href="/kms/technologyProject/css/base.css">
    <link rel="stylesheet" href="/kms/layui/layui/css/layui.css">
    <link rel="stylesheet" href="/kms/technologyProject/css/list.css">
</head>
<style>
    html,body{
        background-color: #fff;
    }
</style>
<body>
<div class="table">
    <div class="shaixuan">
        <label for="">篩選條件</label>
        <button>收起篩選</button>
    </div>
    <form class="layui-form" id="VelcroForm" name="VelcroForm" action="/kms/instrumentUnitAction/view.do" method="post">
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">儀器名稱</label>
                <div class="layui-input-inline">
                    <input type="text" id="objname" name="objname" value="${equipment.objname}" placeholder="" autocomplete="off" class="layui-input">
                </div>
            </div>

            <div class="layui-inline">
                <label class="layui-form-label">規格型號</label>
                <div class="layui-input-inline">
                    <input type="text" id="specification"  name="specification" placeholder="" value="${equipment.specification}" class="layui-input">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">測量範圍</label>
                <div class="layui-input-inline">
                    <input type="text" id="extent" name="extent" placeholder="" value="${equipment.extent}"  class="layui-input">
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">精度</label>
                <div class="layui-input-inline">
                    <input type="text" id="precision" name="precision" value="${equipment.precision}" placeholder="" class="layui-input">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">生產廠家</label>
                <div class="layui-input-inline">
                    <input type="text" id="manufacturer" name="manufacturer" placeholder="" value="${equipment.manufacturer}" class="layui-input">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">校驗檢定週期</label>
                <div class="layui-input-inline">
                    <input type="text" id="period" name="period" placeholder="" value="${equipment.period}" class="layui-input">
                </div>
            </div>
        </div>
        <%--<div class="layui-form-item">--%>
            <%--<div class="layui-input-block detail-search-btn">--%>
                <%--<button class="layui-btn bg-blue" lay-submit lay-filter="formData">搜尋</button>--%>
                <%--<button type="reset" class="layui-btn layui-btn-primary color-blue border-blue">清除條件</button>--%>
            <%--</div>--%>
        <%--</div>--%>
    </form>
    <div class="table-bottom">
        <div class="table-bottom-top">
            <div class="table-bottom-left"></div>
            <div class="table-bottom-right">
                <%--<c:if test="${hasApplyPermit&&isopen}">--%>
                <%--<button type="button" onclick="window.open('/ServiceAction/com.velcro.workflow.workflow.servlet.WfViewAction?pipeid=2c923dae67313bc70167392d49b36579&targeturl=')">申報專案</button>--%>
                <%--</c:if>--%>
                <%--<c:if test="${permit}">--%>
                <%--<button href="javascript:void(0);" type="button" onclick="javascript:getExpertBrowser('creatorId','creatorspan','2c923dae6753cabe01675485406d030c','','','0');">分配專家</button>--%>
                <%--<button href="javascript:void(0);" onclick="deleteProject()" type="button" class="delete">刪除專案</button>--%>
                <%--<button href="javascript:void(0);" onclick="submitOpinion()" type="button">批量提交意見</button>--%>
                <%--</c:if>--%>
                <%--<button href="javascript:void(0);" onclick="exportExcel()" type="button" class="export">匯出列表</button>--%>
                <%--<button href="javascript:void(0);" onclick="exportLXZip()" type="button" class="exportZip">匯出壓縮包</button>--%>
                <button lay-submit lay-filter="formData" onclick="javascript:search();">搜尋</button>
                <button href="javascript:void(0);" type="button" class="clear">清除條件</button>
            </div>

        </div>
        <div class="table-bottom-table">
            <div id="projectLX" class="projectnewlist">
                <table id="equipmentTable" lay-filter="test"></table>
            </div>
        </div>
    </div>
</div>
<script src="/kms/js/jquery-1.12.4.min.js"></script>
<script src="/kms/layui/layui/layui.js"></script>
<script src="/kms/js/My97DatePicker/WdatePicker.js"></script>
<script type="text/javascript" src="/vjs/browser.js"></script>
<script src="/kms/technologyProject/static/list.js"></script>
<script src="/kms/technologyProject/static/equipment-handle.js"></script>
<script src="/kms/technologyProject/static/device-handle.js"></script>
</body>
</html>

3.equipment-handle.js

$(function() {
  layui.use(['table', 'element', 'form', 'layer'], function(){
    var form = layui.form
    ,layer = layui.layer
    ,table = layui.table
    ,laydate = layui.laydate;

    table.render({
        elem: '#equipmentTable'
        ,height: 692
        ,url: '/kms/instrumentUnitAction/data.do' //資料介面
        ,page: true //開啟分頁
        ,limits: [5, 10, 15]
        ,limit: 15 //每頁預設顯示的數量
        ,request: {
            pageName: 'currentPage' //頁碼的引數名稱，預設：page
            ,limitName: 'pageSize' //每頁資料量的引數名，預設：limit
        }
        , where: {
            objname: $("#objname").val(),
            specification: $("#specification").val(),
            extent: $("#extent").val(),
            precision: $("#precision").val(),
            manufacturer: $("#manufacturer").val(),
            period: $("#period").val()
        }
        ,parseData: function(res){ //res 即為原始返回的資料
            return {
                "code": res.code, //解析介面狀態
                "msg": res.msg, //解析提示文字
                "count": res.count, //解析資料長度
                "data": res.data //解析資料列表
            };
        }
        ,cols: [[ //表頭
            {checkbox: true,fixed: 'left'}
            ,{field: 'objname', title: '儀器名稱', width:250, sort: true, fixed: 'left', event:'setHref'}
            ,{field: 'specification', title: '規格型號',sort: true, width:110}
            ,{field: 'extent', title: '測量範圍', width:100}
            ,{field: 'precision', title: '精度', width:100}
            ,{field: 'manufacturer', title: '生產廠家', width:110, sort: true}
            ,{field: 'objno', title: '裝置編號', width:110, sort: true}
            ,{field: 'period', title: '校驗檢定週期', width:150, sort: true}
            ,{field: 'lestinspectiondate', title: '下次檢定、校準日期', width:200, sort: true}
            ,{field: 'creator', title: '建立人 ', width:100, sort: true}
            ,{field: 'creatordate', title: '建立日期', width:110}
        ]]
    });

    //監聽提交
   /* form.on('submit(formData)', function(data){
      var dataForm = data.field;
      //執行過載
      table.reload('equipmentTable', {
        page: {
          curr: 1 //重新從第 1 頁開始
        }
        ,where: dataForm
      });
      return false;
    });*/
  });
})

4.InstrumentUnitAction控制層

package com.velcro.kms.technologyproject.action;

import com.navi.utils.IPage;
import com.navi.utils.StringUtils;
import com.navi.web.WebUtils;
import com.velcro.base.BaseContext;
import com.velcro.kernel.base.selectitem.model.ISelectitem;
import com.velcro.kms.technologyproject.model.TechnologyApprovalModel;
import com.velcro.kms.technologyproject.model.TestingEquipment;
import com.velcro.kms.technologyproject.service.EquipmentService;
import net.sf.json.JSONObject;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.servlet.ModelAndView;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.List;

/**
 * 裝置臺賬
 */
@Controller
public class InstrumentUnitAction {
    @Autowired
    private EquipmentService equipmentService;

    @RequestMapping("/kms/instrumentUnitAction/view")
    public ModelAndView view(HttpServletRequest request) {
        ModelAndView mav = new ModelAndView("kms/technologyProject/instrument-unit");
        TestingEquipment equipment = com.velcro.km.util.WebUtils.requestToBean(request, TestingEquipment.class);
        mav.addObject("equipment",equipment);
        return mav;
    }

    /**
     * 查詢裝置臺賬分頁列表
     * @param request
     * @param response
     * @throws IOException
     */
    @RequestMapping("/kms/instrumentUnitAction/data")
    public void data(HttpServletRequest request, HttpServletResponse response) throws IOException {
        JSONObject jo=new JSONObject();
        PrintWriter writer = response.getWriter();
        int currentPage= com.navi.utils.NumberUtils.objToInt(request.getParameter("currentPage"), 1);
        int pageSize= com.navi.utils.NumberUtils.objToInt(request.getParameter("pageSize"), 20);
        TestingEquipment equipment = com.velcro.km.util.WebUtils.requestToBean(request, TestingEquipment.class);
        IPage page = equipmentService.equipmentPage(equipment, currentPage, pageSize);
        List<TestingEquipment> recordList = page.getRecordList();
        jo.put("code", 0);
        jo.put("msg", "");
        jo.put("count", page.getRecordCount());
        jo.put("data", recordList);
        writer.print(jo.toString());

    }
}

tab標籤頁切換iframe

簡介：li中的for是渲染給介面input中value值，form表單提交，在給layui中的渲染資料連線和where中的條件在後端查詢資料

JavaScript實現Tab標籤頁切換的最簡便方式(4種)

先說一下最土的一種方法： Html: <div class=\"tab-head\"> <h2 id=\"tab1\" onmouseover=\"changeTab1()\" class=\"selected\">1</h2>

bootstrap-closable-tab可實現關閉的tab標籤頁外掛

本文例項為大家分享了bootstrap-closable-tab可實現關閉的tab標籤頁的具體程式碼，供大家參考，具體內容如下

小程式實現tab標籤頁

本文例項為大家分享了小程式實現tab標籤頁的具體程式碼，供大家參考，具體內容如下

vue element-ui tab標籤頁預設樣式的修改

技術標籤：經驗 vue element-ui tab標籤頁預設樣式的修改預設藍色改為桔紅色新加一個style 不要使用scoped。注意要在標籤外的父標籤起class名，例如我的class名：.homeMain。

layui 標籤頁切換

UI自動化測試：異常標籤頁切換

一、前言在進行web自動化測試或者App端webview自動化測試時，都會遇到切換標籤頁的場景，通常情況下使用WebDriverWait裡面的一個方法，去等待一個新的標籤頁開啟，然後切換至新的標籤頁。當有時出現異常，同時開啟

JavaScript實現標籤頁切換效果

本文例項為大家分享了實現標籤頁切換效果的具體程式碼，供大家參考，具體內容如下

vue學習小記：使用tab標籤頁時，重新整理頁面停留在當前tab

現狀：無論當前停留在哪個標籤，重新整理頁面都會回到預設設定的標籤原始程式碼如下

ant design vue 多個Tabs 標籤頁下使用 table元件滾動載入的坑【第一個tab頁可以滾動載入而切換第2 個tab不能觸發】

在ant design vue 的使用中總會遇到一些坑，如標題所言，這裡提供一個解決方法參考用

淺析Bootstrap中Tab（標籤頁）的使用方法

Bootstrap 導航元素使用相同的標記和基類，改變修飾的class，可以在不同的樣式間進行切換如\".nav-pills\"（膠囊式導航）與 “.nav-tabs” （標籤式導航）

jQuery自定義外掛之tab標籤切換

更多jQuery常用外掛使用請訪問：jQuery常用外掛彙總 tab標籤切換是網頁中最常見不過的外掛了，所以寫一個自用的tab標籤切換外掛，偷懶一下。

Vue實現Tab標籤路由效果並用Animate.css做轉場動畫效果的程式碼第1/3頁

類似於瀏覽器視窗一樣的路由切換邏輯，看著還是挺高大上的，本以為有很多高階的玩意兒，奈何複雜的東西總是由簡單的東西拼接而成的，這個功能也不例外。

解決vue-router 切換tab標籤關閉時快取問題

在router入口頁面加上 keepAlive: true // 需要被快取 false則不需要 { path: \'fundProListG\',component: resolve => require([\'@/pages/product/fundPros/fundTab/fundTab.vue\'],resolve),title: \'基金首