bootstraptable+tableExport 簡易導出功能+datetimepicker 日期時間函數

html

<button class="btn btn-info " onclick="tableExportInLBattery()" id="btn_export">導出</button>

<div class="col-sm-2 m-b-xs">
    <div class="date-container">
    <label>日期：</label>
        <i class="fa fa-calendar date-icon"></i>
        <input type="text" id="startData" style="height:32px;" class="form-horizontal date-input"/>
    </div>
</div>

 

<table id="inLibraryBatteryTab" data-mobile-responsive="true"
       class="table table-striped table-bordered table-hover dataTables-example">
</table>

JS代碼

$(function () {
    $("#title").keydown(function (e) {
        if(e.keyCode == 13){
            $("#searchBut").trigger("click");
        }
    });
    //刷新
    $("#refresh").click(function () {
        $('#inLibraryBatteryTab').bootstrapTable('refresh');
    });
    //search
    $("#searchBut").click(function () {
        $('#inLibraryBatteryTab').bootstrapTable('filterBy', queryParams);
    });

    $('#inLibraryBatteryTab').bootstrapTable({
        url: '/cargo/inLibraryBattery/list',
        contentType: 'application/json',
        toolbar: '#toolbar',                //工具按鈕用哪個容器
        striped: true,              //隔行變色效果
        pagination: true,           //顯示分頁信息
        cache: false,
        pageSize: 10,               //每頁顯示數據
        pageNumber: 1,              //頁碼
        sidePagination: 'server',   //設置為服務器端分頁
        queryParamsType: 'limit',
        uniqueId: 'id',
        queryParams: queryParams,
        columns: [
            {field: 'id', align: "center", title: '編號'},
            {field: 'gpsNo', align: "center", title: 'GPS編號'},
            {
                align: "center", title: "電池配置", formatter: function (value, row, index) {
                    var obj = "";
                    obj += '<p>型號：<span>' + row.specV + '</span>V&nbsp;-&nbsp;<span>' + row.specA + '</span>A</p>';
                    return obj;
                }
            },
            {field: 'quotaPrice', align: "center", title: '配額采購價', formatter: function (value,row,index) {
                    var rowV = value/100 + "￥";
                    return rowV;
                }},
            {field: 'status', align: "center", title: '狀態', formatter: function (value) {
                    if (value == 1) {
                        return "新電池";
                    }else if (value == 2) {
                        return "售后電池";
                    }
                }},
            {field: 'productPime', align: "center", title: '生產日期'},
            {field: 'instName', align: "center", title: '所屬機構名稱'},
        ],
    });
    //動態加載電池配置下拉框值
    loadBatteryConfig();
});


//查詢

function queryParams(params) {
    //這里的鍵的名字和控制器的變量名必須一致，這邊改動，控制器也需要改成一樣的
    var str = $("#model").val();
    var result=str.split(",");
    var specV=result[0];//電壓
    var specA=result[1]; //電流
    var obj = {
        startData:$("#startData").val(),
        endData:$("#endData").val(),
        specV:specV,
        specA:specA,
        status:$("#status").val(),
        search: $("#title").val().replace(/\s+/g, ""),
        size: params.limit,              //頁面大小
        page: params.offset / params.limit //頁碼
    }
    return obj;
}

//導出按鈕
function tableExportInLBattery(){
　　//這里的是你table表的ID
    $('#inLibraryBatteryTab').tableExport(
        {
            type: 'excel',//導出excel
            escape: 'false' ,
            ignoreColumn: [0],  //忽略某一列的索引
            fileName: '數據導出',  //文件名稱設置
            worksheetName: 'sheet1',  //表格工作區名稱
            tableName: '在庫電池',
            excelstyles: ['background-color', 'color', 'font-size', 'font-weight']
        }
    )
}

//日期函數
//日期插件  開始
$("#startData").datetimepicker({
    format: 'yyyy-mm-dd',//顯示格式
    language: 'zh-CN',//中文
    todayHighlight: 1,//今天高亮
    minView: "month",//設置只顯示到月份
    todayBtn : true,  //在底部是否顯示今天
    startView:2,
    forceParse: 0,
    showMeridian: 1,
    autoclose: 1//選擇后自動關閉
}).on("changeDate",function(){
    var start = $("#startData").val();
    $("#endData").datetimepicker("setStartDate",start);
});

//日期插件  結束
$("#endData").datetimepicker({
    format: 'yyyy-mm-dd',//顯示格式
    language: 'zh-CN', //中文
    todayHighlight: 1,//今天高亮
    minView: "month",//設置只顯示到月份
    todayBtn : true,  //在底部是否顯示今天
    startView:2,
    forceParse: 0,
    showMeridian: 1,
    autoclose: 1//選擇后自動關閉
}).on("changeDate",function(){
    var end = $("#endData").val();
    $("#startData").datetimepicker("setEndDate",end);
});