BootStrap Table：列参数

傷城~ 2022-05-22 00:51 381阅读 0赞

> 官方文档地址：[http://bootstrap-table.wenzhixin.net.cn/zh-cn/documentation/][http_bootstrap-table.wenzhixin.net.cn_zh-cn_documentation]

# 列参数 #

> 表格的列参数定义在jQuery.fn.bootstrapTable.columnDefaults 。
> 
> <table style="table-layout:fixed;"> 
> <tbody> 
> <tr> 
> <td style="font-weight:bold;text-align:center;color:rgb(0,112,192);">名称</td> 
> <td style="font-weight:bold;text-align:center;color:rgb(0,112,192);">标签</td> 
> <td style="font-weight:bold;text-align:center;color:rgb(0,112,192);">类型</td> 
> <td style="font-weight:bold;text-align:center;color:rgb(0,112,192);">默认</td> 
> <td style="font-weight:bold;text-align:center;color:rgb(0,112,192);">描述</td> 
> </tr> 
> <tr> 
> <td style="text-align:center;vertical-align:middle;">radio</td> 
> <td style="text-align:center;vertical-align:middle;">data-radio</td> 
> <td style="text-align:center;vertical-align:middle;">Boolean</td> 
> <td style="text-align:center;vertical-align:middle;">FALSE</td> 
> <td style="vertical-align:middle;">设置为 True 在列前添加一个固定宽度的 单选按钮</td> 
> </tr> 
> <tr> 
> <td style="text-align:center;vertical-align:middle;">checkbox</td> 
> <td style="text-align:center;vertical-align:middle;">data-checkbox</td> 
> <td style="text-align:center;vertical-align:middle;">Boolean</td> 
> <td style="text-align:center;vertical-align:middle;">FALSE</td> 
> <td style="vertical-align:middle;">设置为 True 在列前添加一个固定宽度的 复选框</td> 
> </tr> 
> <tr> 
> <td style="text-align:center;vertical-align:middle;">field</td> 
> <td style="text-align:center;vertical-align:middle;">data-field</td> 
> <td style="text-align:center;vertical-align:middle;">String</td> 
> <td style="text-align:center;vertical-align:middle;">undefined</td> 
> <td style="vertical-align:middle;">列的名称</td> 
> </tr> 
> <tr> 
> <td style="text-align:center;vertical-align:middle;">title</td> 
> <td style="text-align:center;vertical-align:middle;">data-title</td> 
> <td style="text-align:center;vertical-align:middle;">String</td> 
> <td style="text-align:center;vertical-align:middle;">undefined</td> 
> <td style="vertical-align:middle;">列的标题</td> 
> </tr> 
> <tr> 
> <td style="text-align:center;vertical-align:middle;">titleTooltip</td> 
> <td style="text-align:center;vertical-align:middle;">data-title-tooltip</td> 
> <td style="text-align:center;vertical-align:middle;">String</td> 
> <td style="text-align:center;vertical-align:middle;">undefined</td> 
> <td style="vertical-align:middle;">列标题的提示文本，支持HTML 属性</td> 
> </tr> 
> <tr> 
> <td style="text-align:center;vertical-align:middle;">class</td> 
> <td style="text-align:center;vertical-align:middle;">class / data-class</td> 
> <td style="text-align:center;vertical-align:middle;">String</td> 
> <td style="text-align:center;vertical-align:middle;">undefined</td> 
> <td style="vertical-align:middle;">设置列的 class 属性</td> 
> </tr> 
> <tr> 
> <td style="text-align:center;vertical-align:middle;">rowspan</td> 
> <td style="text-align:center;vertical-align:middle;">rowspan / data-rowspan</td> 
> <td style="text-align:center;vertical-align:middle;">Number</td> 
> <td style="text-align:center;vertical-align:middle;">undefined</td> 
> <td style="vertical-align:middle;">设置一个单元格可以占多少行</td> 
> </tr> 
> <tr> 
> <td style="text-align:center;vertical-align:middle;">colspan</td> 
> <td style="text-align:center;vertical-align:middle;">colspan / data-colspan</td> 
> <td style="text-align:center;vertical-align:middle;">Number</td> 
> <td style="text-align:center;vertical-align:middle;">undefined</td> 
> <td style="vertical-align:middle;">设置一个单元格可以占多少列</td> 
> </tr> 
> <tr> 
> <td style="text-align:center;vertical-align:middle;">align</td> 
> <td style="text-align:center;vertical-align:middle;">data-align</td> 
> <td style="text-align:center;vertical-align:middle;">String</td> 
> <td style="text-align:center;vertical-align:middle;">undefined</td> 
> <td style="vertical-align:middle;">单元格中的数据水平方向的位置，'left', 'right', 'center'</td> 
> </tr> 
> <tr> 
> <td style="text-align:center;vertical-align:middle;">halign</td> 
> <td style="text-align:center;vertical-align:middle;">data-halign</td> 
> <td style="text-align:center;vertical-align:middle;">String</td> 
> <td style="text-align:center;vertical-align:middle;">undefined</td> 
> <td style="vertical-align:middle;">列头中的数据水平方向的位置 ，'left', 'right', 'center'</td> 
> </tr> 
> <tr> 
> <td style="text-align:center;vertical-align:middle;">falign</td> 
> <td style="text-align:center;vertical-align:middle;">data-falign</td> 
> <td style="text-align:center;vertical-align:middle;">String</td> 
> <td style="text-align:center;vertical-align:middle;">undefined</td> 
> <td style="vertical-align:middle;">列尾中的数据水平方向的位置 ，'left', 'right', 'center'</td> 
> </tr> 
> <tr> 
> <td style="text-align:center;vertical-align:middle;">valign</td> 
> <td style="text-align:center;vertical-align:middle;">data-valign</td> 
> <td style="text-align:center;vertical-align:middle;">String</td> 
> <td style="text-align:center;vertical-align:middle;">undefined</td> 
> <td style="vertical-align:middle;">单元格中的数据垂直方向的位置， 'top', 'middle', 'bottom'</td> 
> </tr> 
> <tr> 
> <td style="text-align:center;vertical-align:middle;">width</td> 
> <td style="text-align:center;vertical-align:middle;">data-width</td> 
> <td style="text-align:center;vertical-align:middle;">Number {Pixels or Percentage}</td> 
> <td style="text-align:center;vertical-align:middle;">undefined</td> 
> <td style="vertical-align:middle;">设置列的宽度，可以使用像素或百分比</td> 
> </tr> 
> <tr> 
> <td style="text-align:center;vertical-align:middle;">sortable</td> 
> <td style="text-align:center;vertical-align:middle;">data-sortable</td> 
> <td style="text-align:center;vertical-align:middle;">Boolean</td> 
> <td style="text-align:center;vertical-align:middle;">FALSE</td> 
> <td style="vertical-align:middle;">设置为 True 允许对列进行排序</td> 
> </tr> 
> <tr> 
> <td style="text-align:center;vertical-align:middle;">order</td> 
> <td style="text-align:center;vertical-align:middle;">data-order</td> 
> <td style="text-align:center;vertical-align:middle;">String</td> 
> <td style="text-align:center;vertical-align:middle;">'asc'</td> 
> <td style="vertical-align:middle;">默认的排序方式，'asc' or 'desc'.</td> 
> </tr> 
> <tr> 
> <td style="text-align:center;vertical-align:middle;">visible</td> 
> <td style="text-align:center;vertical-align:middle;">data-visible</td> 
> <td style="text-align:center;vertical-align:middle;">Boolean</td> 
> <td style="text-align:center;vertical-align:middle;">TRUE</td> 
> <td style="vertical-align:middle;">Table模式设置为 False 会隐藏列的内容</td> 
> </tr> 
> <tr> 
> <td style="text-align:center;vertical-align:middle;color:rgb(0,0,0);">cardVisible</td> 
> <td style="text-align:center;vertical-align:middle;">data-card-visible</td> 
> <td style="text-align:center;vertical-align:middle;">Boolean</td> 
> <td style="text-align:center;vertical-align:middle;">TRUE</td> 
> <td style="vertical-align:middle;">Card模式设置为 False 会隐藏列的内容</td> 
> </tr> 
> <tr> 
> <td style="text-align:center;vertical-align:middle;">switchable</td> 
> <td style="text-align:center;vertical-align:middle;">data-switchable</td> 
> <td style="text-align:center;vertical-align:middle;">Boolean</td> 
> <td style="text-align:center;vertical-align:middle;">TRUE</td> 
> <td style="vertical-align:middle;">设置为 False 将禁止对列进行隐藏展示切换</td> 
> </tr> 
> <tr> 
> <td style="text-align:center;vertical-align:middle;">clickToSelect</td> 
> <td style="text-align:center;vertical-align:middle;">data-click-to-select</td> 
> <td style="text-align:center;vertical-align:middle;">Boolean</td> 
> <td style="text-align:center;vertical-align:middle;">TRUE</td> 
> <td style="vertical-align:middle;">设置为 True 点击列的时候选中单选按钮或者复选框</td> 
> </tr> 
> <tr> 
> <td style="text-align:center;color:rgb(51,51,51);">formatter</td> 
> <td style="text-align:center;color:rgb(51,51,51);">data-formatter</td> 
> <td style="text-align:center;color:rgb(51,51,51);">Function</td> 
> <td style="text-align:center;color:rgb(51,51,51);">undefined</td> 
> <td>设置该列数据的格式</td> 
> </tr> 
> <tr> 
> <td style="text-align:center;color:rgb(51,51,51);">footerFormatter</td> 
> <td style="text-align:center;color:rgb(51,51,51);">data-footer-formatter</td> 
> <td style="text-align:center;color:rgb(51,51,51);">Function</td> 
> <td style="text-align:center;color:rgb(51,51,51);">undefined</td> 
> <td>设置该列列脚的数据格式</td> 
> </tr> 
> <tr> 
> <td style="text-align:center;color:rgb(51,51,51);">events</td> 
> <td style="text-align:center;color:rgb(51,51,51);">data-events</td> 
> <td style="text-align:center;color:rgb(51,51,51);">Object</td> 
> <td style="text-align:center;color:rgb(51,51,51);">undefined</td> 
> <td>设置单元格的事件监听器，包含4个参数 event：jquery事件 value：监听列的当前单元格的值 row：当前行完整内容 index：当前行的索引值</td> 
> </tr> 
> <tr> 
> <td style="text-align:center;color:rgb(0,0,0);">sorter</td> 
> <td style="text-align:center;color:rgb(0,0,0);">data-sorter</td> 
> <td style="text-align:center;color:rgb(0,0,0);">Function</td> 
> <td style="text-align:center;color:rgb(0,0,0);">undefined</td> 
> <td style="color:rgb(0,0,0);">自定义排序方法，包含两个参数 a：单元格A的数据 b：单元格B的数据</td> 
> </tr> 
> <tr> 
> <td style="text-align:center;color:rgb(0,0,0);">sortName</td> 
> <td style="text-align:center;color:rgb(0,0,0);">data-sort-name</td> 
> <td style="text-align:center;color:rgb(0,0,0);">String</td> 
> <td style="text-align:center;color:rgb(0,0,0);">undefined</td> 
> <td style="color:rgb(0,0,0);">自定义指定一个其他的列名，并通过这一列的值对当前列进行排序</td> 
> </tr> 
> <tr> 
> <td style="text-align:center;color:rgb(0,0,0);">cellStyle</td> 
> <td style="text-align:center;color:rgb(0,0,0);">data-cell-style</td> 
> <td style="text-align:center;color:rgb(0,0,0);">Function</td> 
> <td style="text-align:center;color:rgb(0,0,0);">undefined</td> 
> <td style="color:rgb(0,0,0);">指定单元格的样式，包含3个参数 value:列名称 row:行数据 index:行号</td> 
> </tr> 
> <tr> 
> <td style="text-align:center;color:rgb(0,0,0);">searchable</td> 
> <td style="text-align:center;color:rgb(0,0,0);">data-searchable</td> 
> <td style="text-align:center;color:rgb(0,0,0);">Boolean</td> 
> <td style="text-align:center;color:rgb(0,0,0);">TRUE</td> 
> <td style="color:rgb(0,0,0);">设置为 True 搜索时可以对本列的内容进行搜索</td> 
> </tr> 
> <tr> 
> <td style="text-align:center;color:rgb(0,0,0);">searchFormatter</td> 
> <td style="text-align:center;color:rgb(0,0,0);">data-search-formatter</td> 
> <td style="text-align:center;color:rgb(0,0,0);">Boolean</td> 
> <td style="text-align:center;color:rgb(0,0,0);">TRUE</td> 
> <td style="color:rgb(0,0,0);">设置为 True 使用格式化数据进行搜索</td> 
> </tr> 
> <tr> 
> <td style="text-align:center;color:rgb(0,0,0);">escape</td> 
> <td style="text-align:center;color:rgb(0,0,0);">data-escape</td> 
> <td style="text-align:center;color:rgb(0,0,0);">Boolean</td> 
> <td style="text-align:center;color:rgb(0,0,0);">FALSE</td> 
> <td style="color:rgb(0,0,0);">设置为 True 转义特殊字符</td> 
> </tr> 
> <tr> 
> <td style="text-align:center;color:rgb(0,0,0);">showSelectTitle</td> 
> <td style="text-align:center;color:rgb(0,0,0);">data-show-select-title</td> 
> <td style="text-align:center;color:rgb(0,0,0);">Boolean</td> 
> <td style="text-align:center;color:rgb(0,0,0);">FALSE</td> 
> <td style="color:rgb(0,0,0);">设置为 True &nbsp;显示包含&nbsp;&nbsp;'radio' 、'singleSelect' 'checkbox'选项的列</td> 
> </tr> 
> </tbody> 
> </table>

# 应用示例 #

> $('#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 + ' 你好');
> }
> }
> }]
> });
> 
> 
>

[http_bootstrap-table.wenzhixin.net.cn_zh-cn_documentation]: http://bootstrap-table.wenzhixin.net.cn/zh-cn/documentation/