HTML筆記——bootstrap-select、table、tableExport、layer

阿新 • • 發佈：2018-11-14

！！使用軟體：vs2010！！

！！要在伺服器上執行，不然載入不了json資料！！

全部程式碼檔案：

連結：https://pan.baidu.com/s/1EFY9NFSNhX7OYAsg3yxK1Q
提取碼：yxtg

實現功能

1、根據下拉框的值填充表格資料

下拉框(bootstrap-select)選值
- 獲取下拉框的值
  - 銷燬之前載入的表格
  - 給表格加大標題
  - 呼叫方法
    - 初始化表格、定義表格資料地址、請求方式、列名，帶引數呼叫方法填充表格（bootstrap-table）
      - 設定table基本資訊
      - 匯出資料showExport: true
      - 資料載入完畢回撥函式（onLoadSuccess），新增表格小標題

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" 
>

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <link href="css/StyleSheet.css" type 
="text/css" rel="Stylesheet" />
    <!--bootstrap-->
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">  
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <!-- bootstrap-select/table -->
    <link rel="stylesheet" href="css/bootstrap-select.min.css " type="text/css" rel="Stylesheet" >
    <link href="css/bootstrap-table.min.css" type="text/css" rel="Stylesheet" />
    <script src="js/bootstrap-table.min.js"></script>
    <script src="js/bootstrap-select.min.js"></script>
    <script src="js/bootstrap-table-zh-CN.js" type="text/javascript"></script>
    <!--<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.3/js/i18n/defaults-*.min.js"></script>-->
    <!--匯出資料外掛-->
    <script src="js/daochu/xlsx.core.min.js"></script>
    <script src="js/daochu/FileSaver.min.js"></script>
    <script src="js/daochu/tableExport.js"></script>
    <script src="js/daochu/bootstrap-table-export.min.js"></script>
    <script src="js/jquery.base64.js"></script>
    <!--layer彈窗-->
    <link href="css/default/layer.css" type="text/css" rel="Stylesheet" />
    <script src="js/layer.js"></script>
</head>
<body class="boot">
<div class="container">
    <!--下拉框-->
    <div class="select">
        <select class="selectpicker" data-live-search="true" onchange="select()" id="sid">
            <option value="1">1號公寓</option>
            <option value="2">2號公寓</option>
            <option value="3">3號公寓</option>
        </select>
    </div>
    <!--表格-->
    <div class="table-responsive">
        <div><h2 id="head_title"></h2></div>
        <table class="table table-striped" id="table1">
            <caption><h3 id="ceng1"></h3></caption>
            <!--在此處填充表格資料-->
        </table>
        <table class="table table-striped" id="table2">
            <caption><h3 id="ceng2"></h3></caption>
            <!--在此處填充表格資料-->
        </table>
    </div>
</div>

