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. uva 10934 Dropping water balloons

    你有k个一模一样的水球,在一个n层楼的建筑物上进行测试,你想知道水球最低从几层楼往下丢可以让水球破掉.由于你很懒,所以你想要丢最少次水球来测出水球刚好破掉的最低楼层.(在最糟情况下,水球在顶楼也不会破 ...

  2. ASP.NET MVC 小牛之旅4:ASP.NET MVC的运行生命周期

    ASP.NET MVC的运行生命周期大致分成三大过程:(1)网址路由对比. (2)运行Controller与Action. (3)运行View并回传结果. 4.1网址路由对比 当iis收到http请求 ...

  3. CentOS7 LVM磁盘扩容

    1:创建磁盘分区(注意红色命令部分) [root@hongyin-test- ~]# fdisk /dev/sda Welcome to fdisk (util-linux ). Changes wi ...

  4. Java面向对象的三大特性 多态

    多态 对象的多种形态 继承是实现多态的基础 1,引用多态    父类的引用可以指向本类的对象    父类的引用可以指向子类的对象 2,方法多态    创建本类对象时,调用的方法为本类方法    创建子 ...

  5. PHP现阶段发现的不足点

    1.php测试单元的实现(参考文档:https://blog.csdn.net/weixin_41282397/article/details/85052015)

  6. Java实例练习——java实现自动生成长度为10以内的随机字符串(可用于生成随机密码)

    package sorttest; import java.util.ArrayList; import java.util.Collections; import java.util.List; i ...

  7. Docker 容器的数据卷

    数据卷的特点: 1. 数据卷在容器启动时初始化,如果容器使用的镜像在挂载点包含了数据,这些数据会拷贝到新初始化的数据卷中 2. 数据卷可以在容器之间共享和重用 3. 可以对数据卷里的内容直接进行修改 ...

  8. luogu 3806 【模板】点分治

    luogu 3806 [模板]点分治 给定一棵有n个点的树,有m个询问,每个询问树上距离为k的点对是否存在.树的权值最多不超过c.n<=10000,m<=100,c<=1000,K& ...

  9. 【BZOJ4144】[AMPPZ2014]Petrol(最短路+最小生成树+并查集)

    Description 给定一个n个点.m条边的带权无向图,其中有s个点是加油站. 每辆车都有一个油量上限b,即每次行走距离不能超过b,但在加油站可以补满. q次询问,每次给出x,y,b,表示出发点是 ...

  10. Centos下搭建nginx反向代理

    上一节已经用编译的方式搭建好了一个nginx,链接在下面 https://www.toutiao.com/i6693130510777975300/ 然后这次我们把上次搭建好的nginx作为反向代理的 ...