2016-05-31 14:00:16 yin767833376 阅读数 12797

bootstrap实现表格功能:

1.下载导入需要的文件



2.<body></body>中的标签




3.bootstrap中的js

<script>
  var $table = $('#table'),
  $remove = $('#remove'),
  selections = [];
   
  function initTable() {
  $table.bootstrapTable({
  height: getHeight(),
  columns: [
  [
  {
  field: 'state',
  checkbox: true,
  rowspan: 2,
  align: 'center',
  valign: 'middle'
  }, {
  title: 'Item ID',
  field: 'id',
  rowspan: 2,
  align: 'center',
  valign: 'middle',
  sortable: true,
  footerFormatter: totalTextFormatter
  }, {
  title: 'Item Detail',
  colspan: 3,
  align: 'center'
  }
  ],
  [
  {
  field: 'name',
  title: 'Item Name',
  sortable: true,
  editable: true,
  footerFormatter: totalNameFormatter,
  align: 'center'
  }, {
  field: 'price',
  title: 'Item Price',
  sortable: true,
  align: 'center',
  editable: {
  type: 'text',
  title: 'Item Price',
  validate: function (value) {
  value = $.trim(value);
  if (!value) {
  return 'This field is required';
  }
  if (!/^\$/.test(value)) {
  return 'This field needs to start width $.'
  }
  var data = $table.bootstrapTable('getData'),
  index = $(this).parents('tr').data('index');
  console.log(data[index]);
  return '';
  }
  },
  footerFormatter: totalPriceFormatter
  }, {
  field: 'operate',
  title: 'Item Operate',
  align: 'center',
  events: operateEvents,
  formatter: operateFormatter
  }
  ]
  ]
  });
  // sometimes footer render error.
  setTimeout(function () {
  $table.bootstrapTable('resetView');
  }, 200);
  $table.on('check.bs.table uncheck.bs.table ' +
  'check-all.bs.table uncheck-all.bs.table', function () {
  $remove.prop('disabled', !$table.bootstrapTable('getSelections').length);
   
  // save your data, here just save the current page
  selections = getIdSelections();
  // push or splice the selections if you want to save all data selections
  });
  $table.on('expand-row.bs.table', function (e, index, row, $detail) {
  if (index % 2 == 1) {
  $detail.html('Loading from ajax request...');
  $.get('LICENSE', function (res) {
  $detail.html(res.replace(/\n/g, '<br>'));
  });
  }
  });
  $table.on('all.bs.table', function (e, name, args) {
  console.log(name, args);
  });
  $remove.click(function () {
  var ids = getIdSelections();
  $table.bootstrapTable('remove', {
  field: 'id',
  values: ids
  });
  $remove.prop('disabled', true);
  });
  $(window).resize(function () {
  $table.bootstrapTable('resetView', {
  height: getHeight()
  });
  });
  }
   
  function getIdSelections() {
  return $.map($table.bootstrapTable('getSelections'), function (row) {
  return row.id
  });
  }
   
  function responseHandler(res) {
  $.each(res.rows, function (i, row) {
  row.state = $.inArray(row.id, selections) !== -1;
  });
  return res;
  }
   
  function detailFormatter(index, row) {
  var html = [];
  $.each(row, function (key, value) {
  html.push('<p><b>' + key + ':</b> ' + value + '</p>');
  });
  return html.join('');
  }
   
  function operateFormatter(value, row, index) {
  return [
  '<a class="like" href="javascript:void(0)" title="Like">',
  '<i class="glyphicon glyphicon-heart"></i>',
  '</a> ',
  '<a class="remove" href="javascript:void(0)" title="Remove">',
  '<i class="glyphicon glyphicon-remove"></i>',
  '</a>'
  ].join('');
  }
   
  window.operateEvents = {
  'click .like': function (e, value, row, index) {
  alert('You click like action, row: ' + JSON.stringify(row));
  },
  'click .remove': function (e, value, row, index) {
  $table.bootstrapTable('remove', {
  field: 'id',
  values: [row.id]
  });
  }
  };
   
  function totalTextFormatter(data) {
  return 'Total';
  }
   
  function totalNameFormatter(data) {
  return data.length;
  }
   
  function totalPriceFormatter(data) {
  var total = 0;
  $.each(data, function (i, row) {
  total += +(row.price.substring(1));
  });
  return '$' + total;
  }
   
  function getHeight() {
  return $(window).height() - $('h1').outerHeight(true);
  }
   
  $(function () {
  var scripts = [
  location.search.substring(1) || 'assets/bootstrap-table/src/bootstrap-table.js',
  'assets/bootstrap-table/src/extensions/export/bootstrap-table-export.js',
  'http://rawgit.com/hhurz/tableExport.jquery.plugin/master/tableExport.js',
  'assets/bootstrap-table/src/extensions/editable/bootstrap-table-editable.js',
  'http://rawgit.com/vitalets/x-editable/master/dist/bootstrap3-editable/js/bootstrap-editable.js'
  ],
  eachSeries = function (arr, iterator, callback) {
  callback = callback || function () {};
  if (!arr.length) {
  return callback();
  }
  var completed = 0;
  var iterate = function () {
  iterator(arr[completed], function (err) {
  if (err) {
  callback(err);
  callback = function () {};
  }
  else {
  completed += 1;
  if (completed >= arr.length) {
  callback(null);
  }
  else {
  iterate();
  }
  }
  });
  };
  iterate();
  };
   
  eachSeries(scripts, getScript, initTable);
  });
   
  function getScript(url, callback) {
  var head = document.getElementsByTagName('head')[0];
  var script = document.createElement('script');
  script.src = url;
   
  var done = false;
  // Attach handlers for all browsers
  script.onload = script.onreadystatechange = function() {
  if (!done && (!this.readyState ||
  this.readyState == 'loaded' || this.readyState == 'complete')) {
  done = true;
  if (callback)
  callback();
   
  // Handle memory leak in IE
  script.onload = script.onreadystatechange = null;
  }
  };
   
  head.appendChild(script);
   
  // We handle everything using the script element injection
  return undefined;
  }
  </script>



