Bootstrap Table

解决bootstrap-table-fixed-columns.js固定的列不能排序问题

由 流过昼夜 提交于 2020-02-29 05:53:08
我们用bootstrap-table-fixed-columns插件固定列的时候，发现固定的列不能排序，其他的列是能排序的，需要修改下， 1、将插件的代码 var that = this, $trs = this.$header.find('tr').clone(); 修改为 var that = this, $trs = this.$header.find('tr').clone(true); 这样点击排序的功能是实现了，但是小图标没有变化，因为源码我也看不太明白，直接在外面写的js控制图标的变化。 2、另外写的js代码 $(".fixed-table-header-columns").on("click", "th div.sortable", function() { var sibling = $(this).parent().siblings().find("div.sortable") if (!$(this).hasClass("asc") && !$(this).hasClass("desc")) { sibling.removeClass("asc desc") $(this).addClass("desc") } else if ($(this).hasClass("asc")) { sibling.removeClass("asc desc") $(this)

Bootstrap Table 插件实现固定左侧列

由 家住魔仙堡 提交于 2020-02-29 05:52:47
Bootstrap Table 插件本身是不带固定列功能的，需要额外引用 bootstrap-table-fixed-columns.css与bootstrap-table-fixed-columns.js 但是引用这2个文件后，列有时候不对齐，用js处理下效果还好 完整的代码如下： <link rel="stylesheet" href="../../plugins/bootstrap-table-develop/src/bootstrap-table.css"> <link rel="stylesheet" href="../../plugins/bootstrap-table-develop/src/bootstrap-table-fixed-columns.css"> <table class="table-striped table-hasthead nowrap" id="tableTest1" data-search="true" data-fixed-columns="true" data-fixed-number="3"> <thead> <tr> <th></th> <th data-sortable="true">状态描述状态描述</th> <th data-sortable="true">客户号</th> <th data-sortable="true"

解决bootstrap-table-fixed-columns.js显示列与隐藏列按钮切换表格不对齐

由 橙三吉。 提交于 2020-02-29 04:54:14
<table class="table-striped table-hasthead nowrap" id="tableTest1" data-search="true" data-show-columns="true" data-fixed-columns="true" data-fixed-number="3"> </table> 含有data-show-columns="true"属性时会在右边显示可以切换列的按钮 结合bootstrap-table-fixed-columns.js插件使用时会出现列不对齐的问题 查看Dom结构发现点击一次具体列切换按钮时会增加一个class 为fixed-table-header-columns 的html片段，我们只需保留最后一个，解决方法 1、先删除多余的html 2、执行表格对齐函数 为了使排序的图标正常显示，需要在onSort的事件中执行能使图标正常显示的代码（注意如果要使固定的列有排序的功能请看我另一篇博客https://my.oschina.net/u/2612473/blog/2395979） 完整代码如下： <script type="text/javascript"> $(function() { $('#tableTest1').bootstrapTable({ sortable: true, height: $

DataTable 插件与bootstrap table 在表格里面有按钮的情况下不对齐

由 ≡放荡痞女 提交于 2020-02-29 03:58:08
在表格内容全部都是文字的情况下，固定表格的头与内容区是对齐的，但是当有一列含有几个按钮时，头部与内容突然不对齐，解决方法是在样式中设置按钮的宽度 DataTable <td style="" class="caozuotd"> <button class="btn btn-info btn-xs" type="button" id="histroyBtn" title="历史数据"><i class="fa fa-file-o"></i></button> <button class="btn btn-info btn-xs" type="button" id="dayQuantityBtn" title="日用量"><i class="fa fa-th-large"></i></button> <button class="btn btn-info btn-xs" type="button" id="histroyQuxianBtn" title="历史曲线"><i class="fa fa-line-chart"></i></button> <button class="btn btn-info btn-xs" type="button" id="warningBtn" title="报警记录"><i class="fa fa-bell-o"></i></button>

前端：固定表格（table)表头的实现方式

由 99封情书 提交于 2019-12-10 04:47:20
在写插件 bootstrap table 的时候，当数据过多的时候，需要对表格的 thead 进行固定，然后滚动表格的 tbody 。但是在实际的操作上，花了很多的时间在这个问题上，到现在也没有找到完美的解决方案，在这里记录下这个问题。 方案一(<=1.0.6) 最开始的解决方法是通过设置 th 中的 div 的 position 为 absolute ，从而达到固定表头的效果： < thead > < tr > < th > < div class = "th-inner" style = "position: absolute; width: 197px;" > Item ID </ div > </ th > < th > < div class = "th-inner" style = "position: absolute; width: 346px;" > Item Name </ div > </ th > < th > < div class = "th-inner" style = "position: absolute; width: 255px;" > Item Price </ div > </ th > </ tr > </ thead > 这里的 width ，是需要通过对 tbody 的第一行元素的宽度进行计算出来的。 这个方法虽然可行，但是会出现如：

BootStrap table 组件

由 久未见 提交于 2019-12-04 13:24:26
1. 定义 bootStrap table引入文件 inc_tb.jsp <script src="/script/bootstrap-table/bootstrap-table.js"></script> <link href="/css/bootstrap-table.css" rel="stylesheet" /> <script src="/script/bootstrap-table/bootstrap-table-zh-CN.js"></script> 2. 添加 testPaperTable.jsp <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%> <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>BootStrap Table</title> <meta http-equiv="Content-Type" content="text/html;

Bootstrap Table 后端分页

由 纵饮孤独 提交于 2019-11-30 18:05:34
之前一直用的前端分页，在数据不是太多的情况下，前端分页还是很方便的，也可以使用自带的搜索等功能，如果数据量比较多的情况就要使用后端分页。 实现的原理：前端把offset和limit(每一页显示的数量)发送给后端，后端查询数据库 返回JSON，前端根据后端返回的total展示出pagination。 返回的JSON格式 { "total": 25, "rows": [ {}, {}, ... ] } 前端主要设置 sidePagination: "server", pageNumber: 1, queryParams:queryParams, queryParams是一个函数， function queryParams(params) { console.log(JSON.stringify(params)) // {"order":"asc","offset":0,"limit":10} return { offset:params.offset, limit:params.limit } } 完整的代码 <table class="table-striped table-hasthead" id="tableTest1"> <thead> <tr> <th data-sortable="true" data-field="id">Id</th> <th data-field=

Bootstrap Table含有按钮时表格不对齐

由 非 Y 不嫁゛ 提交于 2019-11-30 07:50:24
使用Bootstrap Table的时候，在含有按钮的情况，有时候表格的线垂直方向上不对齐 解决方法： （1）调整表格的高度小些或者大些（至于为什么，并不清楚，调整高度后就对齐了） （2）加setTimeout $('#tableTest1').bootstrapTable({ // method: "POST", // contentType: "application/x-www-form-urlencoded", // url: "goSkidSetting1", height: $(window).height() - 150, pageNumber: 1, //初始化加载第一页，默认第一页 pageSize: 10, //每页的记录行数（*） showColumns: false, //是否显示所有的列 showRefresh: false, //是否显示刷新按钮 search: true, pagination: true, pageList: [10], // sidePagination: 'server', // queryParamsType: "", // queryParams: queryParams, }); setTimeout(function(){ $('#tableTest1').bootstrapTable('resetView'); },50

前端：固定表格（table)表头的实现方式

由 淺唱寂寞╮ 提交于 2019-11-30 04:35:43
在写插件 bootstrap table 的时候，当数据过多的时候，需要对表格的 thead 进行固定，然后滚动表格的 tbody 。但是在实际的操作上，花了很多的时间在这个问题上，到现在也没有找到完美的解决方案，在这里记录下这个问题。 方案一(<=1.0.6) 最开始的解决方法是通过设置 th 中的 div 的 position 为 absolute ，从而达到固定表头的效果： < thead > < tr > < th > < div class = "th-inner" style = "position: absolute; width: 197px;" > Item ID </ div > </ th > < th > < div class = "th-inner" style = "position: absolute; width: 346px;" > Item Name </ div > </ th > < th > < div class = "th-inner" style = "position: absolute; width: 255px;" > Item Price </ div > </ th > </ tr > </ thead > 这里的 width ，是需要通过对 tbody 的第一行元素的宽度进行计算出来的。 这个方法虽然可行，但是会出现如：

Bootstrap Table Examples

由 China☆狼群 提交于 2019-11-29 19:34:38
Bootstrap Table 是一款基于bootstrap封装的表格组件，使用起来比较方便。官方文档对服务器端分页表述不是很清楚，查了它的demo，看到接口返回的数据，可以参考一下他的 网页源码 。此网页源码定制性比较强，基本的使用不需要这么复杂，可以参考下面的例子进行使用，如果有必要再看官网demo的源码再深入使用。 前端的基本设置 <table id="exampleTableEvents" data-mobile-responsive="true" data-toolbar="#toolbar" data-search="true" data-show-refresh="true" data-show-toggle="false" data-show-columns="false" data-show-export="true" data-detail-view="false" data-detail-formatter="detailFormatter" data-minimum-count-columns="2" data-pagination="true" data-id-field="id" data-page-list="[30, 60, 120, ALL]" data-show-footer="true" data-show-header="true" data
订阅 Bootstrap Table