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

BootstrapTable处理表格

需求背景

历史项目使用 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 作为前端组件 应客户需要调整&#xff1a; 冻结前四列对于大文本文字显示部分内容&#xff0c;鼠标悬浮显示完整内容 冻结列 1、引入相关CSS,JS CSS <link rel"stylesheet" href"/css/bootstrap.min.css"> …...

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

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

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

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

Mysql COUNT() 函数详解

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

单周期CPU电路设计

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

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

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

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

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

springboot 跨域配置

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

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

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

微信小程序 覆盖组件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"…...

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

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

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

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

攻防世界 - Web - Level 3 | very_easy_sql

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

7.4.分块查找

一.分块查找的算法思想&#xff1a; 1.实例&#xff1a; 以上述图片的顺序表为例&#xff0c; 该顺序表的数据元素从整体来看是乱序的&#xff0c;但如果把这些数据元素分成一块一块的小区间&#xff0c; 第一个区间[0,1]索引上的数据元素都是小于等于10的&#xff0c; 第二…...

高等数学(下)题型笔记(八)空间解析几何与向量代数

目录 0 前言 1 向量的点乘 1.1 基本公式 1.2 例题 2 向量的叉乘 2.1 基础知识 2.2 例题 3 空间平面方程 3.1 基础知识 3.2 例题 4 空间直线方程 4.1 基础知识 4.2 例题 5 旋转曲面及其方程 5.1 基础知识 5.2 例题 6 空间曲面的法线与切平面 6.1 基础知识 6.2…...

智能仓储的未来:自动化、AI与数据分析如何重塑物流中心

当仓库学会“思考”&#xff0c;物流的终极形态正在诞生 想象这样的场景&#xff1a; 凌晨3点&#xff0c;某物流中心灯火通明却空无一人。AGV机器人集群根据实时订单动态规划路径&#xff1b;AI视觉系统在0.1秒内扫描包裹信息&#xff1b;数字孪生平台正模拟次日峰值流量压力…...

深度学习习题2

1.如果增加神经网络的宽度&#xff0c;精确度会增加到一个特定阈值后&#xff0c;便开始降低。造成这一现象的可能原因是什么&#xff1f; A、即使增加卷积核的数量&#xff0c;只有少部分的核会被用作预测 B、当卷积核数量增加时&#xff0c;神经网络的预测能力会降低 C、当卷…...

【生成模型】视频生成论文调研

工作清单 上游应用方向&#xff1a;控制、速度、时长、高动态、多主体驱动 类型工作基础模型WAN / WAN-VACE / HunyuanVideo控制条件轨迹控制ATI~镜头控制ReCamMaster~多主体驱动Phantom~音频驱动Let Them Talk: Audio-Driven Multi-Person Conversational Video Generation速…...

HarmonyOS运动开发:如何用mpchart绘制运动配速图表

##鸿蒙核心技术##运动开发##Sensor Service Kit&#xff08;传感器服务&#xff09;# 前言 在运动类应用中&#xff0c;运动数据的可视化是提升用户体验的重要环节。通过直观的图表展示运动过程中的关键数据&#xff0c;如配速、距离、卡路里消耗等&#xff0c;用户可以更清晰…...

20个超级好用的 CSS 动画库

分享 20 个最佳 CSS 动画库。 它们中的大多数将生成纯 CSS 代码&#xff0c;而不需要任何外部库。 1.Animate.css 一个开箱即用型的跨浏览器动画库&#xff0c;可供你在项目中使用。 2.Magic Animations CSS3 一组简单的动画&#xff0c;可以包含在你的网页或应用项目中。 3.An…...

使用LangGraph和LangSmith构建多智能体人工智能系统

现在&#xff0c;通过组合几个较小的子智能体来创建一个强大的人工智能智能体正成为一种趋势。但这也带来了一些挑战&#xff0c;比如减少幻觉、管理对话流程、在测试期间留意智能体的工作方式、允许人工介入以及评估其性能。你需要进行大量的反复试验。 在这篇博客〔原作者&a…...

[ACTF2020 新生赛]Include 1(php://filter伪协议)

题目 做法 启动靶机&#xff0c;点进去 点进去 查看URL&#xff0c;有 ?fileflag.php说明存在文件包含&#xff0c;原理是php://filter 协议 当它与包含函数结合时&#xff0c;php://filter流会被当作php文件执行。 用php://filter加编码&#xff0c;能让PHP把文件内容…...

离线语音识别方案分析

随着人工智能技术的不断发展&#xff0c;语音识别技术也得到了广泛的应用&#xff0c;从智能家居到车载系统&#xff0c;语音识别正在改变我们与设备的交互方式。尤其是离线语音识别&#xff0c;由于其在没有网络连接的情况下仍然能提供稳定、准确的语音处理能力&#xff0c;广…...