<script>

    var a=function () {
    //1.初始化Table
    var oTable = new TableInit();
    //表格資料地址
    var url = 'data/data1.json'
    //請求方式
    var method = 'get'
    //列名
    var column = [{
    field: 'A101',
    title: 'A101',
    align: 'center'
    }, {
    field: 'A102',
    title: 'A102',
    align: 'center'
    }, {
    field: 'A103',
    title: 'A103',
    align: 'center'
    }, {
    field: 'A104',
    title: 'A104',
    align: 'center'
    }, {
    field: 'A105',
    title: 'A105',
    align: 'center'
    }, {
    field: 'A106',
    title: 'A106',
    align: 'center'
    }, {
    field: 'A107',
    title: 'A107',
    align: 'center'
    }, {
    field: 'A108',
    title: 'A108',
    align: 'center'
    }, {
    field: 'A109',
    title: 'A109',
    align: 'center'
    }, {
    field: 'A110',
    title: 'A110',
    align: 'center'
    }, {
    field: 'A111',
    title: 'A111',
    align: 'center'
    }, {
    field: 'A112',
    title: 'A112',
    align: 'center'
    }, {
    field: 'A113',
    title: 'A113',
    align: 'center'
    }, {
    field: 'A114',
    title: 'A114',
    align: 'center'
    }, {
    field: 'A115',
    title: 'A115',
    align: 'center'
    }, {
    field: 'A116',
    title: 'A116',
    align: 'center'
    }, {
    field: 'A117',
    title: 'A117',
    align: 'center'
    }, {
    field: 'A118',
    title: 'A118',
    align: 'center'
    }, {
    field: 'A119',
    title: 'A119',
    align: 'center'
    }, {
    field: 'A120',
    title: 'A120',
    align: 'center'
    }, {
    field: 'A121',
    title: 'A121',
    align: 'center'
    }]
    var column2 = [{
    field: 'A201',
    title: 'A201',
    align: 'center'
    }, {
    field: 'A202',
    title: 'A202',
    align: 'center'
    }, {
    field: 'A203',
    title: 'A203',
    align: 'center'
    }, {
    field: 'A204',
    title: 'A204',
    align: 'center'
    }, {
    field: 'A205',
    title: 'A205',
    align: 'center'
    }, {
    field: 'A206',
    title: 'A206',
    align: 'center'
    }, {
    field: 'A207',
    title: 'A207',
    align: 'center'
    }, {
    field: 'A208',
    title: 'A208',
    align: 'center'
    }, {
    field: 'A209',
    title: 'A209',
    align: 'center'
    }, {
    field: 'A210',
    title: 'A210',
    align: 'center'
    }, {
    field: 'A211',
    title: 'A211',
    align: 'center'
    }, {
    field: 'A212',
    title: 'A212',
    align: 'center'
    }, {
    field: 'A213',
    title: 'A212',
    align: 'center'
    }, {
    field: 'A214',
    title: 'A214',
    align: 'center'
    }, {
    field: 'A215',
    title: 'A215',
    align: 'center'
    }, {
    field: 'A216',
    title: 'A216',
    align: 'center'
    }, {
    field: 'A217',
    title: 'A217',
    align: 'center'
    }, {
    field: 'A218',
    title: 'A218',
    align: 'center'
    }, {
    field: 'A219',
    title: 'A219',
    align: 'center'
    }, {
    field: 'A220',
    title: 'A220',
    align: 'center'
    }, {
    field: 'A221',
    title: 'A221',
    align: 'center'
    }]
    //呼叫方法,初始化表格
    oTable.Init(url, method, column, column2, 20);
};


var b = function () {
    //1.初始化Table
    var oTable = new TableInit();
    //表格資料地址
    var url = 'data/data2.json'
    //請求方式
    var method = 'get'
    var column = [{
        field: '101',
        title: '101',
        align: 'center'
    }, {
        field: '102',
        title: '102',
        align: 'center'
    }, {
        field: '103',
        title: '103',
        align: 'center'
    }, {
        field: '104',
        title: '104',
        align: 'center'
    }, {
        field: '105',
        title: '105',
        align: 'center'
    }, {
        field: '106',
        title: '106',
        align: 'center'
    }, {
        field: '107',
        title: '107',
        align: 'center'
    }, {
        field: '108',
        title: '108',
        align: 'center'
    }, {
        field: '109',
        title: '109',
        align: 'center'
    }, {
        field: '110',
        title: '110',
        align: 'center'
    }, {
        field: '111',
        title: '111',
        align: 'center'
    }, {
        field: '112',
        title: '112',
        align: 'center'
    }, {
        field: '113',
        title: '113',
        align: 'center'
    }, {
        field: '114',
        title: '114',
        align: 'center'
    }, {
        field: '115',
        title: '115',
        align: 'center'
    }, {
        field: '116',
        title: '116',
        align: 'center'
    }, {
        field: '117',
        title: '117',
        align: 'center'
    }]
    var column2 = [{
        field: '201',
        title: '201',
        align: 'center'
    }, {
        field: '202',
        title: '202',
        align: 'center'
    }, {
        field: '203',
        title: '203',
        align: 'center'
    }, {
        field: '204',
        title: '204',
        align: 'center'
    }, {
        field: '205',
        title: '205',
        align: 'center'
    }, {
        field: '206',
        title: '206',
        align: 'center'
    }, {
        field: '207',
        title: '207',
        align: 'center'
    }, {
        field: '208',
        title: '208',
        align: 'center'
    }, {
        field: '209',
        title: '209',
        align: 'center'
    }, {
        field: '210',
        title: '210',
        align: 'center'
    }, {
        field: '211',
        title: '211',
        align: 'center'
    }, {
        field: '212',
        title: '212',
        align: 'center'
    }, {
        field: '213',
        title: '212',
        align: 'center'
    }, {
        field: '214',
        title: '214',
        align: 'center'
    }, {
        field: '215',
        title: '215',
        align: 'center'
    }, {
        field: '216',
        title: '216',
        align: 'center'
    }, {
        field: '217',
        title: '217',
        align: 'center'
    }]
    //呼叫方法,初始化表格
    oTable.Init(url, method, column, column2, 20);
};
    //載入資料表格
