bootstrap-table示例

àì夳堔傛蜴生んèń 2021-08-30 20:48 393阅读 0赞

废话不多说，先上一个基本示例，然后逐步介绍功能和配置。

**1、远程加载列表数据：**

1）引入库：

2）html代码：

<html>
    <body>
    
    <div class="container">
      <div class="row">
        <div class="table-responsive">
          <div id="toolbar">
            <form class="form-inline" onsubmit="return func()">
              <div class="form-group">
                <div class="input-group">
                  <div class="input-group-addon">产品名</div>
                  <select id="search_service" class="form-control" onchange="searchProduct();">
                    <option value="0">请选择产品线...</option>
                  </select>
                </div>
              </div>
              
              <button class="btn btn-primary btn-sm" data-toggle="modal" data-target="#addInterfaceModal">添加数据</button>
            </form>
          </div>
          
          <table id="mytab" class="table table-hover" style="word-break:break-all; word-wrap:break-all;"></table>
        </div>
      </div>
    </div> 
    
    
    <form class="form-horizontal" role="form" id="form_data" style="margin: 20px;">
     <div class="modal fade" id="addInterfaceModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
           <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
           <h4 class="modal-title" id="myModalLabel">新增接口信息</h4>
          </div>
          <div class="modal-body">
           <form class="form-horizontal" role="form">
            <div class="form-group">
             <label for="serviceId" class="col-sm-3 control-label">服务</label>
             <div class="col-sm-9">
              <select class="form-control" name="serviceId" id="serviceId">
               <option value="0">请选择服务</option>
              </select>
             </div>
            </div>
            <div class="form-group">
             <label for="interfaceName" class="col-sm-3 control-label">接口名</label>
             <div class="col-sm-9">
              <input type="text" class="form-control" name="interfaceName" id="interfaceName" placeholder="输入接口名">
             </div>
            </div>
            <div class="form-group">
             <label for="interfaceUrl" class="col-sm-3 control-label">接口URL</label>
             <div class="col-sm-9">
              <input type="text" class="form-control" name="interfaceUrl" id="interfaceUrl" placeholder="输入接口URL">
             </div>
            </div>
            <div class="form-group">
             <label for="header" class="col-sm-3 control-label">接口URL HEAD</label>
             <div class="col-sm-9">
              <input type="text" class="form-control" name="header" id="header" placeholder="格式如下，没有可不填! key:value;key:value">
             </div>
            </div>
           </form>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
            <button type="button" class="btn btn-primary" onClick=check_form();>提交</button>
            <span id="tip"> </span>
          </div>
        </div>
      </div>
     </div>
    </form>
    	
    	
    	
    
    <script>
      //todo1
    </script>
    </body>
    
    <script>
      //todo2
    </script>
    </html>

3）scripts代码：

//todo1
    $('#mytab').bootstrapTable({
    	url: 'url...',
    	toolbar: "#toolbar",
    	sidePagination: "false",
    	striped: true, // 是否显示行间隔色
    	search : "true",
    	showRefresh: true,
    	showToggle:true,
    	showColumns:true,
    	showHeader:true,
    	//uniqueId: "ID",
    	pagination: false, // 是否分页
    	sortable: false, // 是否启用排序
    	dataField : "data",//ajax返回json数据中，数组的key
    	columns: [{
    			field: 'id',
    			title: 'XXX'
    		},{
    			field: 'serviceId',
    			title: 'XXX'
    		},{
    			field: 'interfaceName',
    			title: 'XXX名'
    		},{
    			field: 'interfaceUrl',
    			title: 'XXX',
    			formatter: function(value, row, index) {
    				return "<a href='"+value+"' target='_blank'>连接</a>";
    			}
    		},{
    			field: 'header',
    			title: 'XXX'
    		},{
    			field: 'operation',
    			title: '操作',
    			width: 120,
    			align: 'center',
    			valign: 'middle',
    			formatter: function(value, row, index) {
    				var result = "";
    				result += "<a href='javascript:;' class='btn btn-xs btn_view' style='color:green' title='查看'><span class='glyphicon glyphicon-search'></span></a>";
    				result += "<a href='javascript:;' class='btn btn-xs btn_edit' style='color:#1890ff' title='编辑'><span class='glyphicon glyphicon-pencil'></span></a>";
    				result += "<a href='javascript:;' class='btn btn-xs btn_del' style='color:red' title='删除'><span class='glyphicon glyphicon-remove'></span></a>";
    				return result;
    			},
    			events: {
    				'click .btn_view': function(e, value, row, index) {
    					EditViewById(row,0);
    				},
    				'click .btn_edit': function(e, value, row, index) {
    					EditViewById(row,1);
    				},
    				'click .btn_del': function(e, value, row, index) {
    					DelById(row);
    				}
    			}
    		}
    	]
    });
    
    $.ajax({
    	url: "url...",
    	type: "get",
    	success:function(_data){
    		if (_data.code == 'A00000') {
    			var data = _data.data;
    			for (var i = 0; i < data.length; i++) {
    				$('#serviceId').append("<option value=" + data[i].id + ">" + data[i].serviceName + "</option>");
    			}
    		} else {
    			alert('获取服务列表请求出错');
    			return;
    		}
    	},error:function() {
    		alert('获取服务列表请求出错');
    	}
    });

