当前位置：首页 > news >正文

BootstrapTable处理表格

news 2025/9/16 18:20:42

需求背景

历史项目使用 BootstrapTable 作为前端组件
应客户需要调整：

冻结前四列
对于大文本文字显示部分内容，鼠标悬浮显示完整内容

冻结列

1、引入相关CSS,JS

CSS

<link rel="stylesheet" href="/css/bootstrap.min.css">
<link rel="stylesheet" href="/css/plugins/bootstrap-table/bootstrap-table.min.css">
<link rel="stylesheet" href="/editor-app/css/bootstrap-table-fixed-columns.css">

JS

<script src="/js/plugins/bootstrap-table/bootstrap-table.js"></script>
<script src="/js/plugins/bootstrap-table/bootstrap-table.min.js"></script>
<script src="/editor-app/libs/bootstrap-table-fixed-columns.js"></script>

完整示例

<!DOCTYPE html>
<html xmlns:shiro="http://www.w3.org/1999/xhtml"  xmlns:th="http://www.w3.org/1999/xhtml">
<html>
<meta charset="utf-8">
<link rel="stylesheet" href="/css/bootstrap.min.css">
<link rel="stylesheet" href="/css/plugins/bootstrap-table/bootstrap-table.min.css">
<link rel="stylesheet" href="/editor-app/css/bootstrap-table-fixed-columns.css">
<style>
</style>
<head th:include="include :: header"></head>
<body class="gray-bg"><div class="wrapper wrapper-content "><table style="width: 100%;"></table><div class="row"><div class="col-sm-12 select-table table-striped"><table id="***Table" data-mobile-responsive="true"></table></div></div></div><!--shiro控制bootstraptable行内按钮看见性  --></div><div th:include="include :: footer"></div><script src="/js/plugins/bootstrap-table/bootstrap-table.js"></script><script src="/js/plugins/bootstrap-table/bootstrap-table.min.js"></script><script src="/editor-app/libs/bootstrap-table-fixed-columns.js"></script><script type="text/javascript" src="/js/appjs/***test.js"></script>
</body>
</html>

2、对应BootstrapTable增加冻结列属性

fixedColumns: true, //是否开启冻结列
fixedNumber: 4, //冻结列数

完整示例

