“ 若依教程独家分享！点赞+关注，一起从「蒟蒻」变成「大佬」~”

1 表格操作技巧，你get了多少？

本期内容

1 表格，表单，下拉框内显示数据库对应数据？  

2 bootstrap-select 下拉多选取值及重置

3 去掉Bootstrap Table 右上角的图标工具栏

4 对Bootstrap Table 表格加入序号

    4-1 序号翻页自动增加

    4-2 序号翻页重新开始计算自动增加

5 表格倒序排列

6 表格列宽设置

7 display:block设置自动换行

8 Bootstrap Table 表格过大(宽)左右滑动

9 Bootstrap Table 表格底部合计列拖动显示问题

2 表格、表单、下拉框，显示数据库对应数据，应该怎么控制么？

值为userId，显示userName商品添加的html中，用了Thymeleaf，th:text 显示的是名称，th:value是值，th:each 是遍历的集合！

  商品分类：
    

      
         
           
       
     

3 BootStrap-select下拉多选值及重置，应该怎么控制么？

html:这里的下拉列表数据从若依字典里取值。

  
  渠道：
  
    
  


   搜索
   重置

js声明两个方法：提交时获取多选数据，重置时重置多选下拉框

function doSubmit(){
  //这里可以直接val获取选中项，也可以遍历选中项获取
 
  //1.
  alert($("#channels").val());
    //后端如果用字符串接收，则获取逗号拼接字符串：10001,10002,10003
    //后端如果用数组接收，则获取到的是数组：[10001,10002,10003]
    $("#channelsList").val($("#channels").val());
 
    // 2.
  //以前不会用val方式时用的笨方法，遍历并收集选中项
  var str=[];
  $("#channels option:selected").each(function () {
    str.push($(this).val());// 收集选中项
  })
  $("#channelsList").val(str);//后端通过获取表单数据channelsList获取多选内容(字符串或数组接收)
}
 
function doReset() {
  $("#channels").selectpicker('refresh');//重置下拉框
}

4 去掉BootStrap Table右上角图标工具栏，应该怎么控制么？

在var options =  参数中分别添加以下参数

  showSearch: false,
             showHeader: false,    //去掉表头
             search: false,
             showToggle: false,
             showRefresh: false,
             showColumns: false,

5 对BootStrap Table表格加入序号，应该怎么控制么？

序号翻页自动增加下：

{
    field: 'Number',
    title: '序号',
    formatter: function (value, row, index) {
        var pageSize=$('#bootstrap-table').bootstrapTable('getOptions').pageSize;//通过表的#id 可以得到每页多少条
        var pageNumber=$('#bootstrap-table').bootstrapTable('getOptions').pageNumber;//通过表的#id 可以得到当前第几页
        return pageSize * (pageNumber - 1) + index + 1;
    }
},

序号翻页重新开始计算自动增加：

{
    field: 'Number',
    title: '序号',
    formatter: function (value, row, index) {
        return  index + 1;
    }
},

6 表格数据排序，应该怎么控制么？

在需要排序的字段下添加 sortable:true 

{ field: 'zdfxProcess', title: '完成率%', sortable:true },

在表格初始化时，options参数中加入

sortName: "createTime",sortOrder: "desc",

7 表格列宽设置，应该怎么控制么？

注：表格中直接使用width:XX 是不生效的,正确使用方法是在声明的表格中加入  fixed  属性

8 display:block自动换行，应该怎么控制么？

css 中 display:block; 自带前后换行：

display:block;

9 表格过大(宽)，左右滑动，应该怎么控制么？

在

div{ 
  white-space: nowrap; 
  overflow: hidden; 
  overflow-x: scroll; 
  -webkit-backface-visibility: hidden; 
  -webkit-overflow-scrolling: touch;
  }

或者

10 表格底部合计列拖动显示问题，应该怎么控制么？

在options中添加onLoadSuccess参数。

onLoadSuccess: onLoadSuccess,

在表格 $.table.init(options);后添加如下js函数

// 监听表体fixed-table-body滚动事件，
//赋值给表尾fixed-table-footer
function onLoadSuccess() {
  $(".fixed-table-body").on("scroll",function(){
    var sl=this.scrollLeft;
    $(this).next()[0].scrollLeft = sl;
  })
}

如果想围观票圈，可以扫这个二维码加我微信～