3分钟内看完这,bootstraptable表格控件,受益匪浅!
今天分享一下bootstraptable的相关技能点,由于第一次接触,所以刚开始碰了好多壁,于是趁现在过去不久,先总结总结。
Bootstraptable简单的来说就是一个表格控件,但是这个表格可不是一般的表格,分页、排序、查询都自带了,你就给他一个json数据就可以了。
接下来我们就看看怎么用:
1.先在页面中引入所需的js文件和css文件
<link rel="stylesheet" href="bootstrap.min.css">
<link rel="stylesheet" href="bootstrap-table.css">
<script src="jquery.min.js"></script>
<script src="bootstrap.min.js"></script>
<script src="bootstrap-table.js"></script>
<script src="bootstrap-table-zh-CN.js"></script>
2.在我们所需要展示数据的表格上加个id,或者class都可以,在这里我以id为例。
<table id="table"></table>
3.接下来就是给表格里面加数据了,我们可以在加载当前页面时利用ajax去请求控制器,查询所需要的数据,然后放在一个集合中,转换成json格式就可以了。
下面是js中相关代码:
$(function () {caseTable();});//加载数据
function caseTable() {$('#table').bootstrapTable({method: "get", //提交方法striped: true, //是否显示行间隔色cache:true, //是否使用缓存,默认为true,所以一般情况下需要设置一下这个属性singleSelect: false, //设置True 将禁止多选url: "/Home/GetAllAnJian",//查询的地址dataType: "json", //服务器返回的数据类型pagination: true, //是否分页pageSize: 5, //页大小pageNumber: 1, //当前页search: false, //显示搜索框contentType: "application/x-www-form-urlencoded", //发送到服务器的数据编码类型queryParams:null, //参数// function (parms) {// return {// aid: $("#aid").val(),// };//},columns: [{title: "案件编号", //列标题field: 'aid', //该列映射的data的参数名align: 'center', //水平对齐方式valign: 'middle', //垂直对齐方式sortable: true //是否排序},{title: '案件名称',field: 'aname',align: 'center',valign: 'middle',sortable: true},{title: '案件类型',field: 'atypename',align: 'center',valign: 'middle',sortable: true},{field: '',title: '操作',halign: 'center',align: 'center',width: '50px', //宽度sortable: true, //下面是单独加的按钮formatter: function (value,row,index) {var e = '<button class="btn btn-primary" onclick="tijiao(\'' + row.aid + '\')">提交</button>';return e;},}]});
}
4.后台查询数据的代码(以asp mvc为例):
控制器是:HomeController
请求数据的方法:
//查询所有的案件信息
public JsonResult GetAllAnJian(string aid)
{List<AnJian> anAll = (from a in entity.AnJianwhere a.astatename.Equals("新建")select a).ToList();
//将日期类型转换成string类型
for (int i = 0; i < anAll.Count; i++){anAll[i].adate_formate = anAll[i].adate.ToString();}return Json(anAll, JsonRequestBehavior.AllowGet);}
下面是演示图(数据随便填的):
对了,另外结合layui使用更好用哦,时候不早了,明天在说结合layui使用的方法。
往期内容推荐
layui如何实现添加数据时关闭页面层,并实时刷新表格数据?
2020-06-01
你不知道ADO.Net中操作数据库的步骤【超详细整理】
2020-05-30
Photoshop中将图片拖不进软件的编辑区的解决方法,超详细
2020-05-29
eclipse下载与安装步骤详解,包含解决错误(最全最详细,多图)
2020-05-28
Boostrap技能点整理之【按钮样式】
2020-05-27
Boostrap技能点整理之【网格系统】
2020-05-26
3分钟内看完这,bootstraptable表格控件,受益匪浅!相关推荐
- SpreadJS 纯前端表格控件应用案例:医疗行业智能报表系统
由西安几何数字信息技术有限公司(简称:几何数字)推出的医疗行业智能报表系统,通过嵌入纯前端表格控件 SpreadJS,实现了拖拽式操作和丰富的可视化指标体系,可助您轻松自如地完成数据透视分析.自助分析 ...
- WPF 表格控件 ReoGrid 的简单使用
WPF 表格控件 ReoGrid 的简单使用 目录 一.概述 二.安装 三.添加控件 四.加载 Excel 五.属性设置 六.支持触摸滚动 七.其它操作 1.显示和隐藏列 2.显示特定字体 八.资源链 ...
- SNF快速开发平台MVC-各种级联绑定方式,演示样例程序(包含表单和表格控件)...
做了这么多项目,经常会使用到级联.联动的情况. 如:省.市.县.区.一级分类.二级分类.三级分类.仓库.货位. 方式:有表单需要做级联的,还是表格行上需要做级联操作的. 实现:实现方法也有很多种方式. ...
- VB表格控件总览与例程分析
一.表格控件总览: 在VB开发环境中,表格控件在界面开发元素中占有重要的地位.它不仅有外观整洁.表达形式规范的优点,而且更重要的是它较高的信息表现率(就是相对于其他控件来说能够表达更多的信息),随着信 ...
- Xceed WinForm数据表格控件Xceed Grid For .NET详细介绍
2019独角兽企业重金招聘Python工程师标准>>> Xceed Grid For .NET是一款高级的,多功能的.扩展性极强的数据表格控件,具有分组.主从表.多种主题外观.固定列 ...
- web表格控件FineReport作为企业web表格制作软件的核心优势
web表格控件FineReport作为企业web表格制作软件的核心优势 报表表格设计器 Excel表格的设计风格 企业在选择报表表格解决方案时,不仅要考虑报表表格工具的功能和服务,还要考虑它是否易学. ...
- 专题一:Labview表格控件 及 应用(一)
专题一:Labview表格控件 及 应用(一) 最近一段时间,做试验台上位机编程,老是用到表格控件,这几天抽时间专门写一个表格控件的专题.有用到的朋友可以参考一下. 总结教训:尽量把文章控制在5分钟范 ...
- MFC Windows 程序设计[325]之表格控件例程(附源码)
MFC Windows 程序设计[325]之表格控件例程 程序之美 前言 主体 运行效果 核心代码 逻辑分析 结束语 程序之美 前言 MFC是微软公司提供的一个类库(class libraries), ...
- 简单三步!教你用前端表格控件SpreadJS做购物车
SpreadJS结合40余年专业控件技术和在电子表格应用领域的经验而推出的纯前端表格控件,基于 HTML5,兼容 450 多种 Excel 公式,具备"高性能.跨平台.与 Excel 高度兼 ...
最新文章
- Django学习之路(一)--初识django
- python中的 怎么用_Python中如何调用Linux命令
- 给mysql的root %用户添加grant权限。并给创建的用户赋予权限
- HDU - 3341 Lost's revenge(AC自动机+状压dp)
- 成为更优秀的开发人员:第二步-知道你的核心竞争力
- kafka集群脚本启动失败,在kafkaServer.out中提示nohup: failed to run command `java’: No such file or directory
- python计算分段函数_Python练习题2.2计算分段函数
- BZOJ2002: [Hnoi2010]Bounce 弹飞绵羊(LCT)
- Python 3.8与普通程序员有关的几个新特性
- python 如何安装软件包故障_Python安装软件包出错
- 人生是什么?——感悟2:绝望时候要相信自己
- 25个Linux相关的网站【转】
- [转载] python字典更新值_Python–字典元组值更新
- python报表自动化系列 - 获取指定目录所有文件绝对路径
- Windows server 2016 部署AD(Windows 域)
- Vue学习笔记之Nodejs中的NPM使用
- 金九银十BAT互联网企业涨薪必备知识点:Jvm性能调优实战
- mysql 1.4安装步骤_1.4.1 MySql安装配置
- 关于SQLite创建视图
- carsim/trucksim获取轮胎侧偏刚度、纵向刚度
热门文章
- C++to_string应用举例
- Redis高可用基石--主从同步
- java安装版本哪种好_我怎么知道我安装了哪个版本的Java?
- 蓝桥杯 123 二分+打表
- P4705 玩游戏(生成函数,多项式ln)
- CF1572B. Xor of 3
- CF1458C Latin Square
- CF1245F Daniel and Spring Cleaning(等会了更新)
- AtCoder4515 [AGC030F] Permutation and Minimum(dp)
- P5782-[POI2001]和平委员会【2-SAT】