1.表格行样式

关于表格行的样式设置，效果不难，自己用jQuery设置tr的背景色也可以实现。但bootstrap table提供了设置行的背景色机制，我们可以用它内置的api。添加rowStyle属性：

rowStyle: function(row, index) {	//这里有5个取值代表5中颜色['active', 'success', 'info', 'warning', 'danger'];	var strclass = "";	if (Number(row.age) < 18) {		strclass = 'success';	} else {		return {};	}	return { classes : strclass }}

2.表格行内编辑

（1）引入额外的js文件

    
         
              
                   
部门名称
                   
上级部门
                   
部门级别
                   
描述
              
         
    

如果是在js里面初始化，写法如下：

columns: [{        checkbox: true    }, {        field: 'id',        title: 'ID',		align: 'center'    }, {        field: 'age',        title: 'AGE',		editable: {			type: 'text',			title: 'AGE',			validate: function (v) {				if (!v) return '年龄不能为空';				if (isNaN(v)) return '年龄必须是数字';				var age = parseInt(v);				if (age <= 0) return '年龄必须是正整数';			}		},		align: 'center'    }, {        field: 'cupSize',        title: 'CupSize',		editable: true,		align: 'center'    } ]

（3）在js里面初始化表格的时候注册编辑保存的事件

onEditableSave: function (field, row, oldValue, $el) {	console.log(field);	console.log(row);	console.log(oldValue);	console.log($el);	console.log(JSON.stringify(row));}

对应的方法里面需要自己处理保存的逻辑。四个参数field, row, oldValue, $el分别对应着当前列的名称、当前行数据对象、更新前的值、编辑的当前单元格的jQuery对象。

完整代码（1+2）：

			
    		
    				
    				
    				
    		
    				
    				
    				
    		
    										
    
			
     
				
      
       查询条件
      
				
      
					
       
						
        
							
         部门名称							
         
 
           
         
							
         状态							
         
 
           
         
							
         
 
          查询 
         
						
        
					
       
				
      
			
     
			
     
	            
      	                新增	            	            
      	                修改	            	            
      	                删除	            	        
     
			
     			
     
				
      
					
       
						
        
							
          × 							
         
 添加商品 
						
        
						
        
							
          0 1 2 						
        
						
        
							
          关闭 							
          确认 						
        
					
       
       				
      
      			
     
			
     		
    
		

3.表格行列合并

rowspan colspan

columns: [	[		{			checkbox: true,			rowspan: 2,			align: 'center',			valign: 'middle'		}, {			field: 'id',			title: 'ID',			rowspan: 2,			align: 'center',			valign: 'middle',		},{			title: 'Detail',			colspan: 2,			align: 'center'		}	],	[		{			field: 'age',			title: 'AGE',			editable: {				type: 'text',				title: 'AGE',				validate: function (v) {					if (!v) return '年龄不能为空';					if (isNaN(v)) return '年龄必须是数字';					var age = parseInt(v);					if (age <= 0) return '年龄必须是正整数';				}			},			align: 'center'		}, {			field: 'cupSize',			title: 'CupSize',			editable: true,			align: 'center'		}	]]