Bootstrap Table从零开始


Posted in Javascript onJune 30, 2017

本文博主将从零开始,一步一步的告诉大家如何在前端用bootstrap Table插件展示一个表格

首先,要下载bootstrap Table插件所必须的js,地址:https://github.com/wenzhixin/bootstrap-table

官方文档地址:http://bootstrap-table.wenzhixin.net.cn/zh-cn/documentation/

本文项目地址:bootstraptable

本文需要注意点地方博主已用红笔圈起来

先展示效果图

Bootstrap Table从零开始

接下来就开始使用bootstrap Table插件制作表格

将上述地址下载的插件js放到项目中,分别为js,css,fonts

Bootstrap Table从零开始

此处有一个细节:locale文件夹的名字不能修改,而且里边的所有语言js,必须全部粘过来

本文以MVC为例,当然WebForm也是可以的

使用步骤:

1、新建一个控制器和视图,该视图引用了_Layout母页版

2、在视图里引用相应的js

Bootstrap Table从零开始

在页面上写一个table表格容器,这一句必须要有

<table id="ArbetTable"></table>

3、初始化bootstrap Table

$(function () {
 //1.初始化Table
 var oTable = new TableInit();
 oTable.Init();
 });

4、使用bootstrap Table

var TableInit = function () {
 var oTableInit = new Object();
 //初始化Table
 oTableInit.Init = function () {
 $('#ArbetTable').bootstrapTable({
  url: '/Interface/GetData',  //请求后台的URL(*)
  method: 'get',   //请求方式(*)
  toolbar: '#toolbar',  //工具按钮用哪个容器
  striped: true,   //是否显示行间隔色
  cache: false,   //是否使用缓存,默认为true,所以一般情况下需要设置一下这个属性(*)
  pagination: true,   //是否显示分页(*)
  sortable: false,   //是否启用排序
  sortOrder: "asc",   //排序方式
  queryParams: oTableInit.queryParams,//传递参数(*)
  sidePagination: "server",  //分页方式:client客户端分页,server服务端分页(*)
  pageNumber: 1,   //初始化加载第一页,默认第一页
  pageSize: 10,   //每页的记录行数(*)
  pageList: [10, 25, 50, 100], //可供选择的每页的行数(*)
  search: true,   //是否显示表格搜索,此搜索是客户端搜索,不会进服务端,所以,个人感觉意义不大
  contentType: "application/x-www-form-urlencoded",
  strictSearch: true,
  showColumns: true,   //是否显示所有的列
  showRefresh: true,   //是否显示刷新按钮
  minimumCountColumns: 2,  //最少允许的列数
  clickToSelect: true,  //是否启用点击选中行
  height: 700,   //行高,如果没有设置height属性,表格自动根据记录条数觉得表格高度
  uniqueId: "no",   //每一行的唯一标识,一般为主键列
  showToggle: true,   //是否显示详细视图和列表视图的切换按钮
  cardView: false,   //是否显示详细视图
  detailView: false,   //是否显示父子表
  columns: [
  {
  field: 'ID',
  title: 'ID'
  }, {
  field: 'Name',
  title: '名字'
  }, {
  field: 'Sex',
  title: '性别'
  },
  {
  field: 'operate',
  title: '操作',
  formatter: operateFormatter //自定义方法,添加操作按钮
  },
  ],
  rowStyle: function (row, index) {
  var classesArr = ['success', 'info'];
  var strclass = "";
  if (index % 2 === 0) {//偶数行
   strclass = classesArr[0];
  } else {//奇数行
   strclass = classesArr[1];
  }
  return { classes: strclass };
  },//隔行变色
 });

 };


 //得到查询的参数
 oTableInit.queryParams = function (params) {
 var temp = { //这里的键的名字和控制器的变量名必须一直,这边改动,控制器也需要改成一样的
  limit: params.limit, //页面大小
  offset:params.offset
 };
 return temp;
 };
 return oTableInit;
};


function operateFormatter(value, row, index) {//赋予的参数
 return [
 '<a class="btn active disabled" href="#">编辑</a>',
 '<a class="btn active" href="#">档案</a>',
 '<a class="btn btn-default" href="#">记录</a>',
 '<a class="btn active" href="#">准入</a>'
 ].join('');
}

5、后台url返回数据

public ActionResult GetData(int limit, int offset)
 {
  var data = new List<object>(){new { ID=1, Name="Arbet", Sex="男"},
  new { ID= 2, Name="Arbet1", Sex="女" },
  new {ID=3, Name="Arbet2",Sex="男" },
  new {ID=4, Name="Arbet3",Sex="女" },
  new {ID=5, Name="Arbet4",Sex="男" },
  new {ID=6, Name="Arbet5",Sex="男" },
  new {ID=7, Name="Arbet6",Sex="女" },
  new {ID=8, Name="Arbet7",Sex="男" },
  new { ID=9, Name="Arbet1", Sex="女" },
  new {ID=10, Name="Arbet2",Sex="男" },
  new {ID=11, Name="Arbet3",Sex="女" },
  new {ID=12, Name="Arbet4",Sex="男" },
  new {ID=13, Name="Arbet5",Sex="男" },
  new {ID=14, Name="Arbet6",Sex="女" },
  new {ID=15, Name="Arbet7",Sex="男" }
  };
  var total = data.Count;
  var rows = data.Skip(offset).Take(limit).ToList();
  return Json(new { total = total, rows = rows }, JsonRequestBehavior.AllowGet);
 }