var TableInit = function () {
    var oTableInit = new Object();
    //初始化Table
    oTableInit.Init = function (url, method, column, column2, pageSize) {
        $('#table1').bootstrapTable({
            url: url,         //請求後臺的URL，向後臺傳遞板塊id引數
            method: method,                      //請求方式（*）
            toolbar: '#toolbar',                //工具按鈕用哪個容器
            striped: true,                      //是否顯示行間隔色
            cache: false,                       //是否使用快取，預設為true，所以一般情況下需要設定一下這個屬性（*）
            pagination: true,                   //是否顯示分頁（*）
            sortable: false,                     //是否啟用排序
            sortOrder: "asc",                   //排序方式
            queryParams: oTableInit.queryParams, //傳遞引數（*）
            sidePagination: "server",           //分頁方式：client客戶端分頁，server服務端分頁（*）
            pageNumber: 1,                       //初始化載入第一頁，預設第一頁
            pageSize: pageSize,                       //每頁的記錄行數（*）
            pageList: [5, 10, 25],       //可供選擇的每頁的行數（*）
            search: false,                       //是否顯示錶格搜尋，此搜尋是客戶端搜尋，不會進服務端，所以，個人感覺意義不大
            strictSearch: true,
            undefinedText: '',                   //空資料顯示‘’
            showColumns: false,                  //是否顯示所有的列
            showRefresh: false,                  //是否顯示重新整理按鈕
            minimumCountColumns: 2,             //最少允許的列數
            clickToSelect: true,                //是否啟用點選選中行
            //uniqueId: uniqueId,                     //每一行的唯一標識，一般為主鍵列
            showToggle: false,                    //是否顯示詳細檢視和列表檢視的切換按鈕
            detailView: false,                   //是否顯示父子表
            columns: column,
            showExport: true,                  //匯出資料
            exportDataType: "all",           //匯出所有資料
            exportTypes: ['xlsx', 'excel'],            //匯出資料型別
            //雙擊單元格事件
            onDblClickCell: function (field, value, row, $element) {
                var html = "<div class='layer_content'>" +
                                "<h3>" + field + "</h3>" +
                                "<div class='layer_content_detail'><p>姓名：<span>" + value + "</span></p>" +
                                "<p>性別：<span>" + "女" + "</span></p>" +
                                "<p>學院：<span>" + "資訊科技與工程學院" + "</span></p>" +
                                "<p>專業：<span>" + "軟體工程" + "</span></p>" +
                                "<p>學號：<span>" + "201805060004" + "</span></p>" +
                                "</div></div>"

                //layer彈窗
                layer.open({
                    type: 1,
                    title: value + '-學生資訊',
                    closeBtn: 1,
                    shadeClose: true,
                    shade: false,
                    maxmin: true, //開啟最大化最小化按鈕
                    area: ['300px', '260px'],
                    content: html
                });
            },
            onLoadSuccess: function () {
                document.getElementById("ceng1").innerHTML = "一層";
            }
        });
        $('#table2').bootstrapTable({
            url: url,         //請求後臺的URL，向後臺傳遞板塊id引數
            method: method,                      //請求方式（*）
            toolbar: '#toolbar',                //工具按鈕用哪個容器
            striped: true,                      //是否顯示行間隔色
            cache: false,                       //是否使用快取，預設為true，所以一般情況下需要設定一下這個屬性（*）
            pagination: true,                   //是否顯示分頁（*）
            sortable: false,                     //是否啟用排序
            sortOrder: "asc",                   //排序方式
            queryParams: oTableInit.queryParams, //傳遞引數（*）
            sidePagination: "server",           //分頁方式：client客戶端分頁，server服務端分頁（*）
            pageNumber: 1,                       //初始化載入第一頁，預設第一頁
            pageSize: pageSize,                       //每頁的記錄行數（*）
            pageList: [5, 10, 25],       //可供選擇的每頁的行數（*）
            search: false,                       //是否顯示錶格搜尋，此搜尋是客戶端搜尋，不會進服務端，所以，個人感覺意義不大
            strictSearch: true,
            undefinedText: '',                   //空資料顯示‘’
            showColumns: false,                  //是否顯示所有的列
            showRefresh: false,                  //是否顯示重新整理按鈕
            minimumCountColumns: 2,             //最少允許的列數
            clickToSelect: true,                //是否啟用點選選中行
            //uniqueId: uniqueId,                     //每一行的唯一標識，一般為主鍵列
            showToggle: false,                    //是否顯示詳細檢視和列表檢視的切換按鈕
            detailView: false,                   //是否顯示父子表
            columns: column2,
            showExport: true,                  //匯出資料
            exportDataType: "all",           //匯出所有資料
            exportTypes: ['xlsx', 'excel'],            //匯出資料型別
            Icons: 'glyphicon-export',
            onDblClickCell: function (field, value, row, $element) {
                var html = "<div class='layer_content'>" +
                                "<h3>" + field + "</h3>" +
                                "<div class='layer_content_detail'><p>姓名：<span>" + value + "</span></p>" +
                                "<p>性別：<span>" + "女" + "</span></p>" +
                                "<p>學院：<span>" + "資訊科技與工程學院" + "</span></p>" +
                                "<p>專業：<span>" + "軟體工程" + "</span></p>" +
                                "<p>學號：<span>" + "201805060004" + "</span></p>" +
                                "</div></div>"

                layer.open({
                    type: 1,
                    title: value + '-學生資訊',
                    shadeClose: true,
                    shade: false,
                    maxmin: true, //開啟最大化最小化按鈕
                    area: ['300px', '260px'],
                    content: html
                });
            },
            onLoadSuccess: function () {
                document.getElementById("ceng2").innerHTML = "二層";
            }
        });
    };

    //得到查詢的引數
    oTableInit.queryParams = function (params) {
        var temp = {   //這裡的鍵的名字和控制器的變數名必須一直，這邊改動，控制器也需要改成一樣的
            limit: params.limit,   //頁面大小
            offset: params.offset / params.limit + 1  //頁碼
        };
        return temp;
    };
    return oTableInit;
};
    
