bootstrapTable 列宽设置无效的解决方法之一

2019独角兽企业重金招聘Python工程师标准>>>

小弟是货真价实的后台服务开发人员，结果非要写bootStrap相关的代码，我这个头疼。。。

不过好在有一点点js基础，还能看懂一些代码。结合bootStrap api文档，总算是搞出来了，但，在样式的调整中，列宽不听使唤，实在是郁闷，网上查了很多方案都不行，但发现如果自定义一个列宽函数，是可以实现的。代码如下：

function queryLoanList(){
    	  $('#table').bootstrapTable({
    	        url:'./loan/XXX.json',
    	        sidePagination:'server',
    	        queryParamsType:'pageSize',
    	        queryParams: queryParams,
    	        search:false,
    	        pagination:true,
    	        pageList:[25],
    					 columns : [ {
    						title : '序号',
                             align : 'center',
    						formatter: function (value, row, index) {  
    			                 return index + 1; 
    					    }  
    					},{
    						field : 'loanId',
                             halign : 'center',
    						title : '项目编号'
    					},{
    						field : 'loanName',
                             halign : 'center',
                             width: 100,
    						title : '项目名称'
    					},{
    						field : 'profitEnterprise',
                             halign : 'center',
                             formatter : function(value, row, index){
                                 var div = "<div style='width:240px;'>"+value+"</div>";
                                 return div;
                             },
    						title : '合作机构'
    					},{
                             field : 'sourceStore',
                             width:300,
                             title : '项目来源门店'
                        },{
                             field : 'bidType',
                             title : '项目类型'
                        },{
    						field : 'money',
                            align : 'center',
    						title : '借款金额(元)'
    					},{
                             field : 'loanPeriod',
                             align : 'center',
                             title : '借款期限（期）'
                        },{
                             field : 'deadLine',
                             align : 'center',
                             title : '线下签约期限（期）'
                        },{
                             field : 'nowPeriod',
                             align : 'center',
                             title : '当前第？期'
                        },{
                             field : 'sumMoney',
                             align : 'center',
                             title : '每期上扣金额（元）'
                        },{
                             field : 'commitRate',
                             title : '打包结算点位（%）'
                         },{
                             field : 'platFormMoney',
                             align : 'center',
                             title : '平台分润金额（元）'
                        },{
                             field : 'proMoney',
                             align : 'center',
                             title : '机构分润金额（元）'
                        },{
    						field : 'gmTime',
    						title : '项目放款时间'
    					},{
                             field : 'sourceAgency',
                             title : '归属上级加盟商'
                         },{
    						field : 'treated',
    						title : '状态'
    					},{
    						title : '操作',
    						formatter : operateFormatter
    					}]
    	      });
        }

其中一句：

formatter : function(value, row, index){
                                 var div = "<div style='width:240px;'>"+value+"</div>";
                                 return div;
                             },

是关键，他可以自定当前列的div样式。这样就可以强制设置当前列的宽度，不过是定死的，不是自适应的。

以上，是工作中的一些小小收货

转载于:https://my.oschina.net/u/2543341/blog/1552268