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 相关文章推荐
IE JS无提示关闭窗口不提示的方法
Apr 29 Javascript
html5 canvas js(数字时钟)实例代码
Dec 23 Javascript
js实现点击获取验证码倒计时效果
Jan 28 Javascript
js实现搜索框关键字智能匹配代码
Mar 26 Javascript
js重写方法的简单实现
Jul 10 Javascript
完美解决js传递参数中加号和&amp;号自动改变的方法
Oct 11 Javascript
微信小程序 图片边框解决方法
Jan 16 Javascript
JS使用cookie实现只出现一次的广告代码效果
Apr 22 Javascript
jQuery滚动插件scrollable.js用法分析
May 25 jQuery
JS FormData上传文件的设置方法
Jul 05 Javascript
JavaScript 防抖和节流遇见的奇怪问题及解决
Nov 20 Javascript
React如何创建组件
Jun 27 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
wiki-shan写的php在线加密的解密程序
2008/09/07 PHP
PHP中的gzcompress、gzdeflate、gzencode函数详解
2014/07/29 PHP
php中http与https跨域共享session的解决方法
2014/12/20 PHP
php序列化函数serialize() 和 unserialize() 与原生函数对比
2015/05/08 PHP
thinkPHP框架中执行事务的方法示例
2018/05/31 PHP
Laravel框架基础语法与知识点整理【模板变量、输出、include引入子视图等】
2019/12/03 PHP
精通Javascript系列之数值计算
2011/06/07 Javascript
jquery $.each() 使用小探
2013/08/23 Javascript
js 获取、清空input type=&quot;file&quot;的值(示例代码)
2013/12/24 Javascript
JS中判断null、undefined与NaN的方法
2014/03/26 Javascript
jQuery学习笔记之2个小技巧
2015/01/19 Javascript
JavaScript的类型、值和变量小结
2015/07/09 Javascript
JS实现自动定时切换的简洁网页选项卡效果
2015/10/13 Javascript
JS实现网页游戏中滑块响应鼠标点击移动效果
2015/10/19 Javascript
Node.js中流(stream)的使用方法示例
2017/07/16 Javascript
python爬取安居客二手房网站数据(实例讲解)
2017/10/19 Javascript
AngularJS监听ng-repeat渲染完成的两种方法
2018/01/16 Javascript
Vue实现按钮旋转和移动位置的实例代码
2018/08/09 Javascript
vue实现一个炫酷的日历组件
2018/10/08 Javascript
vue仿携程轮播图效果(滑动轮播,下方高度自适应)
2021/02/11 Vue.js
[01:00:30]TFT vs VGJ.T Supermajor 败者组 BO3 第一场 6.5
2018/06/06 DOTA
[01:02:04]EG vs Liquid 2019国际邀请赛淘汰赛 败者组 BO3 第一场 8.23
2019/09/05 DOTA
Python中__call__用法实例
2014/08/29 Python
Python多进程multiprocessing用法实例分析
2017/08/18 Python
浅谈Python中的bs4基础
2018/10/21 Python
IntelliJ IDEA安装运行python插件方法
2018/12/10 Python
python性能测量工具cProfile使用解析
2019/09/26 Python
python 实现图片修复(可用于去水印)
2020/11/19 Python
python爬取股票最新数据并用excel绘制树状图的示例
2021/03/01 Python
EJB的基本架构
2016/09/22 面试题
总裁秘书岗位职责
2013/12/04 职场文书
项目建议书模板
2014/05/12 职场文书
经贸日语专业自荐信
2014/09/02 职场文书
民警群众路线教育实践活动对照检查材料
2014/10/04 职场文书
React forwardRef的使用方法及注意点
2021/06/13 Javascript
试用1103暨1103、1101同门大比武 [ DAIWEI ]
2022/04/05 无线电