Bootstrap-table表格初始化表格数据
一、项目说明
①此项目是ASP.NET项目,开发语言是C#
②bootstrap-table使用需要下载对应的css和js插件
③具体详情还需查看api文档
二、前端代码
<div class="table-responsive">
<table id="table" class="text-nowrap"> </table>
</div>
【说明】 ①text-nowrap设置表格超出不换行而显示滚动条,避免表格列过多
②table-responsive:有table-responsive,表格有滚动条
没有table-responsive,网页有滚动条
$('#table').bootstrapTable({
url: '/B_Product/GetProductData', //请求后台的URL(*)
method: 'get', //请求方式(*)
toolbar: '#toolbar', //工具按钮用哪个容器
striped: true, //是否显示行间隔色
cache: false, //是否使用缓存,默认为true,所以一般情况下需要设置一下这个属性(*)
pagination: true, //是否显示分页(*)
sortable: false, //是否启用排序
sortOrder: "asc", //排序方式
queryParams: function (pageRequest) {
return pageRequest;
},//
//传递参数(*)
sidePagination: "server", //分页方式:client客户端分页,server服务端分页(*)
pageNumber: 1, //初始化加载第一页,默认第一页
pageSize: 10, //每页的记录行数(*)
pageList: [10, 25, 50, 100], //可供选择的每页的行数(*)
search: true, //是否显示表格搜索,此搜索是客户端搜索,不会进服务端,所以,个人感觉意义不大
strictSearch: true,
showColumns: true, //是否显示所有的列
showRefresh: true, //是否显示刷新按钮
minimumCountColumns: 2, //最少允许的列数
clickToSelect: true, //是否启用点击选中行
height: tableHeight(), //行高,如果没有设置height属性,表格自动根据记录条数觉得表格高度
uniqueId: "Id", //每一行的唯一标识,一般为主键列
showToggle: false, //是否显示详细视图和列表视图的切换按钮
cardView: false, //是否显示详细视图
detailView: false, //是否显示父子表
showExport: true, //是否显示导出按钮
buttonsAlign: "right", //按钮位置
exportTypes: ['excel'], //导出文件类型
Icons: 'glyphicon-export',
columns: [{
checkbox: true
}, {
field: 'ID',
title: '编号',
visible: false
}, {
field: 'PRODUCTID',
title: '产品编号'
}, {
field: 'PRODUCTNAME',
title: '产品名称'
}, {
field: 'PRODUCTUSER',
title: '货主名称'
}, {
field: 'PRICE',
title: '单价(元)' }, {
field: 'BARCODERULE',
title: '条码规则'
}, {
field: 'ISUSING',
title: '启用状态',
formatter: function (value, row, index) {
if (value == "启用")
return '<span class="glyphicon glyphicon-ok label label-success" style="font-size:90%"> 启用</span>';
else
return '<span class="glyphicon glyphicon-remove label label-danger" style="font-size:90%"> 不启用</span>';
} }, {
field: 'REMARK1',
title: '备注'
},
]
});
【说明】以上是表格初始化方法
①请求网址返回的数据是json数组
②传递的默认参数有页数和页的大小,如果在服务端分页,分页方式为:server
③表格随动(随着页面大小的改变,表格的大小随之改变)
这里写了一个tableHeight()方法获取屏幕的高度,同时利用Windows的resize方法重新传递参数,刷新表格
function tableHeight() {
var h = $(window).height();
return h-25;
}
【重新设置表格属性值并刷新】
$(window).resize(function () {
$("#table").bootstrapTable('resetView', {
height: tableHeight()
});
}); $("#table").bootstrapTable("refresh");//表格刷新数据
④为表格设置checkbox
在columns:中设置第一列 checkbox: true,将会用全选功能
field: 'ID', 此名称需和json对应的key值相同才会显示对应的value值
title: '编号', title是列名,显示的名称
visible: false 表示初始为不可见,可通过表格右上方的按钮设置列的显示和不显示
⑤在表格中设置样式
表格中显示按钮等不同状态的
formatter: function (value, row, index) {
if (value == "启用")
return '<span class="glyphicon glyphicon-ok label label-success" > 启用</span>';
else
return '<span class="glyphicon glyphicon-remove label label-danger" > 不启用</span>';
}
返回的参数有三个,value代表当前值,row表示当前行,index当前行数
Bootstrap-table表格初始化表格数据的更多相关文章
- 使用bootstrap table小记(表格组件)
前言 新的一年悄然到来,生活依旧.最近一周大热的赵雷风,一首<成都>,一首<理想>再次把民谣展示在国人面前.歌词着实写的不错. 理想,你今年几岁 你总是诱惑着年轻的朋友 你总是 ...
- Bootstrap table 实现树形表格,实现联动选中,联动取消
公司最近有需求要做树形式table.因为是前后端不分离项目,且之前已经引入了bootstrap table插件,现把实现方式分享一下: <!DOCTYPE HTML> <html l ...
- bootstrap table分页,重新数据查询时页码为当前页问题
问题描述: 使用bootstrap table时遇到一个小问题,第一次查询数据未5页,翻页到第5页后,选中条件再次查询数据时,传到后端页码仍旧为5,而此时数据量小于5页,表格显示为未查询到数据. 处理 ...
- bootstrap table 生成的表格里动态添加HTML元素按钮,JS中添加点击事件,点击没反应---解决办法
bootstraptable中onExpandRow属性---js 方法添加的 html代码,然后给这代码里面的 元素 添加 事件,却获取不该元素.(称之为未来元素),由于是未来的 所以现在没有这个 ...
- bootstrap table 主子表 局部数据刷新(刷新子表)
1.主表中设置data-detail-view="true",启用主子表模式: <table class="table table-striped" wi ...
- JS组件系列——Bootstrap Table 表格行拖拽(二:多行拖拽)
前言:前天刚写了篇JS组件系列——Bootstrap Table 表格行拖拽,今天接到新的需要,需要在之前表格行拖拽的基础上能够同时拖拽选中的多行.博主用了半天时间研究了下,效果是出来了,但是感觉不尽 ...
- django:bootstrap table加载django返回的数据
bootstrap table加载表格数据有两类方式: 一种通过data属性的方式配置,一种是javascipt方式配置 这里看js配置方式: 1.当数据源为.json文件时 url参数写上json文 ...
- Bootstrap分页插件ajax返回数据,工具类的编写
使用Bootstrap分页插件时,需要返回指定的参数,这样Bootstrap才能够识别 需要引入的css: <!-- boostrap table --> <link href=&q ...
- bootstrap Table从零开始
本文博主将从零开始,一步一步的告诉大家如何在前端用bootstrap Table插件展示一个表格 首先,要下载bootstrap Table插件所必须的js,地址:https://github.c ...
随机推荐
- 带parent指针的successor求解
题目: 给定一个二叉树和其中的一个结点,请找出中序遍历顺序的下一个结点(不存在重复数据).树中的结点不仅包含左右子结点,同时包含指向父结点的指针. 思路: 如果当前节点有右孩子,则下一个节点是右孩子中 ...
- [Bash]LeetCode195. 第十行 | Tenth Line
Given a text file file.txt, print just the 10th line of the file. Example: Assume that file.txt has ...
- [Swift]LeetCode808. 分汤 | Soup Servings
There are two types of soup: type A and type B. Initially we have N ml of each type of soup. There a ...
- Java IO 导入导出TXT文件
字节流和字符流 区别: 读写单位:顾名思义,字节流以字节(byte)为读写单位,而字符流以字符为读写单位,根据码表映射字符,一次可能读入多个字符. 处理对象:字节流可以处理所有类型的数据(包括图片等) ...
- BBS论坛(二十八)
28.1.帖子分页功能完成 (1)manage.py 通过命令生成100个帖子,用于测试 @manager.command def create_test_post(): for x in range ...
- SpringCloud(7)---网关概念、Zuul项目搭建
SpringCloud(7)---网关概念.Zuul项目搭建 一.网关概念 1.什么是路由网关 网关是系统的唯一对外的入口,介于客户端和服务器端之间的中间层,处理非业务功能 提供路由请求.鉴权.监控. ...
- Linux上安装Zookeeper以及一些注意事项
最近打算出一个系列,介绍Dubbo的使用. 分布式应用现在已经越来越广泛,Spring Could也是一个不错的一站式解决方案,不过据我了解国内目前貌似使用阿里Dubbo的公司比较多,一方面这个框架也 ...
- 『Asp.Net 组件』Asp.Net 服务器组件 的开发优势和劣势
在写<Asp.Net 服务器组件系列文档>之前,笔者不才,揣测微软战略用意: 微软利益诉求莫过于 微软产品和技术的市场份额: 因此,微软战略之一莫过于将 所有开发人员 团聚在 微软周围,以 ...
- [Leetcode]674. Longest Continuous Increasing Subsequence
Given an unsorted array of integers, find the length of longest continuous increasing subsequence. E ...
- centos7安装xfce桌面
用了centos自带的gnome桌面 太重了 启动超慢 内存占用近2G 因此打算换一个轻量级的桌面xfce 先安装桌面协议yum groupinstall "X Window system& ...