Bootstrap Table笔记—

Spring Boot + Bootstrap

1.父子表

初始化表格的时候有一个属性"detailView"，将它设置为true，在每行的前面即可看到一个"+"形状的图标。点击这个图标即触发加载子表格的事件。

（1）初始化表格，注册行展开事件

//初始化TableoTableInit.Init = function () {    $('#tb_departments').bootstrapTable({        url: '/girl/lS',         				//请求后台的URL（*）        method: 'post',                       	//请求方式（*）		contentType: "application/x-www-form-urlencoded",		dataType: "json",						//数据类型        toolbar: '#toolbar',               	//工具按钮用哪个容器        striped: false,                      	//是否显示行间隔色        cache: false,                       	//是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）        pagination: true,                   	//是否显示分页（*）        sortable: false,                    	//是否启用排序        sortOrder: "asc",                   	//排序方式		queryParamsType: '',        queryParams: oTableInit.queryParams, 	//传递参数（*）        sidePagination: "server",           	//分页方式：client客户端分页，server服务端分页（*）        pageNumber: 1,                       	//初始化加载第一页，默认第一页        pageSize: 10,                       	//每页的记录行数（*）        pageList: [10, 25, 50, 100],        	//可供选择的每页的行数（*）        search: true,                       	//是否显示表格搜索，此搜索是客户端搜索，不会进服务端，所以，个人感觉意义不大        strictSearch: true,						//启用全匹配搜索，否则为模糊搜索		searchOnEnterKey: false,				//按回车触发搜索方法，否则自动触发搜索方法        showColumns: true,                  	//是否显示所有的列        showRefresh: true,                  	//是否显示刷新按钮        minimumCountColumns: 2,             	//最少允许的列数        clickToSelect: true,                	//是否启用点击选中行        //height: 500,                        	//行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度        uniqueId: "ID",                     	//每一行的唯一标识，一般为主键列        showToggle:true,                    	//是否显示详细视图和列表视图的切换按钮        cardView: false,                    	//是否显示详细视图        detailView: true,                  		//是否显示父子表        columns: [{            checkbox: true        }, {            field: 'id',            title: 'ID',			align: 'center',			valign: 'middle'        }, {            field: 'age',            title: 'AGE',			align: 'center',			valign: 'middle'        }, {            field: 'cupSize',            title: 'CupSize',			align: 'center',			valign: 'middle'        } ],		//注册加载子表的事件。注意下这里的三个参数！		onExpandRow: function (index, row, $detail) {			oInit.InitSubTable(index, row, $detail);		}    });};

子表加载事件

onExpandRow对应方法

function (index, row, $detail)的三个参数，

index：父表当前的行索引。

row：父表当前行的Json数据对象。

$detail：当前行下面创建的新行里面的td对象。

第三个参数尤为重要，因为生成的子表的table在装载在$detail对象里面的。bootstraptable为我们生成了$detail这个对象，然后我们只需要往它里面填充我们想要的table即可。

（2）oInit.InitSubTable()方法

//初始化子表格(无线循环)var oInit = new Object();oInit.InitSubTable = function (index, row, $detail) {	var parentid = row.id;	var cur_table = $detail.html('
    
').find('table');	$(cur_table).bootstrapTable({		url: '/girl/sub/lC',		method: 'post',		contentType: "application/x-www-form-urlencoded",		dataType: "json",						//数据类型		queryParams: { strParentID: parentid },		ajaxOptions: { strParentID: parentid },		clickToSelect: true,		detailView: true,//父子表		uniqueId: "subId",		pageSize: 10,		pageList: [10, 25],		columns: [{			checkbox: true		}, {			field: 'subId',			title: 'SubId'		}, {			field: 'grade',			title: 'Grade'		}, {			field: 'name',			title: 'Name'		} ],		//无线循环取子表，直到子表里面没有记录		onExpandRow: function (index, row, $Subdetail) {			oInit.InitSubTable(index, row, $Subdetail);		}	});};

所以，生成子表的原理就是创建一个table对象

cur_table,然后再注册这个对象的表格初始化即可。

			
    		
    		BootStrap Table使用		
    				
    				
    		
    				
    				
    				
    		
    		
    								
    			
     				
      
       查询条件
      
				
      					
       						
        							
         部门名称							
          
           
         
							
         状态							
          
           
         
							
          
           
         
						
        
					
       
				
      
			
     
			
     	            
      	            
      	            
      	        
     
			
     			
     				
      					
       						
        							
         							
          添加商品

2.行调序

（1）需要额外引用两个js文件

（2）在cshtml页面定义表格，添加两个属性

3.列调序

（1）额外引用几个js和css

（2）在cshtml页面定义表格时，添加一个属性

4.控件过滤

bootstrap table有每列过滤的功能。

（1）引入额外js

（2）定义表格属性及表头属性


    
	     		      			       ID 			       AGE 			       CUP SIZE

			
    		
    		BootStrap Table使用		
    				
    				
    		
    				
    				
    				
    						
    			
     	            
      	            
      	            
      	        
     
			
     
				      					       						        ID 						        AGE 						        CUP SIZE