bootstrapTable中的width值设置无效的问题的解决方法

冷不防 2022-05-22 01:43 854阅读 0赞

最近开发的时候碰到的一个显示的问题。如下图所示：

![70][]

这是我的js代码（这里只贴上相关代码）：

// 加载列表
    	$("#bizDeviceTable").bootstrapTable({
    		url : basePath + "bizDevice/getBizDeviceList.do",
    		method : 'post', //请求方式（*）
    		toolbar : '#toolbar', //工具按钮用哪个容器
    		striped : true, //是否显示行间隔色
    		cache : false, //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
    		sortable : true, //是否启用排序
    		sortOrder : "id asc", //排序方式
    		dataType : "json",
    		queryParamsType : "limit", //默认值为 'limit' ,在默认情况下 传给服务端的参数为：offset,limit,sort
    		contentType : "application/x-www-form-urlencoded",
    		queryParams : oTableInit.queryParams,//传递参数（*）
    		sidePagination : "server", //分页方式：client客户端分页，server服务端分页（*）
    		pagination : true, //是否显示分页（*）
    		pageNumber : 1, //初始化加载第一页，默认第一页
    		pageSize : 10, //每页的记录行数（*）
    		pageList : [ 10, 15, 20, 30, 100 ], //可供选择的每页的行数（*）
    		search : false, //是否显示表格搜索，此搜索是客户端搜索，不会进服务端，所以，个人感觉意义不大
    		strictSearch : true,
    		showColumns : false, //是否显示所有的列
    		showRefresh : false, //是否显示刷新按钮
    		showToggle : false, //是否显示详细视图和列表视图的切换按钮
    		minimumCountColumns : 2, //最少允许的列数
    		clickToSelect : true, //是否启用点击选中行
    		singleSelect : true, //Checkbox单选
    		height : 'auto', //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
    		uniqueId : "id", //每一行的唯一标识，一般为主键列
    		idField : "id",
    		cardView : false, //是否显示详细视图
    		detailView : false, //是否显示父子表
    		columns : [ {
    			title : "",
    			align : "center",
    			valign : "middle",
    			checkbox : true,
    			width:50,
    			clickToSelect : true
    		}, {
    			title : "序号",
    			align : "center",
    			valign : "middle",
    			width:50,
    			formatter: function (value, row, index) {
    		        return (index+1);
    		    }
    		},	     {
    			title : " 名称",
    			field : "name",
    			align : "center",
    			valign : "middle",
    			width:150,
    		},	     {
    			title : " 品牌",
    			field : "brand",
    			align : "center",
    			valign : "middle",
    			width:150,
    		},{
    			title : " 机构名称",
    			field : "orgName",
    			align : "center",
    			valign : "middle",
    			width:150,
    		},	    {
    			title : "地址",
    			field : "fullAddress",
    			align : "center",
    			valign : "middle",
    			width:150,
    		}

我要将设备的地址显示宽一点，但是修改width的值后页面没有任何改变。

解决方法：在jsp页面中加上如下代码即可

</style>

修改后的显示效果如下：

![70 1][]

将

{
    			title : "地址",
    			field : "fullAddress",
    			align : "center",
    			valign : "middle",
    			width:150,
    		}

中的width值改为300后，再将<script type="text/javascript" src="$\{basePath\}js/bizDevice/bizDevice.js?v=1.8"></script>中的v=1.9改为v=1.8（其实改什么值都可以，目的是通知浏览器不使用缓存），显示效果如下：

![70 2][]

[70]: /images/20220522/96c9d8a0c26f457f8c40e7477bc67ed0.png
[70 1]: /images/20220522/826f35a15e7d406cb72f4243a322ce2c.png
[70 2]: /images/20220522/2a3ea45d5c68408faace247049685383.png