bootstrap Table的一些小操作
时间:2019-04-07
本文章向大家介绍bootstrap Table的一些小操作,主要包括bootstrap Table的一些小操作使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
本文实例为大家分享了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值的总和,后端分页的话则是当页数据的总和。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
- 分布式监控系统Zabbix3.2监控数据库的连接数
- 分布式监控系统Zabbix3.2给异常添加邮件报警
- 分布式监控系统Zabbix3.2跳坑指南
- 一图看懂java内存模型
- 零代码如何打造自己的实时监控预警系统
- 一步一步在Windows中使用MyCat负载均衡 上篇
- 你真的会玩SQL吗?之逻辑查询处理阶段
- javascript中如何正确将日期(Date)字符串转换为日期(Date)对象?
- 全面迎接.Net3.0时代的到来(WCF/WF/WPF/LINQ)
- SQL Server 2005 正则表达式使模式匹配和数据提取变得更容易
- [基础]datagridview绑定数据源的几种常见方式
- c#:winform鼠标拖动窗口大小时,设定窗口最小尺寸
- 在非SqlServer数据库上实现MemberShip和Role功能(自定义MemberShipProvider和RoleProvider)
- 一种实用的表格行鼠标点击高亮效果
- HTML 教程
- HTML 简介
- html div 标签介绍
- html span 标签介绍
- html a 超链接标签
- HTML Br换行标签介绍
- HTML P段落标签介绍
- HTML br与p标签区别
- Html H 标题标签
- html px em pt长度单位
- HTML form 标签
- HTML radio 单选框
- HTML B 加粗标签
- HTML strong加粗粗体标签
- HTML em 强调标签
- HTML i 斜体标签
- HTML u下划线标签
- HTML s 删除线标签
- Html img 图片标签
- Html上标注sup与下标注sub标签
- HTML nobr 禁止换行标签
- HTML hr 水平线标签
- HTML label 标签
- HTML input 标签
- HTML textarea 标签
- HTML select下拉列表标签
- HTML checkbox 多选框
- HTML font color 标签
- HTML iframe 框架标签
- HTML Table 表格
- HTML dl dt dd 标签
- HTML ol li有序列表标签
- HTML ul li 无序列表标签
- HTML 注释
- CSS 教程
- CSS 简介
- CSS 语法
- CSS Id 和 Class选择器
- CSS 样式的创建
- CSS background 背景介绍
- CSS 文本样式
- CSS font 字体
- CSS A 链接
- CSS ul ol列表样式
- CSS TABLE 样式
- CSS 框模型
- CSS border 边框
- CSS Outlines 轮廓
- CSS 外边距 Margin
- CSS Padding 内边距
- CSS 分组和嵌套选择器
- CSS 尺寸 (Dimension)
- CSS Display 属性
- CSS Position 定位
- CSS Float 浮动
- CSS 水平对齐(Horizontal Align)
- CSS 组合选择符
- CSS 伪类
- CSS 伪元素
- CSS 导航栏
- CSS 下拉菜单
- CSS 图片廊
- CSS 图像透明/不透明
- CSS sprite 图像拼合技术
- CSS 媒体类型
- CSS 属性选择器
- CSS 实例