bootstrap动态加载表头

本文介绍了一个基于Bootstrap Table的JavaScript脚本,该脚本用于初始化加载数据,并根据选择的日期范围动态创建表格。通过定义表格列、设置查询参数及响应数据加载,实现了航班配对列表的数据展示和查询功能。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

// initData 初始化加载数据
var columns = [];
var depCode = "";
var dateType = "";
var beginDateStr = "";
var endDateStr = "";
var diffDays = "";

$(function() {a
    //加载下拉数据源
    alselect.init();
    
    //默认提前一个月
    var d = new Date();
    var dyear = d.getFullYear();
    var dmonth = d.getMonth() + 1 < 10 ? "0" + (d.getMonth() + 1) : d.getMonth() + 1;
    var currentDate = dyear + "-" + dmonth;
    $("#date1").val(currentDate);

    //加载表头和参数
    initTable();
    
    var pairingListInfo = {
        params : {
            url : ctx+'/flt/crewPairingList/selectFlightCrewPairingListByCondition.do',
            height: $(window).height()-60,
            pagination : false,
            sidePagination : "server",
            showHeader: false,
            striped : false,
            escape: false,
            queryParams : function(params) {
                return {
                    depCode : depCode,
                    dateType : dateType,
                    beginDate : beginDateStr,
                    endDate : endDateStr,
                    flag:'1'
                }
            },
            locale : "zh-CN",
            fixedColumns : false,
            columns : columns,
            onLoadSuccess:function(data){
                loadData(data.resultMap);
            }
        },
        initData : function() {
            $('#listInfo').bootstrapTable(this.params);
        },
    }
    
    $("#Search").click(function() {
        // 查询条件不能为空
        var date1 = $("#date1").val();
        if (date1 == null || date1 == "" || date1 == undefined) {
            $alert("提醒", "请选择日期");
        }
        else {
            //清空
            columns = [];
            
            //加载表头和参数
            initTable();
            
            //重绘表格
            $('#listInfo').bootstrapTable('destroy').bootstrapTable({
                url : ctx+'/flt/crewPairingList/selectFlightCrewPairingListByCondition.do',
                pagination : false,
                sidePagination : "server",
                showHeader: false,
                striped : false,
                escape: false,
                queryParams : function(params) {
                    return {
                        depCode : depCode,
                        dateType : dateType,
                        beginDate : beginDateStr,
                        endDate : endDateStr,
                        flag:'1'
                    }
                },
                locale : "zh-CN",
                fixedColumns : false,
                columns : columns,
                onLoadSuccess:function(data){
                    loadData(data.resultMap);
                }
            });
        }
    });
    
    //默认加载数据
    pairingListInfo.initData();
});

function initTable(){    
    //组装后面的月份表头
    dateType = $("#dateType").val();
    depCode = $("#depCode").attr("data-value");
    
    var date1Str = $("#date1").val();
    var date1 = new Date(date1Str);
    //当前月份的第一天
    var date1FirstDay = date1Str + "-01";
    //当前月份的最后一天
    var date1Year = date1.getFullYear();
    var date1Month = date1.getMonth() + 1;
    var date1LastDay = getLastDayOfMonth(date1Year, date1Month);
    //开始日期为当前日期第一天往前推10天    
    var beginDate = addDate(date1FirstDay, -10);
    beginDateStr = convertDateToString(beginDate);
    //结束日期为当前日期最后一天往后推5天    
    var endDate = addDate(date1LastDay, 5);
    endDateStr = convertDateToString(endDate);
    var startDate = beginDate;

    diffDays = getDaysBetween(beginDateStr, endDateStr);
        
    columns.push({
        field: 'pindex',
        title : '序号',
        align : "center",
        formatter : function(value, row, index) {
            if(value != undefined && value == "EMPTY"){
                return "查询无数据";
            }
            else{
                return value;
            }
        },
        cellStyle : function(value, row, index) {
            if(value != undefined && value == "序号"){
                return {"css":{"background-color":"#999999", "color":"#000000", "font-size":"12px"}};
            }
            else{
                return {"css":{"font-size":"12px"}};
            }
        }
    });
    
    do{
        var startYear = startDate.getFullYear();
        var startMonth = startDate.getMonth() + 1;
        var startMonthStr = startMonth < 10 ? "0" + startMonth : startMonth;
        var startDay = startDate.getDate();
        var startDayStr = startDay < 10 ? "0" + startDay : startDay;
                        
        columns.push({
            field : startYear + "-" + startMonthStr + "-" + startDayStr,
            title : startDayStr + "<br>日",
            valign : "middle",
            align : 'center',
            formatter : function(value, row, index) {
                if(row.isHeader == "Y"){
                    return value;
                }
                else if(value != undefined){
                    if(value == "R" || value == "+"){
                        return value;
                    }
                    else {
                        return "<div title='" + value.flightCom + "(" + value.flightCode + ")" + "\r\n" + value.flightFlag + "(" + value.flightVoyage + " " + value.flightType + ")" + "'>" + value.flightCom + "</div>";
                    }
                }
            },
            cellStyle : function(value, row, index) {
                if(row.isHeader == "Y"){
                    if(value != undefined && (value.indexOf("六") > -1 || value.indexOf("日") > -1)){
                        return {"css":{"background-color":"#99CCFF", "color":"#000000", "font-size":"12px"}};
                    }
                    else{
                        return {"css":{"background-color":"#999999", "color":"#000000", "font-size":"12px"}};
                    }
                }
                else if(value != undefined){
                    return {"css":{"background-color":"#99CCFF", "color":"#000000", "font-size":"12px"}};
                }
                else{
                    return {"css":{"font-size":"12px"}};
                }
            }
        });
        
        startDate.setDate(startDate.getDate()+1);
    } while(endDate >= startDate);
}

