Bootstrap定义操作列

直接粘贴代码如下:

$('#tb_advice').bootstrapTable({
                    data: indexList,
                    columns: [{
                        checkbox: true
                    }, {
                        field: 'id',
                        title: '编号'
                    }, {
                        field: 'colName',
                        title: '列名'
                    }, {
                        field: 'maxVal',
                        title: '最大值'
                    }, {
                        field: 'minVal',
                        title: '最小值'
                    },{
                        field: 'avlVal',
                        title: '平均值'
                    },{
                        field: 'advices',
                        title: '建议'
                    },{
                        field: 'reason',
                        title: '理由'
                    },{
                        field: '#',
                        title: '操作',
                        align:'center',
                        formatter:function(value,row,index){
                            return "<a href='javascript:;' onclick='goto(\""+row.colName+"\")'>删除</a> <a href='javascript:;' onclick='fill(\""+row.colName+"\")'>填充</a>"
                        }
                    }, ],
                });

效果图如下:
这里写图片描述

### 实现 Bootstrap 表格中操作固定 为了实现在 Bootstrap 表格中的操作固定,可以采用自定义扩展的方式来修改默认行为。官方文档提供了左侧固定的例子[^1],但对于右侧的固定,则需要额外处理。 #### HTML 结构设置 确保引入必要的 CSS 和 JavaScript 文件: ```html <link rel="stylesheet" href="path/to/bootstrap.min.css"> <link rel="stylesheet" href="path/to/bootstrap-table.css"> <link rel="stylesheet" href="path/to/bootstrap-table-fixed-columns.css"> <script src="path/to/jquery.min.js"></script> <script src="path/to/bootstrap.min.js"></script> <script src="path/to/bootstrap-table.js"></script> <script src="path/to/bootstrap-table-fixed-columns.js"></script> ``` 这些资源文件对于构建带有固定功能的表格至关重要[^2]。 #### 初始化配置 创建一个基本的 `table` 元素并应用特定属性以启用固定特性: ```html <table id="fixedTable" data-toggle="table" data-height="400" data-show-columns="true" data-search="true" data-pagination="true" data-side-pagination="server" data-page-list="[5, 10, 20]" data-id-field="id" data-url="/data.json"> <thead> <tr> <!-- 定义表头 --> <th data-field="state" data-checkbox="true"></th> <th data-field="name">Name</th> ... <th data-field="operate" class="fixed-column-right">Operate</th> <!-- 设置为固定右边栏 --> </tr> </thead> </table> ``` 注意,在最后一上添加了 `class="fixed-column-right"` 类用于标记该为需固定的右侧行动按钮[^3]。 #### 自定义样式调整 为了让最右侧的操作保持不动,还需要编写一些定制化的CSS规则覆盖原有布局逻辑: ```css .fixed-column-right { position: absolute; right: 0px; background-color: white; } .table-scrollable tbody tr td:nth-last-child(2), .table-scrollable thead th:last-child { z-index: 999 !important; } ``` 上述代码片段通过绝对定位方式使指定类名下的单元格脱离正常流,并将其锁定于视窗边缘位置;同时提高z轴索引值防止被其他内容遮挡。 #### 功能测试与优化 完成以上步骤之后,应该能看到当水平滚动条移动时,“操作”这一表项始终停留在窗口可见区域内不变。如果遇到任何显示异常情况,建议逐步排查HTML结构、外部依赖库版本兼容性以及浏览器渲染差异等因素的影响。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值