4.页面效果


可以实现对表格中的数据增删改查等功能


表格api: http://bootstrap-table.wenzhixin.net.cn/documentation/#column-options

2018-03-06 09:56:42 ixygj197875 阅读数 175

HTML表格是数据的二维容器,它的基本作用是用来存放数据。表格能够清晰、直观地描述数据间的逻辑关系,如果借助CSS设计表格的样式,阅读数据将会变得更轻松。

支持的表格标签

表格结构包括众多标签,这些标签各司其职,共同完成二维数据的呈现功能。Bootstrap支持的表格标签及其功能描述见表 3‑1:

表 3‑1 Bootstrap支持的表格标签
标签描述
<table>定义表格容器
<thead>定义表头容器,用来容纳标题行(<tr>)
<tbody>定义表格内容容器,用来容纳数据行(<tr>)
<tr>定义表格的行,用来容纳一组单元格(<th> 或 <td>)
<th>定义表格的列标题或行标题的单元格,必须放在 <thead> 标签内
<td>定义表格的数据单元格
<caption>定义表格标题,用于对表格的用途进行描述或总结,这对屏幕阅读器特别有用

关于作者

歪脖先生,十五年以上软件开发经验,酷爱Web开发,精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等,著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》、《Bootstrap3实用教程》,并全部在 GitHub 上开源。