在本文中,博主以匿名集合来设置数据,大家可以通过查询数据库获取数据

在此需要注意:返回的参数必须是total和rows,total返回数据集总个数,rows返回table的json格式

6、展示效果

Bootstrap Table从零开始

发现出现了这个bug,这是怎么回事

在浏览器上打开源代码

Bootstrap Table从零开始

发现多了一些其他js文件,这是layout母页版里引入的js文件

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8" />
 <meta name="viewport" content="width=device-width" />
 <title>@ViewBag.Title</title>
 @Styles.Render("~/Content/css")
 @Scripts.Render("~/bundles/modernizr")
</head>
<body>
 @RenderBody()

 @*@Scripts.Render("~/bundles/jquery")*@
 @RenderSection("scripts", required: false)
</body>
</html>

把上图中的红框里的js文件注释掉再运行

Bootstrap Table从零开始

发现成功了!这是因为JS库文件的引用是有顺序的,必须先引用JQuery库文件,再引用插件js

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
从阿里妈妈发现的几个不错的表单验证函数
Sep 21 Javascript
jQuery示例收集
Nov 05 Javascript
jQuery中fadeIn、fadeOut、fadeTo的使用方法(图片显示与隐藏)
May 08 Javascript
js通过元素class名字获取元素集合的具体实现
Jan 06 Javascript
jQuery学习笔记之总体架构
Jun 03 Javascript
jQuery简单实现禁用右键菜单
Mar 10 Javascript
用Node.js通过sitemap.xml批量抓取美女图片
May 28 Javascript
MVC Ajax Helper或Jquery异步加载部分视图
Nov 29 Javascript
JS中this上下文对象使用方式
Oct 09 Javascript
关于iframe跨域POST提交的方法示例
Jan 15 Javascript
JavaScript中捕获与冒泡详解及实例
Feb 03 Javascript
vue打包使用Nginx代理解决跨域问题
Aug 27 Javascript
最全的JavaScript开发工具列表 总有一款适合你
Jun 29 #Javascript
常见的浏览器Hack技巧整理
Jun 29 #Javascript
详解webpack+gulp实现自动构建部署
Jun 29 #Javascript
bootstrapvalidator之API学习教程
Jun 29 #Javascript
Webpack常见静态资源处理-模块加载器(Loaders)+ExtractTextPlugin插件
Jun 29 #Javascript
jQuery开源组件BootstrapValidator使用详解
Jun 29 #jQuery
详解webpack 多页面/入口支持&amp;公共组件单独打包
Jun 29 #Javascript
You might like
php输入数据统一类实例
2015/02/23 PHP
php获取当前月与上个月月初及月末时间戳的方法
2016/12/05 PHP
php使用preg_match()函数验证ip地址的方法
2017/01/07 PHP
PHP实现非阻塞模式的方法分析
2018/07/26 PHP
jQuery-serialize()输出序列化form表单值的方法
2012/12/26 Javascript
js自动生成的元素与页面原有元素发生堆叠的解决方法
2013/10/24 Javascript
javascript图片滑动效果实现
2021/01/28 Javascript
js+css实现select的美化效果
2016/03/24 Javascript
javascript表单控件实例讲解
2016/09/13 Javascript
Angularjs中使用轮播图指令swiper
2017/05/30 Javascript
浅谈pc端rem字体设置的问题
2017/08/03 Javascript
vue axios 表单提交上传图片的实例
2018/03/16 Javascript
使用element-ui table expand展开行实现手风琴效果
2019/03/15 Javascript
Layui多选只有最后一个值的解决方法
2019/09/02 Javascript
详解Vue中CSS样式穿透问题
2019/09/12 Javascript
[26:50]2018完美盛典DOTA2表演赛
2018/12/17 DOTA
python基础教程之基本内置数据类型介绍
2014/02/20 Python
python复制与引用用法分析
2015/04/08 Python
Python如何通过subprocess调用adb命令详解
2017/08/27 Python
Python与R语言的简要对比
2017/11/14 Python
virtualenv 指定 python 解释器的版本方法
2018/10/25 Python
深入了解Python在HDA中的应用
2019/09/05 Python
pytorch 模拟关系拟合——回归实例
2020/01/14 Python
Python如何将图像音视频等资源文件隐藏在代码中(小技巧)
2020/02/16 Python
CSS3 Calc实现滚动条出现页面不跳动问题
2017/09/14 HTML / CSS
ZWILLING双立人英国网上商店:德国刀具锅具厨具品牌
2018/05/15 全球购物
ParcelABC西班牙:包裹运送和快递服务
2019/12/24 全球购物
HttpServlet类中的主要方法都有哪些?各自的作用是什么?
2014/03/16 面试题
大学本科生的个人自我评价
2013/12/09 职场文书
初三化学教学反思
2014/01/23 职场文书
县委班子四风对照检查材料思想汇报
2014/09/29 职场文书
信贷客户经理岗位职责
2015/04/09 职场文书
2015年中学校长工作总结
2015/05/19 职场文书
格列夫游记读书笔记
2015/07/01 职场文书
python实现股票历史数据可视化分析案例
2021/06/10 Python
深入解读Java三大集合之map list set的用法
2021/11/11 Java/Android