bootstrap-table示例

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

1、远程加载列表数据：

1）引入库：

2）html代码：

  

    

      

        

          

            

              
产品名
              
                请选择产品线...
              
            
          
          
          添加数据
        
      
      
      
    
  
 



 

  

    

      

       ×
       
新增接口信息
      
      

       
        

         服务
         

          
           请选择服务
          
         
        
        

         接口名
         

          
         
        
        

         接口URL
         

          
         
        
        

         接口URL HEAD
         

          
         
        
       
      
      

        关闭
        提交
         
      
    

  

 

	
	
	

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 "连接";
			}
		},{
			field: 'header',
			title: 'XXX'
		},{
			field: 'operation',
			title: '操作',
			width: 120,
			align: 'center',
			valign: 'middle',
			formatter: function(value, row, index) {
				var result = "";
				result += "";
				result += "";
				result += "";
				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("" + data[i].serviceName + "");
			}
		} else {
			alert('获取服务列表请求出错');
			return;
		}
	},error:function() {
		alert('获取服务列表请求出错');
	}
});

事件函数代码：

function func() {
	return false;
}
function searchProduct() {
	var sid = $('#search_service').val();
	var my_url = "url?serviceId="+sid;
	if ( sid === "0") {
		my_url = 'url2';
	}
	$.ajax({
		url: my_url,
		type: "get",
		success:function(_data){
			if (_data.code == 'A00000') {
				var data = _data.data;
				$("#mytab").bootstrapTable('load', data);
			} else {
				alert('查询接口列表请求出错');
				return;
			}
		},error:function() {
			alert('查询接口列表请求出错');
		}
	});
}

function check_form() {
	var serviceId = $.trim($('#serviceId').val());
	var interfaceName = $.trim($('#interfaceName').val());
	var interfaceUrl = $.trim($('#interfaceUrl').val());

	if(!interfaceName || !interfaceUrl){
		alert('请输入接口名|接口URL！');
		return;
	}
	if (serviceId === "0") {
		alert('请选择服务！');
		return;
	}
	var header = $.trim($('#header').val());

	$.ajax({
		url: "url3",
		data:{"serviceId":serviceId,"interfaceName":interfaceName,"interfaceUrl":interfaceUrl,"header":header},
		type: "get",
		beforeSend:function(){
			$("#tip").html("正在处理...");
			return true;
		},
		success:function(data){
			if (data.code == 'A00000') {
				$("#tip").html("操作成功！");
				location.reload();
			} else if (data.code == 'E00002') {
				$("#tip").html("失败，可能是接口名重名导致!");
				return;
			}else {
				$("#tip").html("失败，请重试");
				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 '点我';
	},
	events: {
		'click .say_hi': function(e, value, row, index) {
			alert(row.name + ' 你好');
		}
	}
}

 

4、参考：

bootstrap 官方api：http://www.itxst.com/bootstrap-table-methods/bbrb7bvz.html

其他博客：

https://www.jb51.net/article/140396.htm

https://www.jianshu.com/p/b5ca011a0d9c

https://www.jb51.net/article/122986.htm

https://www.cnblogs.com/lichihua/p/10435072.html

https://blog.csdn.net/pengjunlee/article/details/80658596