事件函数代码：

**2、重新加载数据：**

我们都知道，当页面初始化时，我们使用bootstrapTable构造方法直接加载远程数据；但是当查询条件变了，需要重新从远程获取数据，然后将数据渲染到table中，总不能再次使用构造方法渲染一个新的表格吧。bootstrap提供了load方法，如下：

$('#table').bootstrapTable('load', newData);

**3、其他问题：**

1）bootstrap table自动换行

2）表格中某列点击行，获取整行信息：

{
    	field: 'column_operate',
    	title: '操作',
    	formatter: function(value, row, index) {
    		return '<a href="javascript:void(0);" class="say_hi">点我</a>';
    	},
    	events: {
    		'click .say_hi': function(e, value, row, index) {
    			alert(row.name + ' 你好');
    		}
    	}
    }

这里列一下boostrap自带的图表css：

[https://www.runoob.com/bootstrap/bootstrap-glyphicons.html][https_www.runoob.com_bootstrap_bootstrap-glyphicons.html]

[https://www.w3schools.com/bootstrap/bootstrap\_ref\_comp\_glyphs.asp][https_www.w3schools.com_bootstrap_bootstrap_ref_comp_glyphs.asp]

**4、参考：**

bootstrap 官方api：[http://www.itxst.com/bootstrap-table-methods/bbrb7bvz.html][http_www.itxst.com_bootstrap-table-methods_bbrb7bvz.html]

其他博客：

[https://www.jb51.net/article/140396.htm][https_www.jb51.net_article_140396.htm]

[https://www.jianshu.com/p/b5ca011a0d9c][https_www.jianshu.com_p_b5ca011a0d9c]

[https://www.jb51.net/article/122986.htm][https_www.jb51.net_article_122986.htm]

[https://www.cnblogs.com/lichihua/p/10435072.html][https_www.cnblogs.com_lichihua_p_10435072.html]

[https://blog.csdn.net/pengjunlee/article/details/80658596][https_blog.csdn.net_pengjunlee_article_details_80658596]

[https_www.runoob.com_bootstrap_bootstrap-glyphicons.html]: https://www.runoob.com/bootstrap/bootstrap-glyphicons.html
[https_www.w3schools.com_bootstrap_bootstrap_ref_comp_glyphs.asp]: https://www.w3schools.com/bootstrap/bootstrap_ref_comp_glyphs.asp
[http_www.itxst.com_bootstrap-table-methods_bbrb7bvz.html]: http://www.itxst.com/bootstrap-table-methods/bbrb7bvz.html
[https_www.jb51.net_article_140396.htm]: https://www.jb51.net/article/140396.htm
[https_www.jianshu.com_p_b5ca011a0d9c]: https://www.jianshu.com/p/b5ca011a0d9c
[https_www.jb51.net_article_122986.htm]: https://www.jb51.net/article/122986.htm
[https_www.cnblogs.com_lichihua_p_10435072.html]: https://www.cnblogs.com/lichihua/p/10435072.html
[https_blog.csdn.net_pengjunlee_article_details_80658596]: https://blog.csdn.net/pengjunlee/article/details/80658596