2014-04-28 11:39:07 u011175410 阅读数 818
<!DOCTYPE html>
<html>
  <head>
    <title>Bootstrap 表格</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Bootstrap -->
    <link href="bootstrap/css/bootstrap.css" rel="stylesheet" media="screen">
    <link href="bootstrap/css/bootstrap-responsive.css" rel="stylesheet" media="screen">
    <script src="bootstrap/js/jquery.js"></script>
    <script src="bootstrap/js/bootstrap.min.js"></script>
  </head>
  <body style="padding:50px;">
  <h3>基本的表格</h3>
  <p>使用方法:在table后面添加.table的类即可</p>
  <table class="table">
        <thead>
          <tr>
            <th>Student-ID</th>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Grade</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>001</td>
            <td>Rammohan </td>
            <td>Reddy</td>
            <td>A+</td>
          </tr>
          <tr>
            <td>002</td>
            <td>Smita</td>
            <td>Pallod</td>
            <td>A</td>
          </tr>
          <tr>
            <td>003</td>
            <td>Rabindranath</td>
            <td>Sen</td>
            <td>A+</td>
          </tr>
        </tbody>
      </table>
      <br><hr>
       <h3>带条纹背景的表格</h3>
    <p>使用方法:在table后面添加.table 和table-striped的类即可</p>
      <table class="table table-striped">
        <thead>
          <tr>
            <th>Student-ID</th>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Grade</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>001</td>
            <td>Rammohan </td>
            <td>Reddy</td>
            <td>A+</td>
          </tr>
          <tr>
            <td>002</td>
            <td>Smita</td>
            <td>Pallod</td>
            <td>A</td>
          </tr>
          <tr>
            <td>003</td>
            <td>Rabindranath</td>
            <td>Sen</td>
            <td>A+</td>
          </tr>
        </tbody>
      </table>
      <br><hr>
      <h3>带边框的表格</h3>
    <p>使用方法:在table后面添加.table 和table-bordered的类即可,会呈现圆角边框的效果,追加一个table-hover的类,会鼠标悬停的行会呈现浅灰色背景</p>
      <table class="table table-bordered table-hover">
        <thead>
          <tr>
            <th>Student-ID</th>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Grade</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>001</td>
            <td>Rammohan </td>
            <td>Reddy</td>
            <td>A+</td>
          </tr>
          <tr>
            <td>002</td>
            <td>Smita</td>
            <td>Pallod</td>
            <td>A</td>
          </tr>
          <tr>
            <td>003</td>
            <td>Rabindranath</td>
            <td>Sen</td>
            <td>A+</td>
          </tr>
        </tbody>
      </table>
      <br><hr>
      <h3>紧缩的表格</h3>
    <p>使用方法:在table后面添加.table的类,并追加一个table-condensed的类,会减少一半的内边距,以缩紧表格</p>
      <table class="table table-striped table-bordered table-hover table-condensed">
        <thead>
          <tr>
            <th>Student-ID</th>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Grade</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>001</td>
            <td>Rammohan </td>
            <td>Reddy</td>
            <td>A+</td>
          </tr>
          <tr>
            <td>002</td>
            <td>Smita</td>
            <td>Pallod</td>
            <td>A</td>
          </tr>
          <tr>
            <td>003</td>
            <td>Rabindranath</td>
            <td>Sen</td>
            <td>A+</td>
          </tr>
          <tr>
            <td>002</td>
            <td>Smita</td>
            <td>Pallod</td>
            <td>A</td>
          </tr>
        </tbody>
      </table>
      <br><hr>
      <h3>表格行的类</h3>
      <p>表格行(tr)后添加.success[绿]/error[红]/warning[黄]/info[蓝]四种背景色显示</p>
      <table class="table table-bordered table-hover">
        <thead>
          <tr>
            <th>Student-ID</th>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Grade</th>
          </tr>
        </thead>
        <tbody>
          <tr class="success">
            <td>001</td>
            <td>Rammohan </td>
            <td>Reddy</td>
            <td>A+</td>
          </tr>
          <tr class="error">
            <td>002</td>
            <td>Smita</td>
            <td>Pallod</td>
            <td>A</td>
          </tr>
          <tr class="warning">
            <td>003</td>
            <td>Rabindranath</td>
            <td>Sen</td>
            <td>A+</td>
          </tr>
          <tr class="info">
            <td>002</td>
            <td>Smita</td>
            <td>Pallod</td>
            <td>A</td>
          </tr>
        </tbody>
      </table>
  </body>
</html>






预览图片(缩放50%):

2018-11-13 20:49:10 zxwu_1993 阅读数 112

              在我们开发项目当中经常会使用到很多插件,它们能够加快我们项目开发进度,特别是前端页面的展示控件有很多种类的,目前给大家介绍项目中经常使用到一种插件------bootstrap的表格构建及相关使用要点,希望对大家有所帮助

 

       不用多说直接上代码~

 

JavaScript代码

