bootstrap table.js动态填充单元格数据的多种方法
bootstrap-table.js动态填充table单元格数据，总结了几种方法以适应各种需求，以下就简单介绍两种方法：
方法一：全部自动填充table
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<!-- 引入 echarts.js -->
<script type="text/javascript" src="js/echarts.min.js"></script>
<!-- 引入jquery.js -->
<script type="text/javascript" src="js/jquery-2.1.1.min.js"></script>
<script type="text/javascript"
src="js/bootstrap-table.js"></script>
<script type="text/javascript"
src="js/bootstrap-table-zh-CN.min.js"></script>
</head>
<body>
<div class="mdsd-content">
<div class="panel panel-info" style="background: none;">
<div class="panel-body" style="width: 100%;">
<table id="table-javascript"
class="table table-hover table-responsive "></table>
</div>
</div>
</div>
<script type="text/javascript">
$('#table-javascript').bootstrapTable({
method : 'get',
url : ContextUtil.zutnlp_spark_info,
cache : false,
pagination : true,
root : 'workers',
total : 'totalElements',
sidePagination : 'server',
columns : [ {
field : 'address',
title : 'Address',
align : 'center',
valign : 'middle'
}, {
field : 'state',
title : 'State',
align : 'center',
valign : 'middle',
} ]
});
$(window).resize(function() {
$('#table-javascript').bootstrapTable('resetView');
});
</script>
</body>
</html>
方法二：表头这一栏固定，自动填充主体部分<tbody>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<!-- 引入 echarts.js -->
<script type="text/javascript" src="js/echarts.min.js"></script>
<!-- 引入jquery.js -->
<script type="text/javascript" src="js/jquery-2.1.1.min.js"></script>
<script type="text/javascript"
src="js/bootstrap-table.js"></script>
<script type="text/javascript"
src="js/bootstrap-table-zh-CN.min.js"></script>
</head>
<body>
<div class="panel panel-info" style="background: none;">
<div class="panel-body" style="width: 100%;">
<table id="table-javascript"
class="table table-hover table-responsive ">
<thead>
<th style="text-align: center; vertical-align: middle;"><div
class="th-inner ">Address</div></th>
<th style="text-align: center; vertical-align: middle;"><div
class="th-inner ">States</div></th>
<th style="text-align: center; vertical-align: middle;"><div
class="th-inner ">Cores</div></th>
<th style="text-align: center; vertical-align: middle;"><div
class="th-inner ">CoresUsed</div></th>
<th style="text-align: center; vertical-align: middle;"><div
class="th-inner ">Memory</div></th>
<th style="text-align: center; vertical-align: middle;"><div
class="th-inner ">MemoryUsed</div></th>
</thead>
<tbody id="dataTable"></tbody>
</table>
</div>
</div>
<script type="text/JavaScript">
$(function() {
$.ajax({
url : ContextUtil.zutnlp_spark_info,
type : "GET",
success : function(data) {
//调用创建表和填充动态填充数据的方法.
createShowingTable(data)
},
error : function() {
}
});
});
//动态的创建一个table，同时将后台获取的数据动态的填充到相应的单元格
function createShowingTable(data) {
//获取后台传过来的jsonData,并进行解析
//此处需要让其动态的生成一个table并填充数据
var tableStr = "";
var len = data.workers.length;
for (var i = 0; i < len; i++) {
tableStr = tableStr + "<tr><td align='center'>" + data.workers[i].address
+ "</td>" + "<td align='center'>" + data.workers[i].state + "</td>"
+ "<td align='center'>" + data.cores + "</td>"
+ "<td align='center'>" + data.coresUsed + "</td>"
+ "<td align='center'>" + data.memory + "</td>"
+ "<td align='center'>" + data.memoryUsed + "</td></tr>";
}
//将动态生成的table添加的事先隐藏的div中.
$("#dataTable").html(tableStr);
}
</script>
</body>
</html>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持小牛知识库。
-
问题内容： 我正在尝试使用jQuery，JSON等，并遇到了以下任务。我在服务器上有一个加载程序脚本，该脚本以JSON格式返回表数据。收到JSON数据后，我想用它们填充表格。我目前正在使用类似于以下代码（有更多的列和一些更高级的处理，但您知道了）： 这行得很好。但是一旦数据增长，它就会变得非常缓慢。对于很少的记录，大约需要5秒钟（Firefox，IE）来建立表，而且速度有点慢。例如，如果我在服务器
-
问题内容： 我想模拟一个ResultSet。说真的 我正在重构一个大的复杂代码段，该代码段是从ResultSet中解析数据，并且我希望代码的行为相同。因此，我需要为要重构的部分编写一个单元测试，以便能够对此进行测试。 谷歌搜索后，我想出了两个想法： 使用EasyMock，编写looooong模拟序列。非常糟糕的解决方案：难以添加初始数据，难以更改数据，测试调试程序繁琐。 使用Apache Derb
-
问题内容： 我已经看过这个问题并在Google上搜索了一下，但到目前为止没有任何效果。我认为现在是2010年（这些问题/答案很旧，而且还没有答案），我们有了CSS3！有什么方法可以使用CSS使div填充整个表格单元格的宽度和高度吗？ 我不知道单元格的宽度和/或高度会提前多少，并且将div的宽度和高度设置为100％无效。 另外，我需要div的原因是因为我需要将某些元素绝对定位在单元格之外，并且不适用
-
如果数据帧列中的单元格值匹配，我试图用"1"s填充相邻矩阵。“1”的位置基于同一行中的相应值。 更准确地说：数据帧pat1 我想填充矩阵单元格，，，和在空矩阵与相应的行/cole. name与"1"起，和，分别。 所需的输出将是带有列名的矩阵（数据=c（0,1,0,0,1,0,0,0,0,0,0,1,0,0,0,1,0），nrow=4，byrow=T） 我找过了，但还没有找到方法。
-
我有一个基于XFA的pdf表单，我们需要使用java来填充它。你能建议最好的方法吗。我能够使用iText为pdf生成xfa xml。 我有从上面的代码生成的Pdf和Xfa XML。你能不能建议我如何继续下去，因为我似乎没有主意了。我试图检查XFA文档，但似乎不对。我没有xml，pdf非常复杂，因为它有许多字段，是一个动态XFA pdf表单。 您的帮助和建议将受到衷心的感谢。
-
我有一个调查，有一堆问题，包括实际问题，一些是或否的单选按钮和一个评论框。我加了一张照片给你看。下面是填充问题后的html结构。 此信息通过web服务和jquery动态填充。看起来这些问题是动态填充的，每个问题都包含相同的类名、范围名等。有40多个问题被附加到div中。 我想做的是选择一个特定的问题并选中一个特定的单选按钮。然后，如果单击某个单选按钮，则会自动选中其他单选按钮。我相信Jquery是