bootstrap-table 设置列宽无效

发布于 2022-09-03 13:54:34 字数 5574 浏览 11 评论 0

图片描述

//bootstrap-table

    $(function () {
         
         //1.初始化Table
         var oTable = new TableInit();
         oTable.Init();
         
         //2.初始化Button的点击事件
         var oButtonInit = new ButtonInit();
         oButtonInit.Init();
         
        });
         
         
        var TableInit = function () {
         var oTableInit = new Object();
         //初始化Table
         oTableInit.Init = function () {
          $('#table').bootstrapTable({
           url: '${pageContext.request.contextPath}/supplier/find',   //请求后台的URL(*)
           method: 'get',      //请求方式(*)
           toolbar: '#toolbar',    //工具按钮用哪个容器
           striped: true,      //是否显示行间隔色
           cache: false,      //是否使用缓存,默认为true,所以一般情况下需要设置一下这个属性(*)
           pagination: true,     //是否显示分页(*)
           sortable: false,      //是否启用排序
           sortOrder: "asc",     //排序方式
           queryParams: oTableInit.queryParams,//传递参数(*)
           sidePagination: "server",   //分页方式:client客户端分页,server服务端分页(*)
           pageNumber:1,      //初始化加载第一页,默认第一页
           pageSize: 10,      //每页的记录行数(*)
           pageList: [10, 25, 50, 100],  //可供选择的每页的行数(*)
           search: false,      //是否显示表格搜索,此搜索是客户端搜索,不会进服务端
           showColumns: true,     //是否显示所有的列按钮
           showRefresh: true,    //是否显示刷新按钮
           minimumCountColumns: 2,    //最少允许的列数
           clickToSelect: true,    //是否启用点击选中行
           height: 550,      //行高,如果没有设置height属性,表格自动根据记录条数觉得表格高度
           uniqueId: "supplier_id",      //每一行的唯一标识,一般为主键列
           showToggle:true,     //是否显示详细视图和列表视图的切换按钮
           cardView: false,     //是否显示详细视图
           detailView: true,     //是否显示父子表
           showPaginationSwitch:false,//是否显示隐藏分页按钮
           mobileResponsive:true,
           columns: [{
            checkbox: true
           }, {
                field: 'supplier_name',
                title: '供应商名称',
                width: '100px'
           }, {
                field: 'mobilephone',
                title: '手机',
                width: '100px'
           }, {
                field: 'fixedlinetelephone',
                title: '电话'
           }, {
                field: 'address.address',
                title: '地址',
                width: 250
        
           } ,{
                field: 'addressZone',
                title: '所在地区',
                width: '200px'
        
           } ,{
                field: 'supplierItemsType',
                title: '供应类型',
                width: '200px'
        
           } ,{
                field: 'evaluate',
                title: '好评度',
                width: '50'
        
           }, {
                field: 'email',
                title: '邮箱',
                visible:false,
                width: '80px'
           }, {
                field: 'qq',
                title: 'QQ号',
                visible:false,
                width: '100px'
           }, {
                field: 'weChat',
                title: '微信号',
                visible:false,
                width: '100px'
           }, {
                field: 'contactPersonList',
                title: '联系人',
                width: '350px',
                formatter:function(value,row,index){
                    var contactPerson = "";
                    $.each(value,function(index){
                        contactPerson += value[index].name + " ";
                        contactPerson += "类型:" + value[index].identityType.typeName + " ";
                        contactPerson += "手机:" + value[index].mobilephone +  " ";
                        //alert( value[index].identityType.typeName);
                    });
                    return contactPerson;
                },
           },{
                field:'supplier_id',
                title:'操作',
                width: '200px',
                formatter:function(value,row,index){
                   var e = '<a href="#" mce_href="#" class="btn btn-info btn-xs" onclick="edit(\''+ row.supplier_id + '\')"><i class="fa fa-edit"></i>编辑</a> ';  
                   var d = '<a href="#" mce_href="#" class="btn btn-danger btn-xs" onclick="del(\''+ row.supplier_id +'\')"><i class="fa fa-trash"></i> 删除</a> '; 
                   var s = '<a href="#" mce_href="#" class="btn btn-primary btn-xs" onclick="supplier(\''+ row.supplier_id +'\')"><i class="fa fa-trash"></i> 联系人</a> '; 
                        return e+d+s;  
               }
           } ]
          });
         };
         
         //得到查询的参数
         oTableInit.queryParams = function (params) {
          
             var temp = { //这里的键的名字和控制器的变量名必须一直,这边改动,控制器也需要改成一样的
               
                     limit: params.limit, //页面大小                  
                     offset: params.offset, //页码
                     supplier_name:$("#supplier_name").val(),
                     mobilephone:$("#mobilephone").val(),
                     fixedlinetelephone:$("#fixedlinetelephone").val(),
                     add:$("#address").val()
          };
          
             return temp;
         };
         
         return oTableInit;
        };
         
         
         var ButtonInit = function () {
         var oInit = new Object();
         var postdata = {};
         
         oInit.Init = function () {
          //初始化页面上面的按钮事件
         };
         
         return oInit;
        };
    
    

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

恏ㄋ傷疤忘ㄋ疼 2022-09-10 13:54:34
.table {table-layout:fixed;}
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文