当前位置：Gxlcms > JavaScript > bootstrap table.js动态填充单元格数据的多种方法

bootstrap table.js动态填充单元格数据的多种方法

时间：2021-07-01 10:21:17 帮助过：14人阅读

bootstrap-table.js动态填充table单元格数据，总结了几种方法以适应各种需求，以下就简单介绍两种方法：

方法一：全部自动填充table

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <title></title>
  6.   <!-- 引入 echarts.js -->
  7.   <script type="text/javascript" src="js/echarts.min.js"></script>
  8.   <!-- 引入jquery.js -->
  9.   <script type="text/javascript" src="js/jquery-2.1.1.min.js"></script>
  10.   <script type="text/javascript"
  11.       src="js/bootstrap-table.js"></script>
  12.   <script type="text/javascript"
  13.       src="js/bootstrap-table-zh-CN.min.js"></script>
  14. </head>
  15. <body>
  16. <div class="mdsd-content">
  17.   <div class="panel panel-info" style="background: none;">
  18.     <div class="panel-body" style="width: 100%;">
  19.       <table id="table-javascript"
  20.           class="table table-hover table-responsive "></table>
  21.     </div>
  22.   </div>
  23. </div>
  24.  
  25. <script type="text/javascript">
  26.   $('#table-javascript').bootstrapTable({
  27.     method : 'get',
  28.     url : ContextUtil.zutnlp_spark_info,
  29.     cache : false,
  30.     pagination : true,
  31.     root : 'workers',
  32.     total : 'totalElements',
  33.     sidePagination : 'server',
  34.     columns : [ {
  35.       field : 'address',
  36.       title : 'Address',
  37.       align : 'center',
  38.       valign : 'middle'
  39.     }, {
  40.       field : 'state',
  41.       title : 'State',
  42.       align : 'center',
  43.       valign : 'middle',
  44.     } ]
  45.   });
  46.   $(window).resize(function() {
  47.     $('#table-javascript').bootstrapTable('resetView');
  48.   });
  49. </script>
  50. </body>
  51. </html>

方法二：表头这一栏固定，自动填充主体部分<tbody>

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <title></title>
  6.   <!-- 引入 echarts.js -->
  7.   <script type="text/javascript" src="js/echarts.min.js"></script>
  8.   <!-- 引入jquery.js -->
  9.   <script type="text/javascript" src="js/jquery-2.1.1.min.js"></script>
  10.   <script type="text/javascript"
  11.       src="js/bootstrap-table.js"></script>
  12.   <script type="text/javascript"
  13.       src="js/bootstrap-table-zh-CN.min.js"></script>
  14. </head>
  15. <body>
  16. <div class="panel panel-info" style="background: none;">
  17.   <div class="panel-body" style="width: 100%;">
  18.     <table id="table-javascript"
  19.         class="table table-hover table-responsive ">
  20.       <thead>
  21.       <th style="text-align: center; vertical-align: middle;"><div
  22.           class="th-inner ">Address</div></th>
  23.       <th style="text-align: center; vertical-align: middle;"><div
  24.           class="th-inner ">States</div></th>
  25.       <th style="text-align: center; vertical-align: middle;"><div
  26.           class="th-inner ">Cores</div></th>
  27.       <th style="text-align: center; vertical-align: middle;"><div
  28.           class="th-inner ">CoresUsed</div></th>
  29.       <th style="text-align: center; vertical-align: middle;"><div
  30.           class="th-inner ">Memory</div></th>
  31.       <th style="text-align: center; vertical-align: middle;"><div
  32.           class="th-inner ">MemoryUsed</div></th>
  33.       </thead>
  34.       <tbody id="dataTable"></tbody>
  35.     </table>
  36.   </div>
  37. </div>
  38. <script type="text/JavaScript">
  39.   $(function() {
  40.     $.ajax({
  41.           url : ContextUtil.zutnlp_spark_info,
  42.           type : "GET",
  43.           success : function(data) {
  44.             //调用创建表和填充动态填充数据的方法.
  45.             createShowingTable(data)
  46.           },
  47.           error : function() {
  48.           }
  49.         });
  50.   });
  51.   //动态的创建一个table，同时将后台获取的数据动态的填充到相应的单元格
  52.   function createShowingTable(data) {
  53.     //获取后台传过来的jsonData,并进行解析
  54.  
  55.     //此处需要让其动态的生成一个table并填充数据
  56.     var tableStr = "";
  57.     var len = data.workers.length;
  58.     for (var i = 0; i < len; i++) {
  59.       tableStr = tableStr + "<tr><td align='center'>" + data.workers[i].address
  60.           + "</td>" + "<td align='center'>" + data.workers[i].state + "</td>"
  61.           + "<td align='center'>" + data.cores + "</td>"
  62.           + "<td align='center'>" + data.coresUsed + "</td>"
  63.           + "<td align='center'>" + data.memory + "</td>"
  64.           + "<td align='center'>" + data.memoryUsed + "</td></tr>";
  65.     }
  66.     //将动态生成的table添加的事先隐藏的div中.
  67.     $("#dataTable").html(tableStr);
  68.   }
  69. </script>
  70. </body>
  71. </html>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

人气教程排行

本站所有资源全部来源于网络，若本站发布的内容侵害到您的隐私或者利益，请联系我们删除！