function loadData(listData){
    $('#listInfo').bootstrapTable('append',listData);
    
    if(listData.length == 2){ //动态合并单元格
        if(listData[1].pindex == "EMPTY"){
            $('#listInfo').bootstrapTable('mergeCells',{index:1, field:'pindex', colspan: diffDays + 1});
        }
    }
}

//日期加减
function addDate(date, dadd){
    var tempDate = new Date(date)
    tempDate = tempDate.valueOf();
    tempDate = tempDate + dadd * 24 * 60 * 60 * 1000;
    tempDate = new Date(tempDate)
    return tempDate;
}

function getDaysBetween(dateOne, dateTwo)  {  
    var OneMonth = dateOne.substring(5,dateOne.lastIndexOf ('-')); 
    var OneDay = dateOne.substring(dateOne.length,dateOne.lastIndexOf ('-')+1); 
    var OneYear = dateOne.substring(0,dateOne.indexOf ('-')); 
 
    var TwoMonth = dateTwo.substring(5,dateTwo.lastIndexOf ('-')); 
    var TwoDay = dateTwo.substring(dateTwo.length,dateTwo.lastIndexOf ('-')+1); 
    var TwoYear = dateTwo.substring(0,dateTwo.indexOf ('-')); 
 
    var cha=((Date.parse(OneMonth+'/'+OneDay+'/'+OneYear)- Date.parse(TwoMonth+'/'+TwoDay+'/'+TwoYear))/86400000);  
    return Math.abs(cha) + 1; 

//获取当月最后一天日期    
function getLastDayOfMonth(year, month) {           
    var new_year = year;    //取当前的年份            
    var new_month = month++;//取下一个月的第一天,方便计算(最后一天不固定)            
    if(month>12) {           
        new_month -=12;        //月份减            
        new_year++;            //年份增            
    }           
    var new_date = new Date(new_year,new_month,1);                //取当年当月中的第一天            
    var dateLastDay = new Date(new_date.getTime()-1000*60*60*24);//获取当月最后一天日期       
    return convertDateToString(dateLastDay);
}

function convertDateFromString(dateString) {
    var date = new Date(dateString.replace(/-/,"/"));    
    return date;
}

function convertDateToString(d) {
    var year = d.getFullYear();
    var month = d.getMonth() + 1 < 10 ? "0" + (d.getMonth() + 1) : d.getMonth() + 1;
    var day = d.getDate() < 10 ? "0" + d.getDate() : d.getDate();
    return year + "-" + month + "-" + day;
};

动态加载表头,你可以使用Bootstrap的JavaScript插件DataTable。首先,你需要在页面中引入DataTable的CSS和JavaScript文件。然后,在HTML中创建一个空的table元素,并使用JavaScript代码来动态生成表头和表格内容。 以下是一个简单的示例代码: ```html <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="https://cdn.datatables.net/1.10.21/css/jquery.dataTables.min.css"> </head> <body> <table id="myTable" class="display"> <thead> <tr> <th>Column 1</th> <th>Column 2</th> <th>Column 3</th> </tr> </thead> <tbody> </tbody> </table> <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> <script src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script> <script> $(document).ready(function() { var table = $('#myTable').DataTable({ "ajax": "data.json", "destroy": true }); // 动态加载表头 var columns = []; $.getJSON("columns.json", function(data) { $.each(data, function(key, val) { columns.push({"data": key, "title": val}); }); table.destroy(); table = $('#myTable').DataTable({ "ajax": "data.json", "columns": columns }); }); }); </script> </body> </html> ``` 在上面的示例中,我们使用jQuery和DataTable插件来创建一个表格,表头是静态生成的。我们使用"data.json"文件来加载表格数据,并使用"columns"选项来定义表头。在这个示例中,我们定义了三列,分别是"Column 1"、"Column 2"和"Column 3"。 我们还使用了另一个JSON文件"columns.json"来动态加载表头。在这个文件中,我们定义了每一列的名称。通过使用jQuery的getJSON方法,我们可以异步加载这个文件,并根据返回的数据动态生成表头。注意,我们需要在表格重新初始化之前先销毁表格实例。 希望这个示例能对你有所帮助!
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值