//初始化grid
			function InitTable() {
				var oTableInit = new Object();
			    //初始化Table 
			    $("#table").bootstrapTable('destroy');
			    $('#table').bootstrapTable({
			        url: 'StudentFileController/StudentFileController_listPage.do',   //请求后台的URL(*) 
			        method: 'post',        //请求方式(*) 
			        contentType:"application/x-www-form-urlencoded; charset=UTF-8",
			        toolbar: '#toolbar',  //工具按钮用哪个容器 
			        striped: true,        //是否显示行间隔色 
			        //cache: false,         //是否使用缓存,默认为true,所以一般情况下需要设置一下这个属性(*) 
			        pagination: true,     //是否显示分页(*) 
			        //sortable: true,       //是否启用排序 
			        //sortOrder: "asc",     //排序方式 
			        queryParams: Search,
			        paginationShowPageGo: true, 
			        sidePagination: "server",     //分页方式:client客户端分页,server服务端分页(*) 
			        pageNumber: 1,                //初始化加载第一页,默认第一页 
			        pageSize: 10,                 //每页的记录行数(*) 
			        pageList: [5, 10, 25, 50, 100],  //可供选择的每页的行数(*) 
			        //search: false,                //是否显示表格搜索,此搜索是客户端搜索,不会进服务端,所以,个人感觉意义不大 
			        //strictSearch: true,
			        showColumns: true,      //是否显示所有的列 
			        //showRefresh: true,     //是否显示刷新按钮 
			        //minimumCountColumns: 1, //最少允许的列数 
			        clickToSelect: true,    //是否启用点击选中行 
			        height: $(window).height()*0.825,            //行高,如果没有设置height属性,表格自动根据记录条数觉得表格高度 
			        singleSelect : false,	//是否单选
			        columns: [{
			        	field: '',
			            title: '',
			            checkbox: true,
    		            formatter:function(value,row,index){
    		            	return '<div style="width:30px;"></div>'
    		            }
			        },  {
			            field: 'name',
			            title: '学生姓名',
    		            formatter:function(value,row,index){
    		            	if(value == "" || value == null || value == "undefined"){
    		            		value = "--"
    		            	}
    		            	return '<div style="width:80px;">'+value+'</div>'
    		            }
			        },{
			            field: 'sex',
			            title: '性别',
    		            formatter:function(value,row,index){
    		            	if(value == "" || value == null || value == "undefined"){
    		            		value = "--"
    		            	}
    		            	return '<div style="width:50px;">'+value+'</div>'
    		            }
			        }, {
			            field: 'age',
			            title: '年龄',
    		            formatter:function(value,row,index){
    		            	if(value == "" || value == null || value == "undefined"){
    		            		value = "--"
    		            	}
    		            	return '<div style="width:50px;">'+value+'</div>'
    		            }
			        }, {
			            field: 'parents',
			            title: '家长',
    		            formatter:function(value,row,index){
    		            	if(value == "" || value == null || value == "undefined"){
    		            		value = "--"
    		            	}
    		            	return '<div style="width:180px;">'+value+'</div>'
    		            }
			        }, {
			            field: 'information_comefrom',
			            title: '信息来源',
    		            formatter:function(value,row,index){
    		            	if(value == "" || value == null || value == "undefined"){
    		            		value = "--"
    		            	}else if(value=="自定义"){
    		            		value = row.channel_other;
    		            		if(typeof(value) =="undefined"){
    		            			value = "--";
    		            		}
    		            	}
    		            	return '<div style="width:100px;">'+value+'</div>'
    		            }
			        },  {
			            field: 'promotionName',
			            title: '推广活动',
    		            formatter:function(value,row,index){
    		            	if(value == "" || value == null || value == "undefined"){
    		            		value = "--"
    		            	}
    		            	return '<div style="width:100px;">'+value+'</div>'
    		            }
			        },{
			            field: 'school',
			            title: '公立学校',
    		            formatter:function(value,row,index){
    		            	if(value == "" || value == null || value == "undefined"){
    		            		value = "--"
    		            	}
    		            	return '<div style="width:80px;">'+value+'</div>'
    		            }
			        }, {
			            field: 'grade',
			            title: '年级',
    		            formatter:function(value,row,index){
    		            	if(value == "" || value == null || value == "undefined"){
    		            		value = "--"
    		            	}
    		            	return '<div style="width:80px;">'+value+'</div>'
    		            }
			        },{
			            field: 'CREATE_USER',
			            title: '创建人',
    		            formatter:function(value,row,index){
    		            	if(value == "" || value == null || value == "undefined"){
    		            		value = "--"
    		            	}
    		            	return '<div style="width:80px;">'+value+'</div>'
    		            }
			        },{
			            field: 'create_date',
			            title: '创建时间',
    		            formatter:function(value,row,index){
    		            	if(value == "" || value == null || value == "undefined"){
    		            		value = "--"
    		            	}
    		            	return '<div style="width:150px;">'+value+'</div>'
    		            }
			        },{
			            field: 'update_date',
			            title: '修改时间',
    		            formatter:function(value,row,index){
    		            	if(value == "" || value == null || value == "undefined"){
    		            		value = "--"
    		            	}
    		            	return '<div style="width:150px;">'+value+'</div>'
    		            }
			        },{
			            field: 'remark',
			            title: '备注',
    		            formatter:function(value,row,index){
    		            	if(value == "" || value == null || value == "undefined"){
    		            		value = "--"
    		            	}
    		            	return '<div style="width:400px;">'+value+'</div>'
    		            }
			        }],
			        onDblClickRow:function(row,e){
			        	$("#table").bootstrapTable("check",e[0].rowIndex-1);
			        	ShowEditOrViewDialog('view');
			        	
			        }
			    });
			    //参数传递
			    function Search(params) {
			    	//console.log(Number(params.offset)/Number(params.limit))
			    	toffset = params.offset;
			    	tlimit = params.limit;
			        var temp = { 
			        		page:params.offset,
				        	rows: params.limit,
				        	name:$("#name_search").val(),
				        	class_id:$("#class_name_search").val(),
				        	birthday_start:$("#birthday_start").val(),
				        	birthday_end:$("#birthday_end").val(),
				        	home_village_query: $('#home_village_query').val(),
				        	termId: $('#term_name_search').val(),
				        	promotionID: $('#promotion_ID_search').val(),
			        };
			        return temp;
			    }
			    <c:if test="${not empty foffset}">
			    var foffset=${foffset};
			    var flimit=${flimit};
		        var pageNums=(foffset/flimit)+1;
			    
			    if(flimit !=null && flimit !="undefined" && pageNums !=null && pageNums !="undefined"){
			    	$("#table").bootstrapTable('refreshOptions', {
			    		pageNumber:pageNums,
			    		pageSize:flimit
			    	});
		        }
			    </c:if>
			};


           //绑定查询事件
			function Query(){
				InitTable(); 
			}
			//绑定清除事件
			function QueryClear(){
				$("#name_search").val("");
		        $("#class_id_search").val("");
		        $("div #class_id>.sod_label").html("请选择");
		        $("div #class_id ul li").removeClass("selected");
		        $("div #class_id ul li:first").addClass("active selected");
		        $("#birthday_start").val("");
		        $("#birthday_end").val("");
		        $('#home_village_query').val();
		        $("#term_name_search").val("");
		        $("div #term_id>.sod_label").html("请选择");
		        $("div #term_id ul li").removeClass("selected");
		        $("div #term_id ul li:first").addClass("active selected");
		        $("#promotion_ID_search").val("");
		        $("div #promotion_ID_search>.sod_label").html("请选择");
		        $("div #promotion_ID_search ul li").removeClass("selected");
		        $("div #promotion_ID_search ul li:first").addClass("active selected");
		        $('#class_name_search').val('');
		        //重载table数据
		        InitTable();
			}

 

