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>'});
}
});
}
}
jsp应用bootstrap表格应用实例的更多相关文章
- Bootstrap 表格 笔记
Bootstrap 表格 Bootstrap 提供了一个清晰的创建表格的布局.下表列出了 Bootstrap 支持的一些表格元素: 标签 描述 <table> 为表格添加基础样式. < ...
- 【原创】bootstrap框架的学习 第七课 -[bootstrap表格]
Bootstrap 表格 标签 描述 <table> 为表格添加基础样式. <thead> 表格标题行的容器元素(<tr>),用来标识表格列. <tbody& ...
- bootstrap简单使用实例
表格实例,包含bootstrap.css 和 2.1.1jquery <!DOCTYPE html> <html> <head> <meta charset= ...
- jQuery动态生成Bootstrap表格
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"% ...
- Bootstrap表格样式(附源码文件)--Bootstrap
1.表格默认样式 <h4>表格默认样式</h4><table><!--默认样式--> <tr><th>序号</th> ...
- Bootstrap -- 表格样式、表单布局
Bootstrap -- 表格样式.表单布局 1. 表格的一些样式 举例: <!DOCTYPE html> <html> <head> <meta http- ...
- bootstrap表格添加按钮、模态框实现
bootstrap表格添加按钮.模态框实现 原创 2017年07月20日 17:35:48 标签: bootstrap 1723 bootstrap表格添加按钮.模态框实现 - 需求: 需要表格后面每 ...
- MySQL+Service+Servlet+Jsp实现Table表格分页展示数据
下面以一个示例讲解如何使用MySQL+Service+Servlet+Jsp实现Table表格分页展示数据: eg:请假管理系统 要求如下: 一.打开首页页面, 访问查询请假记录的 servlet , ...
- Bootstrap表格类名及对应图形
.table:基础表格 不管制作哪种表格都离不开类名“table”.所以大家在使用Bootstrap表格时,千万注意,你的<table>元素中一定不能缺少类名“table”. .table ...
随机推荐
- Android安全问题 抢先接收广播 - 内因篇之广播接收器注册流程
导读:本文说明系统是如何注册动态广播以及静态广播,这里主要注意其注册的顺序 这篇文章主要是针对我前两篇文章 android安全问题 抢先开机启动 - 结果篇 android安全问题 抢先拦截短信 ...
- web.xml的说明
<!--DO NOT ALTER OR REMOVE COPYRIGHT NOTICES OR THIS HEADER. Copyright 2000-2007 Sun Microsystems ...
- html树形菜单控件
html树形菜单控件 链接 http://www.ithao123.cn/content-713974.html jQuery plugin: Treeview 这个插件能够把无序 ...
- Android开发之ContentProvider的简单使用
ContentProvider,内容提供者 官网结构图: 作为四大组件之一的ContentProvider,主要是用于应用间数据共享使用的. ContentProvider把应用的数据封装起来,然后提 ...
- JADE平台入门
相关介绍: JADE(Java Agent Development Framework,Java智能体开发框架) 用途: Java智能体开发框架 开发者: TILAB 主要功能: AMS.DF.ACC ...
- 在Linux上运行C#
众所周知,C#是Microsoft推出的.NET语言,只能在.NET平台上运行,例如Win 9x.ME.NT.2000.XP和Win CE之类的操作系统.但是,现在却有了一个叫做Mono的项目,它的目 ...
- vijos1194 Domino
vijos上的题解: 1.因为每个格子不是被覆盖就是没被覆盖,状态只有0 1两种,m<=5,所以可以将每一列的状态压缩,看作一个二进制数.2.矩阵G表示从I状态到J状态的路径条数,自乘N次为长度 ...
- RMAN catalog备份恢复方案
对于数据库的稳定性,高可用,跨平台以及海量数据库的处理,Oracle 数据库通常是大型数据库和大企业的首选.尽管如此,仍然不乏很多中小企业想要品尝一下Oracle腥味,因此在Oracle环境中也有不少 ...
- jQuery树叶掉落特效代码
代码使用方法 1.将index.html源文件中的JS设置代码插入到你的网页中 2.将style.css文件内容合并到你的页面样式表中 3.将jquery文件加载到你的页面中,请注意,这不是通用的jq ...
- Android学习过程
0. Tutorial 1. 基础知识的书 2. 实践为主的书 3. 阅读开源项目 4. 自己做项目 5. 理论为主的书 6. 编程规范和技巧性的书 通过实例了解Android开发 组件:Activi ...