bootstrap Table的一些小操作

 更新时间:2017年11月01日 08:35:38   作者:tzzf  
这篇文章主要为大家详细介绍了bootstrap Table的一些小操作,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

本文实例为大家分享了bootstrap Table的操作代码,供大家参考,具体内容如下

function HQCreatTable(ob) {
  var option = {
    cache: false,//是否使用缓存,默认为true,所以一般情况下需要设置一下这个属性(*)
    scrollX: true,
    scrollY:true,
    striped: true,   //使表格带有条纹 //是否显示行间隔色
    sidePagination: "client",//分页方式:client客户端分页,server服务端分页(*)
    pagination: true,  //在表格底部显示分页工具栏
    pageNumber: 1,  //初始化加载第一页,默认第一页
    pageSize: 10,
    pageList: [ 10,15],//可供选择的每页的行数(*)
    showColumns: false,//是否显示所有的列
    sortable: true, //是否启用排序
    
    clickToSelect: true,//是否启用点击选中行
    showRefresh: false, //显示刷新按钮
    //search: false,//是否显示右上角的搜索框
    //toolbar: '#toolbar', //工具按钮用哪个容器
    uniqueId: "ID", //每一行的唯一标识,一般为主键列
    undefinedText: "",
    toolbarAlign: 'left',
    exportDataType: "all", //basic', 'all', 'selected'.
  }
  if (ob.rowStyle) {
    option.rowStyle = ob.rowStyle;//行样式 是函数
  }
  //排序
  if (ob.sortOrder) {
    option.sortOrder = ob.sortOrder;
  } else {
    option.sortOrder = "desc";
  }
  if (ob.sortName) {
    option.sortName = ob.sortName;
  }
  if (ob.showExport) {
    option.showExport = ob.showExport;//导出Excel
  }
  if (ob.showFooter) {
    option.showFooter = ob.showFooter;//是否显示统计页脚
  }
  if (ob.searchAlign) {
    option.searchAlign = ob.searchAlign;
  }
  if (ob.num) {
    option.pageSize = ob.num;//每页的记录行数(*)
  }
  if (ob.data) {
    option.data = ob.data;
  } else {
    option.data = [];
  }
  if (ob.search) {
    option.search = ob.search;
  }
  if (ob.columns) {
    option.columns = ob.columns;
  }
  if (ob.onClickRow) {
    option.onClickRow = ob.onClickRow;
  }
  if (ob.onDblClickRow) {
    option.onDblClickRow = ob.onDblClickRow;
  }
  if (ob.onDblClickRow) {
    option.onDblClickRow = ob.onDblClickRow;
  }
  if (ob.onCheck) {
    option.onCheck = ob.onCheck;
  }
  if (ob.onAll) {
    option.onAll = ob.onAll;
  }
  if (ob.onLoadSuccess) {
    option.onLoadSuccess = ob.onLoadSuccess;
  }
  if (ob.toolbar) {
    option.toolbar = ob.toolbar;
  }
  if (ob.singleSelect || ob.singleSelect == false) {
    option.singleSelect = ob.singleSelect
  } else {
    option.singleSelect = true;//禁止多选
  }
  if (ob.maintainSelected) {
    option.maintainSelected = ob.maintainSelected;
  } else {
    option.maintainSelected = false;//设置为 true 在点击分页按钮或搜索按钮时,将记住checkbox的选择项
  }
  if (ob.detailView) { option.detailView = ob.detailView; }
  if (ob.onExpandRow) {
    option.onExpandRow = ob.onExpandRow;
  }
  if (ob.onEditableSave) {
    option.onEditableSave = ob.onEditableSave;
  }
  $(ob.id).bootstrapTable('destroy');
  $(ob.id).bootstrapTable(option);
  if (ob.data) {
    $(ob.id).bootstrapTable('load', ob.data);
  }
}

前端分页的Table配置函数