</script>

<script>
   //下拉框
    function select() {
        var obj = document.getElementById('sid');
        var index = obj.selectedIndex; //序號，取當前選中選項的序號
        var val = obj.options[index].value;
        if (val == "1") {
            $("#table1,#table2").bootstrapTable('destroy'); //銷燬之前的table
            document.getElementById("head_title").innerHTML = "1號公寓";
            a();//呼叫函式
       }
        if (val == "2") {
            $("#table1,#table2").bootstrapTable('destroy'); 
           document.getElementById("head_title").innerHTML = "2號公寓";
           b();
       }
       if (val == "3") {
           $("#table1,#table2").bootstrapTable('destroy'); 
            document.getElementById("head_title").innerHTML = "3號公寓";
            c()
        }
    }
   
</script>
</body>
</html>

程式碼

body {
}
.datagrid-body
{
    overflow-x:scroll !important;}
/************bootstrap***************************/
.bootstrap-select:not([class*=col-]):not([class*=form-control]):not(.input-group-btn)
{
    height:30px;}

.bootstrap-select .dropdown-toggle
{
    height:100%;}


/***標題居中***/
#head_title
{
    text-align:center;
    margin-bottom:0;}
caption h3
{
    text-align:center;
    margin:0;}
.fixed-table-toolbar .columns
{
    margin-top:0 !important;
    margin-bottom:1px !important; }
