bootstrap Table的一些小操作


Posted in Javascript onNovember 01, 2017

本文实例为大家分享了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 相关文章推荐
addRule在firefox下的兼容写法
Nov 30 Javascript
JavaScript中的原型prototype完全解析
May 10 Javascript
基于angular中的重要指令详解($eval,$parse和$compile)
Oct 21 Javascript
jQuery实现倒计时重新发送短信验证码功能示例
Jan 12 Javascript
动态加载css方法实现和深入解析
Jan 18 Javascript
jQuery鼠标移动图片上实现放大效果
Jun 25 jQuery
10行原生JS实现文字无缝滚动(超简单)
Jan 02 Javascript
layer弹出的iframe层在执行完毕后关闭当前弹出层的方法
Aug 17 Javascript
深入了解js原型模式
May 30 Javascript
原生js生成图片验证码
Oct 11 Javascript
vue实现下拉菜单树
Oct 22 Javascript
Vant 中的Toast设置全局的延迟时间操作
Nov 04 Javascript
react-native fetch的具体使用方法
Nov 01 #Javascript
Vue异步加载about组件
Oct 31 #Javascript
微信小程序顶部可滚动导航效果
Oct 31 #Javascript
React Native使用Modal自定义分享界面的示例代码
Oct 31 #Javascript
Bootstrap3.3.7导航栏下拉菜单鼠标滑过展开效果
Oct 31 #Javascript
使用nvm管理不同版本的node与npm的方法
Oct 31 #Javascript
javascript高级模块化require.js的具体使用方法
Oct 31 #Javascript
You might like
中篇:安装及配置PHP
2006/12/13 PHP
CI框架开发新浪微博登录接口源码完整版
2014/05/28 PHP
php检查日期函数checkdate用法实例
2015/03/19 PHP
PHP获取用户客户端真实IP的解决方案
2016/10/10 PHP
HTML中不支持静态Expando的元素的问题
2007/03/08 Javascript
拖动布局之保存布局页面cookies篇
2010/10/29 Javascript
基于jQuery的图片大小自动适应实现代码
2010/11/17 Javascript
增强用户体验友好性之jquery easyui window 窗口关闭时的提示
2012/06/22 Javascript
javascript错误的认识不用关心内存管理
2012/12/15 Javascript
jQuery中复合属性选择器用法实例
2014/12/31 Javascript
Node.js中child_process实现多进程
2015/02/03 Javascript
jQuery插件expander实现图片翻转特效
2015/05/21 Javascript
javascript随机显示背景图片的方法
2015/06/18 Javascript
javascript实现tab切换的两个实例
2015/11/05 Javascript
Jquery Mobile 自定义按钮图标
2015/11/18 Javascript
移动端jQuery修正Web页面滑动时div问题的两则实例
2016/05/30 Javascript
jQuery中table数据的值拷贝和拆分
2017/03/19 Javascript
jQuery返回定位插件详解
2017/05/15 jQuery
VueJs 将接口用webpack代理到本地的方法
2017/11/27 Javascript
vue 路由页面之间实现用手指进行滑动的方法
2018/02/23 Javascript
vue2.0 循环遍历加载不同图片的方法
2018/03/06 Javascript
一种angular的方法级的缓存注解(装饰器)
2018/03/13 Javascript
react组件从搭建脚手架到在npm发布的步骤实现
2019/01/09 Javascript
nodejs搭建本地服务器并访问文件操作示例
2019/05/11 NodeJs
生产制造追溯系统之再说条码打印
2019/06/03 Javascript
JS中的算法与数据结构之队列(Queue)实例详解
2019/08/20 Javascript
[49:20]2014 DOTA2国际邀请赛中国区预选赛5.21 CIS VS TongFu
2014/05/22 DOTA
简单说明Python中的装饰器的用法
2015/04/24 Python
详解Python中的Numpy、SciPy、MatPlotLib安装与配置
2017/11/17 Python
ManoMano英国:欧洲第一家专注于DIY和园艺市场的电商平台
2020/03/12 全球购物
Linux操作面试题
2015/02/11 面试题
幼儿园实习生辞职信
2014/01/20 职场文书
项目建议书格式
2014/03/12 职场文书
私营公司诉讼代理委托书范本
2014/09/13 职场文书
优秀员工事迹材料
2014/12/20 职场文书
Mybatis-Plus 使用 @TableField 自动填充日期
2022/04/26 Java/Android