BootStrap Table：列参数
2024-06-10 07:17:19
官方文档地址：http://bootstrap-table.wenzhixin.net.cn/zh-cn/documentation/
列参数
表格的列参数定义在 jQuery.fn.bootstrapTable.columnDefaults 。
名称 标签 类型 默认 描述 radio data-radio Boolean FALSE 设置为 True 在列前添加一个固定宽度的 单选按钮 checkbox data-checkbox Boolean FALSE 设置为 True 在列前添加一个固定宽度的 复选框 field data-field String undefined 列的名称 title data-title String undefined 列的标题 titleTooltip data-title-tooltip String undefined 列标题的提示文本，支持HTML 属性 class class / data-class String undefined 设置列的 class 属性 rowspan rowspan / data-rowspan Number undefined 设置一个单元格可以占多少行 colspan colspan / data-colspan Number undefined 设置一个单元格可以占多少列 align data-align String undefined 单元格中的数据水平方向的位置，'left', 'right', 'center' halign data-halign String undefined 列头中的数据水平方向的位置 ，'left', 'right', 'center' falign data-falign String undefined 列尾中的数据水平方向的位置 ，'left', 'right', 'center' valign data-valign String undefined 单元格中的数据垂直方向的位置， 'top', 'middle', 'bottom' width data-width Number {Pixels or Percentage} undefined 设置列的宽度，可以使用像素或百分比 sortable data-sortable Boolean FALSE 设置为 True 允许对列进行排序 order data-order String 'asc' 默认的排序方式，'asc' or 'desc'. visible data-visible Boolean TRUE Table模式设置为 False 会隐藏列的内容 cardVisible data-card-visible Boolean TRUE Card模式设置为 False 会隐藏列的内容 switchable data-switchable Boolean TRUE 设置为 False 将禁止对列进行隐藏展示切换 clickToSelect data-click-to-select Boolean TRUE 设置为 True 点击列的时候选中单选按钮或者复选框 formatter data-formatter Function undefined 设置该列数据的格式 footerFormatter data-footer-formatter Function undefined 设置该列列脚的数据格式 events data-events Object undefined 设置单元格的事件监听器，包含4个参数
event：jquery事件
value：监听列的当前单元格的值
row：当前行完整内容
index：当前行的索引值sorter data-sorter Function undefined 自定义排序方法，包含两个参数
a：单元格A的数据
b：单元格B的数据sortName data-sort-name String undefined 自定义指定一个其他的列名，并通过这一列的值对当前列进行排序 cellStyle data-cell-style Function undefined 指定单元格的样式，包含3个参数
value:列名称
row:行数据
index:行号searchable data-searchable Boolean TRUE 设置为 True 搜索时可以对本列的内容进行搜索 searchFormatter data-search-formatter Boolean TRUE 设置为 True 使用格式化数据进行搜索 escape data-escape Boolean FALSE 设置为 True 转义特殊字符 showSelectTitle data-show-select-title Boolean FALSE 设置为 True 显示包含 'radio' 、'singleSelect' 'checkbox'选项的列
应用示例
$('#example_table').bootstrapTable({showHeader: true,showFooter: true,showColumns: true,showRefresh: true,showToggle: true,showPaginationSwitch: true,showFullscreen: true,search: true,data: [{"id": 89757,"name": "姬如雪","deptName": "幻音坊","level": 24},{"id": 89756,"name": "叶星云","deptName": "天元神宗","level": 31},{"id": 89755,"name": "唐三","deptName": "史莱克学院","level": 33}],columns: [{field: 'column_radio',radio: true,title: '单选列',titleTooltip: '请选择一项',showSelectTitle: true,clickToSelect: true,class: 'class_radio',footerFormatter: function(data) {return '<div style="color:red;">统计信息</div>';},width: '100px'},{field: 'column_hidden',title: '隐藏列',titleTooltip: '你看不见我',visible: false,cardVisible: false,formatter: function(value, row, index) {return index;}},{field: 'id',title: '员工编号',rowspan: 1,colspan: 1,align: 'left',halign: 'center',falign: 'right',valign: 'middle',sortable: true,switchable: false,order: 'asc',sortName: 'level',sorter: function(a, b) {alert(a);return a - b;},cellStyle: function cellStyle(value, row, index, field) {return {classes: 'text-nowrap another-class',css: {"color": "blue","font-size": "20px"}}},escape: false},{field: 'name',title: '员工姓名',searchable: false},{field: 'deptName',title: '所属部门'},{field: 'level',title: '武功等级'},{field: 'column_operate',title: '操作',formatter: function(value, row, index) {return '<a href="javascript:void(0);" class="say_hi">点我</a>';},events: {'click .say_hi': function(e, value, row, index) {alert(row.name + ' 你好');}}}] });
BootStrap Table：列参数相关推荐
- bootstrap table 列拖动变宽
需要导入 colResizable-1.6.min.js /**_ _____ _ _ _ | | __ \ (_) | | | | ___ ___ | | |__) |___ ___ _ _____ ...
- Bootstrap Table列宽拖动的方法
Bootstrap Table可拖动列,需要用到它的Resizable扩展插件 需要引入 bootstrap-table扩展插件 bootstrap-table-resizable.js 这个插件还依 ...
- Bootstrap table列内容过长，显示固定长度，超过内容隐藏
今天在使用bootstrap的时候,某一列的内容长度过于长,导致table表格显示错位,非常的不美观,因此,觉得想一个办法,将其所在列的宽度设置为定值,令其超过指定长度的时候,隐藏超过指定 ...
- bootstrap-table 列属性_Bootstrap Table 列参数columns使用总结
$('#workTable').bootstrapTable({ striped:true, //显示条纹表格 pagination: true, //显示表格分页组件 pageList: [1, 3 ...
- [转]bootstrap table 动态列数
原文地址:https://my.oschina.net/u/2356355/blog/1595563 据说bootstrap table非常好用,从入门教程中了解到它的以下主要功能: 由于固定表头意味 ...
- java导出Excel(POI模式 Ajax下载 Post传参) bootstrap table getVisibleColumns获取显示的列
工具类 (正式使用) package com.qyj.utils;import com.alibaba.fastjson.JSONArray; import com.alibaba.fastjson. ...
- BootStrap Table：表格参数
官方文档地址:http://bootstrap-table.wenzhixin.net.cn/zh-cn/documentation/ 引入BootStrap Table 引入 bootstrap.c ...
- bootstrap table 动态列数据加载（一）
bootstrap table 动态列数据加载(一) 我想把所有的收费项目作为表头,不固定死收费项目,数据库中有啥就显示啥. 动态数据加载时,不能用bean的嵌套,源码中加载表头和数据是分开的,第几列 ...
- 前端：bootstrap table表格属性、列属性、事件、方法
目录 一.使用前提 二.基本属性 列参数 事件 方法 多语言 一.使用前提 1. 在html中引用table相应的包 <link rel="stylesheet" ...
最新文章
- 8种Nosql数据库系统对比
- 杂谈--DML触发器学习
- KickStart 无人值守安装系统
- linux 文件类型 管理,Linux的文件类型及用户管理
- DAO(Data Access Object ，数据访问对象)设计模式
- 重学TCP协议（9） 半连接队列、全连接队列
- 使用nginx代理，怎么获取真实的IP
- Python学习二：词典基础详解
- IIS 无法显示图片
- 复合页( Compound Page )
- 目标检测|YOLOv2原理与实现(附YOLOv3)
- Sprint 敏捷开发
- 让IPFS星际文件系统永久保存你的数据
- 2020牛客暑期多校训练营（第九场） Groundhog and Gaming Time
- MySQL知识点整理汇总
- Failed to connect to server(code:1006)
- Linux: 关于 SIGCHLD 的更多细节
- ULONG_PTR与ULONG
- no implicit conversion of nil into String
- 叮~请查收关联名师博客汇总地址哦