function HQCreatTable(ob) {
var option = {
cache: false,//是否使用缓存,默认为true,所以一般情况下需要设置一下这个属性(*)
scrollX: true,
scrollY:true,
striped: true, //使表格带有条纹 //是否显示行间隔色
sidePagination: "client",//分页方式:client客户端分页,server服务端分页(*)
pagination: true, //在表格底部显示分页工具栏
pageNumber: , //初始化加载第一页,默认第一页
pageSize: ,
pageList: [ ,],//可供选择的每页的行数(*)
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==) {
return {
classes: classes2
};
}else{
if (row.status == ) {
return {
classes: classes1
};
} else {
return {
classes: classes
};
}
} }

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

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

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

footerFormatter: function (data) {
return data.reduce(function (sum, row) {
return accAdd(sum, row["Selmoney"]);
}, ) + "元";
}
footerFormatter是必须之前的配置Table时,showFooter属性为true,否则不会显示。我写这个是前端分页的话是Table所有数据的Selmoney值的总和,后端分页的话则是当页数据的总和。

bootstrap Table的 一些小操作的更多相关文章

  1. JS组件系列——Bootstrap Table 表格行拖拽(二:多行拖拽)

    前言:前天刚写了篇JS组件系列——Bootstrap Table 表格行拖拽,今天接到新的需要,需要在之前表格行拖拽的基础上能够同时拖拽选中的多行.博主用了半天时间研究了下,效果是出来了,但是感觉不尽 ...

  2. C# Bootstrap table之 分页

    效果如图: 一.声明talbe <div class="container"> <table id="table" class="t ...

  3. 使用【 ajax 】【 bootstrap 】显示出小窗口 详情内容 一些代码意思可以参考下一个文章

    使用[ bootstrap ]显示出小窗口  详情内容 显示页面 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional// ...

  4. [转]C# Bootstrap table之 分页

    本文转自:https://www.cnblogs.com/zhangjd/p/7895453.html 效果如图: 一.声明talbe <div class="container&qu ...

  5. bootstrap table分页(前后端两种方式实现)

    bootstrap table分页的两种方式: 前端分页:一次性从数据库查询所有的数据,在前端进行分页(数据量小的时候或者逻辑处理不复杂的话可以使用前端分页) 服务器分页:每次只查询当前页面加载所需要 ...

  6. BootStrap table使用

    bootstrap table git address https://github.com/wenzhixin/bootstrap-table 引入文件 <link rel="sty ...

  7. JS组件系列——表格组件神器:bootstrap table

    前言:之前一直在忙着各种什么效果,殊不知最基础的Bootstrap Table用法都没有涉及,罪过,罪过.今天补起来吧.上午博主由零开始自己从头到尾使用了一遍Bootstrap Table ,遇到不少 ...

  8. JS组件系列——表格组件神器:bootstrap table(三:终结篇,最后的干货福利)

    前言:前面介绍了两篇关于bootstrap table的基础用法,这章我们继续来看看它比较常用的一些功能,来个终结篇吧,毛爷爷告诉我们做事要有始有终~~bootstrap table这东西要想所有功能 ...

  9. JS组件系列——Bootstrap Table 冻结列功能IE浏览器兼容性问题解决方案

    前言:最近项目里面需要用到表格的冻结列功能,所谓“冻结列”,就是某些情况下表格的列比较多,需要固定前面的几列,后面的列滚动.遗憾的是,bootstrap table里自带的fixed column功能 ...

随机推荐

  1. [xdoj1029]求解某个数的最高位和最低位

    解题关键: 1.最高位求法 long long int x=n^m; 式子两边同时取lg lg(x)=m*lg(n): x=10^(m*lg(n)): 10的整数次方的最高位一定是1,所以x的最高位取 ...

  2. UE mac版16.10.0.22破解

    http://bbs.feng.com/read-htm-tid-10828753.html 去官网下载原载,先运行一次,再在终端里执行下面代码就可以破解完成! printf '\x31\xC0\xF ...

  3. 项目一:第一天 1、项目概述 2、环境搭建(重点) 3、Jquery Easyui 前端UI框架 4、Jquery Ztree 树形插件使用

    1.项目环境 注:添加jar包直接在common_parent里面添加. 搭建数据库 create tablespace bos317space datafile 'c:\ bos317.dbf'   ...

  4. cookie 、Session 和自定义分页

    cookie cookie的由来 大家都知道Http协议是无状态的. 无状态的意思 是每次请求都是独立的,它的执行情况和结果与前面的请求和之后的请求都无直接关系, 他不会受前面的请求响应情况直接影响, ...

  5. 《鸟哥的Linux私房菜》读书笔记3

    1. bash shell变量设定: name=myname,(不加空格) echo $name 注意: 若myname中有空格,则用单引号或者双引号("内特殊字符保留变量特性,'内特殊字符 ...

  6. 使用VS Code配合Remote Development插件连接远程服务器(Mac/Linux+Windows) | Using VS Code with Remote Development Connect to Remote Server (Mac/Linux+Windows)

    最新版VS Code(2019年6月)出了一系列新的插件,包括Remote Development,Remote SSH等,使得用户可以使用VS Code远程连接服务器写代码,方便了协同工作.具体配置 ...

  7. cookie中存取中文字符

    1.存入中文: Cookie c = new Cookie("username", java.net.URLEncoder.encode(name,"utf-8" ...

  8. CAS客户端整合(四)-- Cacti

    Cacti 是一套纯 lnmp 搭建的服务器监控系统,用 SNMP 抓取数据,RRDTool 绘制表格 登录流程 Cacti 的登录同样是先判断session,再尝试从 cookie 读取 sessi ...

  9. OC 中的 weak 属性是怎么实现的?

    OC 中的 weak 属性是怎么实现的,为什么在对象释放后会自动变成 nil?本文对这个问题进行了一点探讨.环境 mac OS Sierra 10.12.4 objc709参考答案 搜索后发现runt ...

  10. Maven中常用插件的配置

    在Maven项目的pom.xml文件中配置插件信息,使用<build></build>标签 1.配置JDK版本插件和Tomcat版本插件 <build> <! ...