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 相关文章推荐
脚本吧 - 幻宇工作室用到js,超强推荐share.js
Dec 23 Javascript
Mootools 1.2教程 设置和获取样式表属性
Sep 15 Javascript
JavaScript操作XML实例代码(获取新闻标题并分页,并分页)
May 25 Javascript
IE6-8中Date不支持toISOString的修复方法
May 04 Javascript
js动态修改表格行colspan列跨度的方法
Mar 30 Javascript
javascript学习笔记之函数定义
Jun 25 Javascript
JS实现带提示的星级评分效果完整实例
Oct 30 Javascript
仅9张思维导图帮你轻松学习Javascript 就这么简单
Jun 01 Javascript
vue滚动固定顶部及修改样式的实例代码
May 30 Javascript
Flutter部件内部状态管理小结之实现Vue的v-model功能
Jun 11 Javascript
JavaScript实现淘宝商品图切换效果
Apr 29 Javascript
react 路由Link配置详解
Nov 11 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
Protoss兵种对照表
2020/03/14 星际争霸
PHP循环函数使用介绍之PHP基础入门教程
2013/09/21 PHP
一个PHP二维数组排序的函数分享
2014/01/17 PHP
统计PHP目录中的文件数方法
2019/03/05 PHP
cnblogs 代码高亮显示后的代码复制问题解决实现代码
2011/12/14 Javascript
js关闭浏览器窗口及检查浏览器关闭事件
2013/09/03 Javascript
Extjs改变树节点的勾选状态点击按钮将复选框去掉
2013/11/14 Javascript
javascript中定义类的方法详解
2015/02/10 Javascript
js实现的后台左侧管理菜单代码
2015/09/11 Javascript
前端jquery部分很精彩
2016/05/03 Javascript
JS递归遍历对象获得Value值方法技巧
2016/06/14 Javascript
angularjs中ng-attr的用法详解
2016/12/31 Javascript
微信小程序 picker-view 组件详解及简单实例
2017/01/10 Javascript
jQuery插件FusionCharts绘制的3D双柱状图效果示例【附demo源码】
2017/04/20 jQuery
JavaScript实现的搜索及高亮显示功能示例
2017/08/14 Javascript
vue.js简单配置axios的方法详解
2017/12/13 Javascript
vue2.0 循环遍历加载不同图片的方法
2018/03/06 Javascript
vue.js在标签属性中插入变量参数的方法
2018/03/06 Javascript
详解Angular Forms中自定义ngModel绑定值的方式
2018/12/10 Javascript
node中使用log4js4.x版本记录日志的方法
2019/08/20 Javascript
layui字体图标 loading图标静止不旋转的解决方法
2019/09/23 Javascript
[52:03]DOTA2-DPC中国联赛 正赛 Ehome vs iG BO3 第三场 1月31日
2021/03/11 DOTA
python机器学习理论与实战(六)支持向量机
2018/01/19 Python
Python3使用SMTP发送带附件邮件
2020/06/16 Python
Python wxPython库消息对话框MessageDialog用法示例
2018/09/03 Python
python hook监听事件详解
2018/10/25 Python
详解python中的Turtle函数库
2018/11/19 Python
啥是佩奇?使用Python自动绘画小猪佩奇的代码实例
2019/02/20 Python
Python 使用Opencv实现目标检测与识别的示例代码
2020/09/08 Python
教你一分钟在win10终端成功安装Pytorch的方法步骤
2021/01/28 Python
食品销售计划书
2014/04/26 职场文书
建设工程授权委托书
2014/09/22 职场文书
2014年社区宣传工作总结
2014/12/02 职场文书
小学元宵节活动总结
2015/02/06 职场文书
2016医师资格考试考生诚信考试承诺书
2016/03/25 职场文书
html5调用摄像头实例代码
2021/06/28 HTML / CSS