jsp应用bootstrap表格应用实例

一、初始化表格

<div style="margin-top: 80px;margin-left:45px;margin-right:30px;overflow-x: scroll">
    <table id="planMakeTable" class="table table-striped table-bordered" style="width:100%">
        <thead>
        <tr>
            <th colspan="15" class="tableHead" style="font-size:28px;color: black" id="tableTitle"></th>
        </tr>
        <tr>
            <th></th>
            <th colspan="2">产量</th>
            <th colspan="2">电</th>
            <th colspan="2">煤气、天然气</th>
            <th colspan="2">压缩空气</th>
            <th rowspan="2">蒸汽（t）</th>
            <th rowspan="2">清水（t）</th>
            <th rowspan="2">软化水（t）</th>
            <th rowspan="2">氧气（m³）</th>
            <th rowspan="2">焦炭（t）</th>
            <th rowspan="2">柴油（t）</th>
        </tr>
        <tr>
            <th height="50">单位</th>
            <th>量</th>
            <th>计量单位</th>
            <th>量（kwh×10^4）</th>
            <th>单耗（kwh）</th>
            <th>量（km³）</th>
            <th>单耗（m³)</th>
            <th>量（km³）</th>
            <th>单耗（m³)</th>
        </tr>
        </thead>
        <tbody>
        </tbody>
    </table>
</div>

二、获取表格数据

setPlanMakeTable(todayYear + '-' + todayMonth);
    function setPlanMakeTable(msg) {
        document.getElementById("tableTitle").innerHTML = msg.replace('-', '年') + "月份生产单位能源消耗计划"
        $.ajax({
            type: "get",
            dataType: "json",
            url: "/energyPlan/getEnergyPlanMakeData",
            data: {
                dateString: msg.replace('-', ''),
                flag: "0"
            },
            success: function (json) {
                $.unblockUI();
                $('#planMakeTable').find('tr:gt(2)').remove();//删除之前的数据
                var s = '';
                for (var i = 0; i < json.length; i++)
                    s += '<tr>' +
                        '<td style="white-space:nowrap;text-overflow: ellipsis">' + json[i].companyName + '</td>' +
                        '<td contenteditable="true" oninput="OnInput_cl ($(this).text(),\'' + json[i].electricID + '\',\'' + json[i].electric_partID + '\',\'' + json[i].coalGasID + '\',\'' + json[i].coalGas_PartID + '\',\'' + json[i].airID + '\',\'' + json[i].air_partID + '\')" ' +
                        'style="white-space:nowrap;text-overflow: ellipsis" id="' + json[i].outPutID + '">' + json[i].outPut + '</td>' +
                        '<td style="white-space: nowrap;text-overflow: ellipsis">' + json[i].unitName + '</td>' +
                        '<td contenteditable="true" oninput="OnInput_part ($(this).text(), \'' + json[i].outPutID + '\',\'' + json[i].electric_partID + '\')" style="white-space: nowrap;text-overflow: ellipsis" id="' + json[i].electricID + '">' + json[i].electric + '</td>' +
                        '<td style="white-space: nowrap;text-overflow: ellipsis" id="' + json[i].electric_partID + '">' + json[i].electric_part + '</td>' +
                        '<td contenteditable="true" oninput="OnInput_part ($(this).text(), \'' + json[i].outPutID + '\',\'' + json[i].coalGas_PartID + '\')" style="white-space: nowrap;text-overflow: ellipsis" id="' + json[i].coalGasID + '">' + json[i].coalGas + '</td>' +
                        '<td style="white-space: nowrap;text-overflow: ellipsis" id="' + json[i].coalGas_PartID + '">' + json[i].coalGas_Part + '</td>' +
                        '<td contenteditable="true" oninput="OnInput_part ($(this).text(), \'' + json[i].outPutID + '\',\'' + json[i].air_partID + '\')" style="white-space: nowrap;text-overflow: ellipsis" id="' + json[i].airID + '">' + json[i].air + '</td>' +
                        '<td style="white-space: nowrap;text-overflow: ellipsis" id="' + json[i].air_partID + '">' + json[i].air_part + '</td>' +
                        '<td contenteditable="true" style="white-space: nowrap;text-overflow: ellipsis" id="' + json[i].steamID + '">' + json[i].steam + '</td>' +
                        '<td contenteditable="true" style="white-space: nowrap;text-overflow: ellipsis" id="' + json[i].waterID + '">' + json[i].water + '</td>' +
                        '<td contenteditable="true" style="white-space: nowrap;text-overflow: ellipsis" id="' + json[i].softWaterID + '">' + json[i].softWater + '</td>' +
                        '<td contenteditable="true" style="white-space: nowrap;text-overflow: ellipsis" id="' + json[i].oxygenID + '">' + json[i].oxygen + '</td>' +
                        '<td contenteditable="true" style="white-space: nowrap;text-overflow: ellipsis" id="' + json[i].cokeID + '">' + json[i].coke + '</td>' +
                        '<td contenteditable="true" style="white-space: nowrap;text-overflow: ellipsis" id="' + json[i].oilID + '">' + json[i].oil + '</td>' +
                        '</tr>';
                $('#planMakeTable').append(s);
//                $('#planMakeTable').editableTableWidget().numericInputExample().find('td:first').focus();
//                $('#planMakeTable').editableTableWidget({editor: $('<textarea>')}).numericInputExample().find('td:first').focus();
            },
            error: function (XMLResponse) {
                $.unblockUI();
                alert(" 错误信息：" + XMLResponse.responseText);
            },
            beforeSend: function () {
                $.blockUI({
                    css: {
                        border: 'none',
                        padding: '5px',
                        backgroundColor: '#ffffff',
                        opacity: .8,
                        color: '#000000'
                    },
                    message: '<h4><img src="plan/images/busy.gif"/>   加载中...</h4>'
                });
            }
        });
    }

