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 相关文章推荐
JavaScript 事件对象的实现
Jul 13 Javascript
js中的string.format函数代码
Aug 11 Javascript
javascript高级学习笔记整理
Aug 14 Javascript
js仿3366小游戏选字游戏
Apr 14 Javascript
js原生之焦点图转换加定时器实例
Dec 12 Javascript
angular中ui calendar的一些使用心得(推荐)
Nov 03 Javascript
JS控制鼠标拒绝点击某一按钮的实例
Dec 29 Javascript
如何从0开始用node写一个自己的命令行程序
Dec 29 Javascript
qrcode生成二维码微信长按无法识别问题的解决
Apr 04 Javascript
解决layui 三级联动下拉框更新时回显的问题
Sep 03 Javascript
vue项目前端微信JSAPI与外部H5支付相关实现过程及常见问题
Apr 14 Javascript
Ajax获取node服务器数据的完整步骤
Sep 20 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 mssql 时间格式问题
2009/01/13 PHP
php实现通用的从数据库表读取数据到数组的函数实例
2015/03/21 PHP
php检查函数必传参数是否存在的实例详解
2017/08/28 PHP
PHP基于关联数组20行代码搞定约瑟夫问题示例
2017/11/07 PHP
该如何加载google-analytics(或其他第三方)的JS
2010/05/13 Javascript
编写可维护面向对象的JavaScript代码[翻译]
2011/02/12 Javascript
JavaScript实现获取dom中class的方法
2015/02/09 Javascript
JS拖动鼠标画出方框实现鼠标选区的方法
2015/08/05 Javascript
基于jQuery实现自动轮播旋转木马特效
2015/11/02 Javascript
浅谈jquery中使用canvas的问题
2016/10/10 Javascript
ES6概念 ymbol.for()方法
2016/12/25 Javascript
基于jQuery插件jqzoom实现的图片放大镜效果示例
2017/01/23 Javascript
js实现鼠标移动到图片产生遮罩效果
2017/10/21 Javascript
Vue2.0实现组件数据的双向绑定问题
2018/03/06 Javascript
详解element-ui中表单验证的三种方式
2019/09/18 Javascript
py中的目录与文件判别代码
2008/07/16 Python
Python中实现字符串类型与字典类型相互转换的方法
2014/08/18 Python
深入理解Python中的元类(metaclass)
2015/02/14 Python
Python二分查找详解
2015/09/13 Python
利用Hyperic调用Python实现进程守护
2018/01/02 Python
python的继承知识点总结
2018/12/10 Python
Pytorch抽取网络层的Feature Map(Vgg)实例
2019/08/20 Python
python3 配置logging日志类的操作
2020/04/08 Python
python中的对数log函数表示及用法
2020/12/09 Python
阿迪达斯德国官方网站:adidas德国
2017/07/12 全球购物
ECOSUSI官网:女式皮革背包
2019/09/27 全球购物
硕士研究生自我鉴定范文
2013/12/27 职场文书
成考报名单位证明范本
2014/01/16 职场文书
同学会主持词
2014/03/18 职场文书
护士求职信范文
2014/05/24 职场文书
作风建设整改方案
2014/10/27 职场文书
司考复习计划
2015/01/19 职场文书
企业承诺书格式范文
2015/04/28 职场文书
奖学金主要事迹范文
2015/11/04 职场文书
MySQL 使用事件(Events)完成计划任务
2021/05/24 MySQL
Nginx如何获取自定义请求header头和URL参数详解
2022/07/23 Servers