bootstrap Table的 一些小操作
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的 一些小操作的更多相关文章
- JS组件系列——Bootstrap Table 表格行拖拽(二:多行拖拽)
前言:前天刚写了篇JS组件系列——Bootstrap Table 表格行拖拽,今天接到新的需要,需要在之前表格行拖拽的基础上能够同时拖拽选中的多行.博主用了半天时间研究了下,效果是出来了,但是感觉不尽 ...
- C# Bootstrap table之 分页
效果如图: 一.声明talbe <div class="container"> <table id="table" class="t ...
- 使用【 ajax 】【 bootstrap 】显示出小窗口 详情内容 一些代码意思可以参考下一个文章
使用[ bootstrap ]显示出小窗口 详情内容 显示页面 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional// ...
- [转]C# Bootstrap table之 分页
本文转自:https://www.cnblogs.com/zhangjd/p/7895453.html 效果如图: 一.声明talbe <div class="container&qu ...
- bootstrap table分页(前后端两种方式实现)
bootstrap table分页的两种方式: 前端分页:一次性从数据库查询所有的数据,在前端进行分页(数据量小的时候或者逻辑处理不复杂的话可以使用前端分页) 服务器分页:每次只查询当前页面加载所需要 ...
- BootStrap table使用
bootstrap table git address https://github.com/wenzhixin/bootstrap-table 引入文件 <link rel="sty ...
- JS组件系列——表格组件神器:bootstrap table
前言:之前一直在忙着各种什么效果,殊不知最基础的Bootstrap Table用法都没有涉及,罪过,罪过.今天补起来吧.上午博主由零开始自己从头到尾使用了一遍Bootstrap Table ,遇到不少 ...
- JS组件系列——表格组件神器:bootstrap table(三:终结篇,最后的干货福利)
前言:前面介绍了两篇关于bootstrap table的基础用法,这章我们继续来看看它比较常用的一些功能,来个终结篇吧,毛爷爷告诉我们做事要有始有终~~bootstrap table这东西要想所有功能 ...
- JS组件系列——Bootstrap Table 冻结列功能IE浏览器兼容性问题解决方案
前言:最近项目里面需要用到表格的冻结列功能,所谓“冻结列”,就是某些情况下表格的列比较多,需要固定前面的几列,后面的列滚动.遗憾的是,bootstrap table里自带的fixed column功能 ...
随机推荐
- sklearn解决过拟合的例子
Learning curve 检视过拟合 sklearn.learning_curve 中的 learning curve 可以很直观的看出我们的 model 学习的进度, 对比发现有没有 overf ...
- p1516&poj1061&bzoj1477 青蛙的约会
传送门(洛谷) 题目 两只青蛙在网上相识了,它们聊得很开心,于是觉得很有必要见一面.它们很高兴地发现它们住在同一条纬度线上,于是它们约定各自朝西跳,直到碰面为止.可是它们出发之前忘记了一件很重要的事情 ...
- 查询字符串中防止SQL注入
写SQL语句时,为了防止SQL注入, 通常做如下处理 strSearch.ToLower.Replace("--", " ").Replace(" - ...
- java多线程系列:ThreadPoolExecutor
ThreadPoolExecutor自定义线程池 开篇一张图(图片来自阿里巴巴Java开发手册(详尽版)),后面全靠编 好了要开始编了,从图片中就可以看到这篇博文的主题了,ThreadPoolExec ...
- C#文件监控工具(对追加内容的监控并输出)
C#文件监控(对追加内容的监控并输出),适合监控某个目录下的日志文件(log),开发初衷是linux上部署在jexus部署网站后想实时输出jexus的log和自己站点的log文件(已经测试通过在mon ...
- [转]centos7.2 下 nginx 开机启动
1.在系统服务目录里创建nginx.service文件 vi /lib/systemd/system/nginx.service 内容如下 [Unit] Description=nginx After ...
- 2017-10-3 清北刷题冲刺班p.m
a [问题描述]你是能看到第一题的 friends 呢.——hja给你一个只有小括号和中括号和大括号的括号序列,问该序列是否合法.[输入格式]一行一个括号序列.[输出格式]如果合法,输出 OK,否则输 ...
- 接水果(fruit)——整体二分+扫描线
题目 [题目描述] 风见幽香非常喜欢玩一个叫做 osu! 的游戏,其中她最喜欢玩的模式就是接水果.由于她已经 DT FC 了 The big black,她觉得这个游戏太简单了,于是发明了一个更加难的 ...
- this android sdk requires android developer toolkit version
this android sdk requires android developer toolkit version 10.0.0 or above. current version is 8.0. ...
- Maven中如何利用继承创建web项目(分层开发)
1.创建父项目parent 新建——Maven Project——勾选Create a Simple Project(skip archetype selected)——填写parent坐标,注意打包 ...