HTML代码

 <!-------------------------------搜索框----------------------------------->
      <div class="panel panel-default">
				<div class="panel-body">
					<form class="form-inline" id="queryForm">
						<div class="form-group">
		        		      <!-- 学生姓名 -->
							  <label for="name_search" class="control-label">学生姓名:</label>
		                      <input type="text" class="form-control input-sm" ID="name_search" name="name"  />
		        		</div>	
		        		<div class="form-group">
		        			 <!-- 在读班级-->	
							  <label for="class_name_search"  class="control-label">在读班级:</label>
								<select id="class_name_search" name="class_id" class="form-control input-sm">
									<option value="">请选择</option>
									<c:forEach items="${classList}" var="schoolClass">
										<option value="${schoolClass.id}">${schoolClass.name}</option>
									</c:forEach>
								</select>
		                </div>
		                <div class="form-group">
		        			 <!-- 根据学期搜索-->	
							  <label for="class_name_search"  class="control-label">学期:</label>
								<select id="term_name_search" name="term_id" class="form-control input-sm">
									<option value="">请选择</option>
									<c:forEach items="${termList}" var="term">
										<option value="${term.id}">${term.yearQuarter}</option>
									</c:forEach>
								</select>
		                </div>
		                 <!-- 根据推广活动搜索-->
		                <div class="form-group">
		                <label for="promotion_ID_search" class="control-label">推广活动:</label>
									<select class="form-control" style="padding: 0" id="promotion_ID_search" name="promotion_ID_search" >
										<option value="">请选择</option>
										<c:forEach items="${promotionList}" var="promotion">
											<option value="${promotion.promotion_ID}">${promotion.promotionName}</option>
										</c:forEach>
									</select>
								</div>
		             
		            <a href="javascript:void(0);" class="btn btn-primary"  onclick="Query();" >查询</a>
                    <a href="javascript:void(0);" class="btn btn-primary"  onclick="QueryClear();">清除</a>    
                   </form>
				</div>
			</div>
        <div>
    	<div id="toolbar">
    		<c:forEach items="${BUTTONS}" var="btn">
				<c:if test="${btn.id != null}">
					 <a href="javascript:void(0);" class="btn ${btn.menuIcon} marR10" onclick='${btn.menuUrl}'>${btn.menuName}</a>
				</c:if>
			</c:forEach> 					             
    	</div>
    	<!-------------------------------详细信息展示表格----------------------------------->
    	<table id="table" style="font-size: 14px"></table>
    </div>

相关其他操作方法后续补充更新中......

 

 

效果图

 

bootstrap--表格制作

阅读数 455

bootstrap--表格制作

博文 来自: sunnyboysix

Bootstrap3 表格样式

阅读数 278

没有更多推荐了,返回首页