flyreaver

flyreaver 查看完整档案

填写现居城市  |  填写毕业院校  |  填写所在公司/组织填写个人主网站
编辑
_ | |__ _ _ __ _ | '_ \| | | |/ _` | | |_) | |_| | (_| | |_.__/ \__,_|\__, | |___/ 该用户太懒什么也没留下

个人动态

flyreaver 关注了问题 · 2016-09-01

bootstrap-table 设置列宽无效

图片描述

//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;
        };
    
    

关注 3 回答 2

flyreaver 回答了问题 · 2016-09-01

bootstrap-table 设置列宽无效

.table {table-layout:fixed;}

关注 3 回答 2

flyreaver 关注了问题 · 2016-09-01

bootstrap-table 设置列宽无效

我的表格有10多列,已经把整个页面撑满了。
单独设置每一列的width不起作用。

关注 5 回答 4

flyreaver 回答了问题 · 2016-09-01

bootstrap-table 设置列宽无效

.table {table-layout:fixed;}

关注 5 回答 4

认证与成就

  • 获得 5 次点赞
  • 获得 2 枚徽章 获得 0 枚金徽章, 获得 0 枚银徽章, 获得 2 枚铜徽章

擅长技能
编辑

(゚∀゚ )
暂时没有

开源项目 & 著作
编辑

(゚∀゚ )
暂时没有

注册于 2016-09-01
个人主页被 66 人浏览