三、监听表格数据改变

<td contenteditable="true" oninput="OnInput_cl ($(this).text(),\'' + json[i].electricID + '\',\'' +
 json[i].electric_partID + '\',\'' + json[i].coalGasID + '\',\'' + json[i].coalGas_PartID + '\',\'' +
 json[i].airID + '\',\'' + json[i].air_partID + '\')"

function OnInput_cl(value, eleID, elePartID, gasID, gasPartID, airID, airPartID) {
    var eleValue = $('#' + eleID + '').text();
    var gasValue = $('#' + gasID + '').text();
    var airValue = $('#' + airID + '').text();

    $('#' + elePartID + '').text(eleValue * 10000 / value);
    $('#' + gasPartID + '').text(gasValue * 10000 / value);
    $('#' + airPartID + '').text(airValue * 10000 / value);
}

四、保存表格数据

function savePlanMake() {
    // 遍历所有的table数据
    var flag = false;
    var html = '';
    $('#planMakeTable').find('tbody').each(function () {
        $(this).find('tr').each(function () {
            $(this).find('td').each(function () {
                if ($(this).attr("id") != "" && $(this).attr("id") != null && $.trim($(this).text()) != "") {
                    if (isNaN($(this).text())) {
                        flag = true;
                        return false;
                    }
                    html += $(this).attr("id") + ',' + $(this).text() + "||";
                }
            });
        });
        return false;
    });

    if (flag == true) {
        $.messager.popup("只允许输入数字，请检查！");
        return false;
    } else {
        var time = $('#datetimepicker').val();
        var dataString = {
            "data": html,
            "time": time
        };
        $.ajax({
            url: "/energyPlan/saveEnergyPlanMakeData",
            type: "post",
            dataType: "text",
            contentType: "application/json; charset=utf-8",
            data: $.toJSON(dataString),
            success: function (msg) {
                $.unblockUI();
                $(".blockUI").fadeOut("slow");
                $.messager.popup("提交成功！");
                var time = $('#datetimepicker').val();
                setPlanMakeTable(time);
            },
            error: function (xhr, msg, e) {
                $.unblockUI();
                $(".blockUI").fadeOut("slow");
                alert("提交失败：" + xhr + "," + msg + "," + e);
            },
            beforeSend: function () {
                $.blockUI({message: '<h3>正在提交，请稍候...</h3>'});
            }
        });
    }
}