/***去掉分頁***/
.fixed-table-pagination
{
    display:none !important;}
/***表格container***/
.fixed-table-container
{
    height:auto !important;
    padding-bottom:0px !important;
    margin-bottom: 25px;}
thead
{
    background-color:#ccc;}
/**td標籤不自動換行**/
.table>tbody>tr>td
{
    white-space: nowrap;}
/***彈出框**/
.layer_content
{
    width:90%;
    margin:auto;}
.layer_content h3
{
    text-align:center;
    margin:10px;}

.layer_content_detail
{
    width:74%;
    margin:auto;}

.layer_content_detail span
{
    color:#555;}

css

實現效果

下拉框選2

下拉框選1

雙擊事件

匯出Excel檔案

HTML筆記——bootstrap-select、table、tableExport、layer

！！使用軟體：vs2010！！！！要在伺服器上執行，不然載入不了json資料！！全部程式碼檔案：連結：https://pan.baidu.com/s/1EFY9NFSNhX7OYAsg3yxK1Q 提取碼：yxtg 實現功能 1、根據下拉框的值填充表格資料下拉框(b

HTML筆記（四） - 圖像、表格、列表、區塊

sem inline 註意樣式而不是 style height nbsp 另一個一、圖像 1、圖像標簽（<img>）和源屬性（<Src>）在HTML中，圖像由<img>標簽定義，<img>是空標簽，它只包含屬性，並且沒

HTML自學筆記_新增div標籤（容器、區塊）

<div> 標籤的加入，將所有內容元素歸併到一個區塊中，使頁面結構性更強為了後續進一步控制這個區塊的顯示，可以賦予這個 div 一個名字，以直接對應這個區塊 <div id=“container”> <!DOCTYPE html>

html標籤的表格的tbody、tfoot、thead、colgroup、th、tr、td、table

關於table裡標籤的結構描述，直接上圖：關於table標籤的寫法示例： <table width="60%" border="4"> <caption>這個是表格的標題</caption> <colgroup span=

Bootstrap table列表查詢、模糊查詢和refresh使用

var url; //模糊查詢 function searchUser(){ var keyword = $("#keyword").val(); var queryparam = { silent:true, query:{ keyword:keyw

iview的tabe中加入input、select、時間外掛和table的編輯、刪除操作

如圖，實現的目標table能有編輯的input、能選擇的下拉框、還有日期選擇器、最後的操作裡面可以點選編輯和刪除當前的行操作。自己解說的，怕有些地方講的不好，放上demo的連結地址對應的github的demo連結地址：https://github.com

《MySQL必知必會》學習筆記（一）、MySQL指令碼下載、執行及USE、SELECT的使用

本文主要介紹《MySQL必知必會》書中，所述的MySQL指令碼下載以及執行，並簡單介紹USE、SELECT關鍵字的基本使用。 1、MySQL指令碼下載及執行開啟MySQL command Line client（本文利用的是MySQL 8.0.

bootstrap table 表頭固定、凍結列、橫向縱向滾動條

前提：引入對應的js,css<link rel="stylesheet" type="text/css" href="/kaoqin/js/bootstrap/css/bootstrap.min.css"> <link rel="stylesheet" ty

bootstrap-select外掛的使用、注意事項、功能實現等

官方文件：http://silviomoreto.github.io/bootstrap-select/examples/注意事項1：該外掛的單選框不能設定title，也就是滑鼠停在option上面，title失效 https://blog.csdn.net/ya_12494

【Bootstrap學習筆記】1.Bootstrap介紹、排版樣式、表格和按鈕、表單和圖片

四、表單和圖片學習內容： .form-control 表單群組內聯表單表單合組水平排列複選框和單選框下拉列表校驗狀態新增額外圖示控制大小圖片 .form-control .form-control <!--可定

Bootstrap Table 雙擊、單擊行獲取該行內容及獲取全表的內容

Bootstrap Table 獲取單擊或雙擊的行內容說明：看到這個應該就知道了bootstrap table的用法及如何使用了，所以下面的名稱就不介紹了 realTime_Table是表的id $("#realTime_Table").bootstr

html筆記標簽屬性、圖像和鏈接、超鏈接

一條直線 -a www. 相對分類 tle wid tor html筆記 HTML 標簽屬性： <b></b>:加粗 <i></i>:斜體 <u></u>:下劃線 <s></s&g

Bootstrap-table實現查詢、分頁、匯出、引數設定及前後端程式碼示例詳解

$(function(){ initTable(); }); function initTable() { //先銷燬表格 $("#bootstrapTable").bootstrapTable({ //表格高度 height: getHeight

針對iPhone的pt、Android的dp、HTML的css像素與dpr、設計尺寸和物理像素的淺分析

display 基本 stand 理解 android開發 height 請問技術 -a 　　最近被一朋友問到：css中設置一DOM的height：65px，請問顯示的高度是否和Android的65dp的元素等高？腦子裏瞬間閃現了一堆的概念，如dpr，ppi，dp，pt等

Bootstrap基礎7（標簽、徽章、大屏展播、頁面標題、縮略圖、進度條、面板、折疊效果）

footer ctype success htm header bit src int get <!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-

bootstrap-導航條中的按鈕、文本和鏈接

bootstrap-導航條中的按鈕、文本和鏈接1.運行效果如圖所示2.實現代碼如下<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Com

學習筆記TF015:加載圖像、圖像格式、圖像操作、顏色

修改感知存在邊界 apt 預處理所有 images 其中 TensorFlow支持JPG、PNG圖像格式，RGB、RGBA顏色空間。圖像用與圖像尺寸相同(height*width*chnanel)張量表示。通道表示為包含每個通道顏色數量標量秩1張量。圖像所有像素存在

angularJS1筆記-(16)-模塊裏的constant、value、run

csharp htm ctype true ide -c utf images fig index.html: <!DOCTYPE html> <html lang="en"> <head> <meta charset="

學習筆記TF016:CNN實現、數據集、TFRecord、加載圖像、模型、訓練、調試

quest oba lose 神經元 byte 足夠 jpg eight 值轉換 AlexNet(Alex Krizhevsky,ILSVRC2012冠軍)適合做圖像分類。層自左向右、自上向下讀取，關聯層分為一組，高度、寬度減小，深度增加。深度增加減少網絡計算量。訓練模

Head First Servlets and JSP】筆記9：屬性的作用域、線程安全

string details attr target 部分 ring 瀏覽器什麽是作用什麽是屬性？屬性和參數屬性的3個作用域屬性API 屬性不好的一面 1、到底什麽是屬性（Attribute）？屬性就是一個對象，可以被設置（bound，也可以

HTML筆記——bootstrap-select、table、tableExport、layer

相關推薦