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>'});
}
});
}
}