关注
分享
文章平均质量分 63
Bootstrap 是快速开发 Web 应用程序的前端工具包。它是一个 CSS，HTML 和 JS 的集合，它使用了最新的浏览器技术，给你的 Web 开发提供了时尚的版式，表单，buttons，表格，网格系统等等。
别团等shy哥发育
硕士在读，对分布式、中间件、容器、微服务、深度学习、机器学习与数据挖掘方面感兴趣，希望可以在这些方面和大家交流学习方法。
后续文章会搬到这里：www.codeleader.top
展开
-
Bootstrap-table修改行的背景色
1、修改行的背景色伪代码rowStyle:function(row,index){ var classes = ['active', 'success', 'info', 'warning', 'danger']; if (这里写你自己的业务判断逻辑){ return{ //在本例也根据需求改动 classes:原创 2021-04-20 23:47:07 · 684 阅读 · 0 评论 -
summernote富文本编辑器基本使用
summernote富文本编辑器的基本使用一、简介二、下载：三、基本使用：1、引入js/css2、建立一个div3、用 js初始化操作4、上传图片的Controller5、过去编辑器内容的代码:6、为编辑器赋值的方法：7、效果展示：四、总结一、简介Summernote 是一个简单灵活的所见即所得的 HTML 在线编辑器,基于 jQuery 和 Bootstrap 构建,支持快捷键操作,提供大量可定制的选项。二、下载：官网下载地址：https://github.com/summernote/summe原创 2021-04-08 00:00:10 · 1508 阅读 · 0 评论 -
zTree实现树形结构菜单
文章目录一、简介二、前端渲染效果三、实现步骤1、数据库表结构2、引入zTree插件3、树形结构实体类SysModule4、表示层代码5、js渲染部分1、树初始化配置2、加载数据树4、控制器关键代码5、业务逻辑层代码:6、数据访问层代码:四、碰到的bug及解决方案1、指定结点选中无效2、mybatis多对多关系的处理较为麻烦一、简介zTree 是一个依靠 jQuery 实现的多功能 “树插件”。优异的性能、灵活的配置、多种功能的组合是 zTree 最大优点。官方文档：http://www.treejs.原创 2021-03-26 00:06:10 · 1379 阅读 · 0 评论 -
laydate插件实现时间选择器
文章目录一、前言：二、年选择器：1、引入js和css文件：2、写一个input标签：3、执行一个laydate实例4、页面效果：三、年月选择器1、替换type属性2、页面效果：四、碰到的bug1、每次都会有上次输入的痕迹，影响第二次的输入2、实现点击即选中一、前言：layDate 在 layui 2.0 的版本中迎来一次重生。无论曾经它给你带来过多么糟糕的体验，从今往后，所有的旧坑都将弥合。全面重写的 layDate 包含了大量的更新，其中主要以：年选择器、年月选择器、日期选择器、时间选择器、日期时间选原创 2021-03-21 20:58:09 · 717 阅读 · 0 评论 -
Bootstrap-table的客户端分页渲染表格
文章目录一、前言：1、服务端分页地址：2、下载地址：二、客户端分页步骤:1、table标签:2、js渲染：2.1、表格初始化2.2、页脚格式化处理:3、后端处理:4、前端页面渲染效果:一、前言：具有单选，复选框，排序，分页，扩展和其他添加功能的扩展Bootstrap表1、服务端分页地址：https://blog.csdn.net/qq_43753724/article/details/1120745572、下载地址：https://download.csdn.net/download/qq_43原创 2021-03-20 21:05:56 · 793 阅读 · 0 评论 -
利用bootstrap-table插件自带的打印功能打印表格
文章目录1、前端代码：2、前端页面：1、表格数据展示2、点击打印按钮之后:3、插件下载地址：4、碰到的bug1、前端代码：<link href="https://unpkg.com/bootstrap-table@1.18.2/dist/bootstrap-table.min.css" rel="stylesheet"><script src="https://unpkg.com/bootstrap-table@1.18.2/dist/bootstrap-table.min.js"原创 2021-03-17 17:16:51 · 3923 阅读 · 0 评论 -
printThis前端打印插件
文章目录一、前言:1、特征2、插件下载地址：二、用法：1、所有配置:三、示例代码：1、jsp代码：2、 js部分：3、前端页面：四、bug1、设置的pageTitle属性无效一、前言:一款打印jQuery插件1、特征打印特定的和多个DOM元素保留页面CSS /样式**或添加新CSS；世界是你的牡蛎！保留表单条目画布支持2、插件下载地址：https://download.csdn.net/download/qq_43753724/15850787?spm=1001.2014.3001.原创 2021-03-17 16:55:49 · 2996 阅读 · 2 评论 -
bootstrap-suggest插件处理复杂对象时的解决方案
文章目录一、问题描述：二、解决办法：后端代码:jsp页面：js代码渲染：实现效果：一、问题描述：在用bootstrap-suggest插件的时候，如果要提示的属性中有关联对象的话，前端页面显示不出来(下面的areaId属性加载不出来)wellInfo类关键属性:public class WellInfo { private String wellId; private Area area; private String wellType; private原创 2021-03-16 15:46:48 · 1555 阅读 · 0 评论 -
Echarts异步加载和更新
文章目录一、前言二、 代码实现步骤1、引入插件2、为 ECharts 准备 一个DOM 容器。3、通过 echarts.init 方法初始化一个echarts 实例4、异步加载数据三、渲染之后的效果四、bug及解决方案1、生成图形不适配外层div：2、在数据更新时没有清除上一次的旧数据第一种：可以采取在setOption后面加一个参数来解决问题：第二种：在每次更新之前，先调用clear方法3、如果前端传递过来的集合为空，页面不变化一、前言实现异步数据的更新非常简单，在图表初始化后不管任何时候只要通过 j原创 2021-03-13 20:39:50 · 756 阅读 · 0 评论 -
Hplus框架动态添加选项卡功能(扩展)
文章目录一、前言二、代码如下：1、随便写个按钮2、调用openTabPage()三、实现效果：1、点击测试选项卡按钮2、可以看到确实动态添加了一个选项卡并打开了新页面四、感谢openTabPage函数源码的作者：一、前言hplus框架确实是后端开发人员的福音，但是有很多功能没有实现，我根据网上大神的做法，实现了动态添加选项卡来打开新页面的功能。二、代码如下：1、随便写个按钮<div class="row"> <button class="b原创 2021-03-10 16:17:04 · 826 阅读 · 0 评论 -
POI结合bootstrap-fileinput上传Excel内容到数据库
文章目录一、准备工作1、POI依赖2、bootstrap-fileinput插件下载:二、代码部分1、前端代码:2、javascript渲染部分:3、Controller层:4、Service:5、Service实现类:6、Dao层代码:三、实现效果:1、准备导入的excel数据：2、在前端页面中导入该文件:3、查看数据库是否更新了数据:一、准备工作1、POI依赖如果是maven项目，在pom.xml中添加下面的依赖： <!--POI 实现Excel的导入导出--> <d原创 2021-03-03 16:30:31 · 547 阅读 · 1 评论 -
bootstrap-fileinput插件实现文件上传
文章目录一、准备二、使用示例1、引入响应的js和css文件2、批量导入前端代码三、效果展示：一、准备源码下载地址:https://github.com/kartik-v/bootstrap-fileinputDemo地址:https://plugins.krajee.com/file-input/demo中文文档:http://www.bootstrap-fileinput.com/下载好的目录如下图：将该文件引入到项目中二、使用示例1、引入响应的js和css文件 <link hr原创 2021-03-03 16:05:50 · 1497 阅读 · 0 评论 -
bootstrap-suggest插件
文章目录一、bootstrap-suggest1.1 功能说明1.2 实现效果：1.3 方法调用1.4 事件监听1.5 完整代码实现：1.5.1 前端关键代码：1.5.2 js代码：1.5.3 Controller层：配置参数如下:一、bootstrap-suggest这是一个基于 bootstrap 按钮式下拉菜单组件的搜索建议插件，必须使用于按钮式下拉菜单组件上。示例地址：http://lzw.me/pages/demo/bootstrap-suggest-plugin/demo/插件源码：ht原创 2021-02-22 20:24:33 · 3875 阅读 · 4 评论 -
bootstrap-table数据导出Excel 、JSON、txt、pdf等
API地址：https://examples.bootstrap-table.com/#options/server-side-pagination.htmltableExport源码下载地址：https://github.com/hhurz/tableExport.jquery.pluginbootstrap-table下载地址:https://github.com/wenzhixin/bootstrap-table一、引入js源码:<!--bootstrap-table及数据导出相关 --原创 2021-01-10 00:32:18 · 3348 阅读 · 1 评论 -
BootStrap-table刷新按钮与搜索框高度问题
一、问题描述二、解决方案：在文档开头加一句：<!DOCTYPE html>三、最终效果：四、HTML <!DOCTYPE> 声明1、标签定义及使用说明：<!DOCTYPE> 声明位于文档中的最前面的位置，处于 <html> 标签之前。<!DOCTYPE> 声明不是一个 HTML 标签；它是用来告知 Web 浏览器页面使用了哪种 HTML 版本。在 HTML 4.01 中，<!DOCTYPE> 声明需引用 DTD原创 2021-01-09 21:33:14 · 444 阅读 · 0 评论 -
BootStrap-table插件添加toolbar工具栏
1、实现效果2、定义id="toolbar"的容器(id可以自定义) <div class="row" id="toolbar"> <div class="col-sm-3"> <button class="btn btn-w-m btn-primary glyphicon glyphicon-plus" data-toggle="原创 2021-01-03 14:10:46 · 4565 阅读 · 0 评论 -
bootstrap-table插件实现分页(服务端分页)
前端html部分<%--商品列表显示--%> <div class="ibox-content table-responsive"> <table id="table" class="table" data-click-to-select="true"> </table> </div>js部分$(function () {原创 2021-01-01 22:26:30 · 1439 阅读 · 0 评论