<table id="Table3" data-row-style="rowStyle"></table>
 //行根据数据变色
  function rowStyle(row, index) {
    var classes = ['success'];
    var classes1 = ['danger'];
    var classes2 = ['warning'];
    if (row.bed_msg==0) {
      return {
        classes: classes2
      };
    }else{
      if (row.status == 1) {
        return {
          classes: classes1
        };
      } else {
          return {
        classes: classes
        };
      }
    }
    
  }

根据每行数据的一个字段的值来改变行的背景色(class好像只能调用他本来默认的那几个,很久之前写的忘记了是不是这样的)

formatter: function (value, row, index) {
          // 根据row.列名  那状态确定返回 true/false
          if (row.status == 1) {
            return {
              disabled: true
            };
          }
          
        }

这个是根据每行数据的一个字段的值来是否禁用选择框(我在之前项目需要做结算,已结算的和未结算的在一起,因此需要这个),formatter还可以写别的函数,比如根据1,0值改成其对应的值

footerFormatter: function (data) {
             return data.reduce(function (sum, row) {
               return accAdd(sum, row["Selmoney"]);
             }, 0) + "元";
           }

footerFormatter是必须之前的配置Table时,showFooter属性为true,否则不会显示。我写这个是前端分页的话是Table所有数据的Selmoney值的总和,后端分页的话则是当页数据的总和。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

相关文章

  • javascript之弹出窗口居中的代码

    javascript之弹出窗口居中的代码

    有时候我们在网页制作过程中需要弹出窗口,一般情况下,我们更希望窗口可以居中显示
    2007-08-08
  • 详解Js中的模块化是如何实现的

    详解Js中的模块化是如何实现的

    这篇文章主要介绍了详解Js中的模块化是如何实现的,详细的介绍了模块化的运行,具有一定的参考价值,有兴趣的可以了解下
    2017-10-10
  • js创建对象的方式总结

    js创建对象的方式总结

    这篇文章主要介绍了js创建对象的方式,实例总结了3种常用的创建对象的方式,非常实用,需要的朋友可以参考下
    2015-01-01
  • 微信小程序中多个页面传参通信的学习与实践

    微信小程序中多个页面传参通信的学习与实践

    刚接触微信小程序,对里面的语法和属性还不怎么了解,最近正在努力学习中,下面这篇文章主要给大家介绍了微信小程序中多个页面传参通信的相关资料,是最近学习的一个内容总结,需要的朋友可以参考借鉴,下面来一起看看吧。
    2017-05-05
  • 用JavaScript实现轮播图效果

    用JavaScript实现轮播图效果

    这篇文章为大家详细主要介绍了用JavaScript实现轮播图效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-08-08
  • JS统计Flash被网友点击过的代码

    JS统计Flash被网友点击过的代码

    JS统计Flash被网友点击过的代码...
    2007-05-05
  • 前端请求并发和请求覆盖的解决方法

    前端请求并发和请求覆盖的解决方法

    最近在开发一些大屏,涉及到比较多的数据来源,接口也没有做聚合,导致页面需要调很多接口来填充页面数据,那么就会有接口并发的问题出现,所以本文给大家介绍了如何解决前端请求并发和请求覆盖,需要的朋友可以参考下
    2024-10-10
  • window.onload绑定多个事件的两种解决方案

    window.onload绑定多个事件的两种解决方案

    这篇文章主要介绍了window.onload绑定多个事件的两种解决方案的相关资料,需要的朋友可以参考下
    2016-05-05
  • js文本框输入点回车触发确定兼容IE、FF等

    js文本框输入点回车触发确定兼容IE、FF等

    js文本框输入点回车触发确定兼容IE、FF等,下面有个不错的示例,感兴趣的朋友可以参考下
    2013-11-11
  • 深入了解TypeScript中常用类型的使用

    深入了解TypeScript中常用类型的使用

    javaScript​ 有三个经常会使用到的原始类型:stirng,number,boolean​。每一个在Typescript​都有一个相对应的类型。本文就来聊聊TypeScript中这些常用类型的使用,感兴趣的可以了解一下
    2022-09-09

最新评论