function load() {$('#***Table').bootstrapTable({id: "***Table",type: 0, // 0 代表bootstrapTable 1代表bootstrapTreeTablemethod: 'get', // 服务器数据的请求方式 get or posturl: prefix + "/list", // 服务器数据的加载地址exportUrl: prefix + "/export",//	showRefresh : true,//	showToggle : true,//	showColumns : true,fixedColumns: true, //是否开启冻结列fixedNumber: 4, //冻结列数iconSize: 'outline',toolbar: 'toolbar',striped: true, // 设置为true会有隔行变色效果dataType: "json", // 服务器返回的数据类型pagination: true, // 设置为true会在底部显示分页条// queryParamsType : "limit",// //设置为limit则会发送符合RESTFull格式的参数singleSelect: false, // 设置为true将禁止多选// contentType : "application/x-www-form-urlencoded",// //发送到服务器的数据编码类型pageSize: 5, // 如果设置了分页，每页数据条数pageNumber: 1, // 如果设置了分布，首页页码//search : true, // 是否显示搜索框showColumns: false, // 是否显示内容下拉框（选择显示的列）sidePagination: "server", // 设置在哪里进行分页，可选值为"client" 或者 "server"queryParams: function (params) {return {//说明：传入后台的参数包括offset开始索引，limit步长，sort排序列，order：desc或者,以及所有列的键值对limit: params.limit,offset: params.offset,year:$('#year').val(),companyName:$('#companyName').val(),};},columns: [{field: 'projectId',visible: false,},{field: 'year',title: '年度批次',halign: 'center',align: 'center',width:'73px'},{field: 'type',title: '项目类型',halign: 'center',align: 'center',width:'72px'},//........{title: '操作',field: 'id',align: 'center',formatter: function (value, row, index) {var e = '<a href="###" style="color: #00a3ff" title="编辑" οnclick="edit(\''+ row.projectId+ '\')">编辑</a> ';return e;}}]});
}

实现效果
N列固定前四列

控制大文本显示部分，鼠标悬浮显示完整内容

处理前
在这里插入图片描述

处理后
在这里插入图片描述

实现方案

在对应列增如下属性

{field: 'other',title: '其他',halign: 'center',align: 'center',cellStyle: function (value, row, index) {return {css: {"min-width": "40px","white-space": "nowrap","text-overflow": "ellipsis","overflow": "hidden","max-width": "120px"}}},formatter: function (value, row, index) {console.log(value);var span = document.createElement('span');span.setAttribute('title', value);span.innerHTML = value;return span.outerHTML;}}

BootstrapTable处理表格

需求背景历史项目使用 BootstrapTable 作为前端组件应客户需要调整： 冻结前四列对于大文本文字显示部分内容，鼠标悬浮显示完整内容冻结列 1、引入相关CSS,JS CSS <link rel"stylesheet" href"/css/bootstrap.min.css"> …...

编程日记 2025/1/2 18:36:51

UniApp 打开文件工具，获取文件类型，判断文件类型

注意：以下代码使用 typeScript 开发，如果想在 js 中使用，可参考 npm 已经发布的包：https://www.npmjs.com/package/uni-easy-file NPM 使用如果想直接在 npm 项目中使用可以直接执行以下命令 npm i uni-easy-file然后直接使用 …...

编程日记 2025/1/2 18:34:49

docker-开源nocodb，使用已有数据库

使用已有数据库创建本地数据库数据库：nocodb 用户：nocodb 密码：xxxxxx修改docker-compose.yml 默认网关的 IP 地址是 172.17.0.1（适用于 bridge 网络模式）version: "2.1" services:nocodb:environment:…...

编程日记 2025/1/2 18:33:48

Mysql COUNT() 函数详解

简介 COUNT()函数定义 COUNT()函数是SQL中常用的聚合函数 ，用于统计满足特定条件的记录数。它可以灵活地应用于各种查询场景，帮助用户快速获取所需的数据统计信息。该函数不仅能够计算所有行的数量，还能针对特定列进行计数，并支…...

编程日记 2025/1/2 18:31:40

单周期CPU电路设计

1.实验目的本实验旨在让学生通过设计一个简单的单周期 CPU 电路，深入理解 RISC-V 指令集的子集功能实现，掌握数字电路设计与实现的基本流程，包括指令解析、部件组合、电路设计以及功能仿真等环节，同时培养verilog HDL编程能力和…...

编程日记 2025/1/2 18:29:37

从零开始采用命令行创建uniapp vue3 ts springboot项目

文章目录 1，通过命令行创建uniapp vue3 ts项目2, 创建springboot后台项目3， 联调测试 1，通过命令行创建uniapp vue3 ts项目官方通过命令行创建项目的地址：https://zh.uniapp.dcloud.io/quickstart-cli.html 在执行下面操…...

编程日记 2025/1/2 18:27:34

跟着逻辑先生学习FPGA-实战篇第一课 6-1 LED灯闪烁实验

硬件平台：征战Pro开发板软件平台：Vivado2018.3 仿真软件：Modelsim10.6d 文本编译器：Notepad 征战Pro开发板资料链接:https://pan.baidu.com/s/1AIcnaGBpNLgFT8GG1yC-cA?pwdx3u8 提取码:x3u8 1 知识背景 LED，又名…...

编程日记 2025/1/2 18:23:29

方案一 Configuration public class GlobalCorsConfig {Beanpublic CorsFilter corsFilter() {//1. 添加 CORS配置信息CorsConfiguration config new CorsConfiguration();//放行哪些原始域config.addAllowedOrigin("*");//是否发送 Cookieconfig.setAllowCredenti…...

编程日记 2025/1/2 18:22:28

C语言宏和结构体的使用代码

先看代码: #include <stdio.h> #include <string.h>// 定义一个宏，用于定义结构体 #define DEFINE_STRUCT(name, type1, name1, type2, name2, size, cf) \typedef struct { \type1 name1; …...

编程日记 2025/1/2 18:17:23

微信小程序覆盖组件cover-view

wxml 覆盖组件 <video src"../image/1.mp4" controls"{{false}}" event-model"bubble"> <cover-view class"controls"> <cover-view class"play" bind:tap"play"> <cover-image class"…...

编程日记 2025/1/2 18:14:19

【Redis知识】Redis进阶-redis还有哪些高级特性？

文章目录概览1. 持久化2. 复制与高可用3. 事务和脚本4. 发布/订阅 Redis事务示例事务中的错误处理使用 WATCH 进行乐观锁总结 Redis管道一、管道的原理二、管道的特点三、管道的使用场景四、管道的实现示例五、管道的注意事项发布订阅模式一、Redis发布订阅模式介绍二、Redis…...

编程日记 2025/1/2 18:13:18

【Pytorch实用教程】深入了解 torchvision.models.resnet18 新旧版本的区别

深入了解 torchvision.models.resnet18 新旧版本的区别在深度学习模型开发中，PyTorch 和 torchvision 一直是我们不可或缺的工具。近期，torchvision 对其模型加载 API 进行了更新，将旧版的 pretrained 参数替换为新的 weights 参数。本文将介绍这一变化的背景、具体区别，…...

编程日记 2025/1/2 18:11:16

攻防世界 - Web - Level 3 | very_easy_sql

关注这个靶场的其它相关笔记：攻防世界（XCTF） —— 靶场笔记合集-CSDN博客 0x01：考点速览本关考察的是 SSRF 漏洞，需要我们结合 Gopher 协议利用服务端进行越权 SQL 注入。考点不少，总结一下主要有以下几点…...

编程日记 2025/1/2 18:09:12

使用Java Selenium修改打开页面窗口大小

在自动化测试过程中，有时需要模拟不同屏幕尺寸的用户行为，以确保网页在不同设备上的显示效果和用户体验。Selenium是一个强大的自动化测试工具，支持多种编程语言和浏览器，可以帮助我们实现这一需求。本文将详细介绍如何使用Java S…...

编程日记 2025/1/2 18:08:10

基于BiLSTM和随机森林回归模型的序列数据预测

本文以新冠疫情相关数据集为案例，进行新冠数量预测。（源码请留言或评论）首先介绍相关理论概念：序列数据特点序列数据是人工智能和机器学习领域的重要研究对象，在多个应用领域展现出独特的特征。这种数据类型的核心特点是元素之间的顺序至关重要，反映了数据内在的时…...

编程日记 2025/1/2 18:04:04

【Vim Masterclass 笔记04】S03L12：Vim 文本删除同步练习课 + S03L13：练习课点评

文章目录 L12 Exercise 03 - Deleting Text1 训练目标2 训练指引2.1 打开文件 practicedeleting.txt2.2 练习删除单个字符2.3 练习 motion：删除（Practice deleting motions）2.4 文本行的删除练习（Practice deleting lines&#xf…...

编程日记 2025/1/2 18:03:02

[AI] 深度学习的“黑箱”探索：从解释性到透明性

目录 1. 深度学习的“黑箱”问题：何为不可解释？ 1.1 为什么“黑箱”问题存在？ 2. 可解释性研究的现状 2.1 模型解释的方法 2.1.1 后置可解释性方法（Post-hoc Explanations） 2.1.2 内在可解释性方法（I…...

编程日记 2025/1/2 18:01:00

网络安全技能试题总结参考

对网络安全技能测试相关的试题进行了总结，供大家参考。一、单选题 1.(单选题)以下属于汇聚层功能的是 A.拥有大量的接口，用于与最终用户计算机相连 B.接入安全控制 C.高速的包交换 D.复杂的路由策略答案：D 2.(单选题)VLAN划分的方法，选择一个错误选项 A.基于端口…...

编程日记 2025/1/2 17:59:58

【翻译】优化加速像素着色器执行的方法

中文翻译在回复我的 Twitter 私信时，我遇到了一个关于如何提高像素/片段着色器执行速度的问题。这是一个相当广泛的问题，具体取决于每个 GPU/平台和游戏内容的特性，但我在本帖中扩展了我“头脑风暴”式的回答，以便其他人也觉得有用。这不是一份详尽的清单，更像是一个高层…...

编程日记 2025/1/2 17:58:57

赛博周刊·2024年度工具精选（图片资源类）

1、EmojiSpark emoji表情包查找工具。 2、fluentui-emoji 微软开源的Fluent Emoji表情包。 3、开源Emoji库一个开源的emoji库，目前拥有4000个emoji表情。 4、中国表情包大合集博物馆一个专门收集中国表情包的项目，已收录5712张表情包，并…...

编程日记 2025/1/2 17:57:56

HTML 语义化

目录 HTML 语义化HTML5 新特性HTML 语义化的好处语义化标签的使用场景最佳实践 HTML 语义化 HTML5 新特性标准答案： 语义化标签： <header>：页头<nav>：导航<main>：主要内容<article>&#x…...

编程新知 2025/8/7 7:40:03

MongoDB学习和应用(高效的非关系型数据库)

一丶 MongoDB简介对于社交类软件的功能，我们需要对它的功能特点进行分析： 数据量会随着用户数增大而增大读多写少价值较低非好友看不到其动态信息地理位置的查询… 针对以上特点进行分析各大存储工具： mysql：关系型数据库&am…...

编程新知 2025/9/13 17:45:27

代理篇12|深入理解 Vite中的Proxy接口代理配置

在前端开发中，常常会遇到跨域请求接口的情况。为了解决这个问题，Vite 和 Webpack 都提供了 proxy 代理功能，用于将本地开发请求转发到后端服务器。什么是代理（proxy）？代理是在开发过程中，前端项目通过开发服务器，将指定的请求“转发”到真实的后端服务器，从而绕…...

编程新知 2025/9/13 13:10:12

Hive 存储格式深度解析：从 TextFile 到 ORC，如何选对数据存储方案？

在大数据处理领域，Hive 作为 Hadoop 生态中重要的数据仓库工具，其存储格式的选择直接影响数据存储成本、查询效率和计算资源消耗。面对 TextFile、SequenceFile、Parquet、RCFile、ORC 等多种存储格式，很多开发者常常陷入选择困境。本文将从底…...

编程新知 2025/9/16 2:04:37

Fabric V2.5 通用溯源系统——增加图片上传与下载功能

fabric-trace项目在发布一年后，部署量已突破1000次，为支持更多场景，现新增支持图片信息上链，本文对图片上传、下载功能代码进行梳理，包含智能合约、后端、前端部分。一、智能合约修改为了增加图片信息上链溯源，需要对底层数据结构进行修改，在此对智能合约中的农产品数…...

编程新知 2025/8/9 23:42:13

免费数学几何作图web平台

光锐软件免费数学工具，maths,数学制图，数学作图，几何作图，几何，AR开发,AR教育,增强现实,软件公司,XR,MR,VR,虚拟仿真,虚拟现实,混合现实,教育科技产品,职业模拟培训,高保真VR场景,结构互动课件,元宇宙http://xaglare.c…...

编程新知 2025/9/12 15:03:05

比较数据迁移后MySQL数据库和OceanBase数据仓库中的表

设计一个MySQL数据库和OceanBase数据仓库的表数据比较的详细程序流程，两张表是相同的结构，都有整型主键id字段，需要每次从数据库分批取得2000条数据，用于比较，比较操作的同时可以再取2000条数据，等上一次比较完成之后，开始比较，直到比较完所有的数据。比较操作需要比较…...

编程新知 2025/9/14 5:35:46

数据库——redis

一、Redis 介绍 1. 概述 Redis（Remote Dictionary Server）是一个开源的、高性能的内存键值数据库系统，具有以下核心特点： 内存存储架构：数据主要存储在内存中，提供微秒级的读写响应多数据结构支持&…...

编程新知 2025/7/31 10:23:08

写一个shell脚本，把局域网内，把能ping通的IP和不能ping通的IP分类，并保存到两个文本文件里

写一个shell脚本，把局域网内，把能ping通的IP和不能ping通的IP分类，并保存到两个文本文件里脚本1 #!/bin/bash #定义变量 ip10.1.1 #循环去ping主机的IP for ((i1;i<10;i)) doping -c1 $ip.$i &>/dev/null[ $? -eq 0 ] &&am…...

编程新知 2025/7/20 12:18:38

Python的call 方法

在 Python 中，__call__ 是一个特殊的魔术方法（magic method），它允许一个类的实例像函数一样被调用。当你在一个对象后面加上 () 并执行时（例如 obj()），Python 会自动调用该对象的 __call__ 方法…...

编程新知 2025/7/7 23:07:44

BootstrapTable处理表格

需求背景

冻结列

1、引入相关CSS,JS

2、对应BootstrapTable增加冻结列属性

控制大文本显示部分，鼠标悬浮显示完整内容

实现方案

相关文章：

BootstrapTable处理表格

UniApp 打开文件工具，获取文件类型，判断文件类型

docker-开源nocodb，使用已有数据库

Mysql COUNT() 函数详解

单周期CPU电路设计

从零开始采用命令行创建uniapp vue3 ts springboot项目

跟着逻辑先生学习FPGA-实战篇第一课 6-1 LED灯闪烁实验

springboot 跨域配置

C语言宏和结构体的使用代码

微信小程序覆盖组件cover-view

【Redis知识】Redis进阶-redis还有哪些高级特性？

【Pytorch实用教程】深入了解 torchvision.models.resnet18 新旧版本的区别

攻防世界 - Web - Level 3 | very_easy_sql

使用Java Selenium修改打开页面窗口大小

基于BiLSTM和随机森林回归模型的序列数据预测

【Vim Masterclass 笔记04】S03L12：Vim 文本删除同步练习课 + S03L13：练习课点评

[AI] 深度学习的“黑箱”探索：从解释性到透明性

网络安全技能试题总结参考

【翻译】优化加速像素着色器执行的方法

赛博周刊·2024年度工具精选（图片资源类）

HTML 语义化

MongoDB学习和应用(高效的非关系型数据库)

代理篇12|深入理解 Vite中的Proxy接口代理配置

Hive 存储格式深度解析：从 TextFile 到 ORC，如何选对数据存储方案？

Fabric V2.5 通用溯源系统——增加图片上传与下载功能

免费数学几何作图web平台

比较数据迁移后MySQL数据库和OceanBase数据仓库中的表

数据库——redis

写一个shell脚本，把局域网内，把能ping通的IP和不能ping通的IP分类，并保存到两个文本文件里

Python的call 方法