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 相关文章推荐
JavaScript的Function详细
Nov 14 Javascript
javascript IFrame 强制刷新代码
Jul 23 Javascript
限制上传文件大小和格式的jQuery插件实例
Jan 24 Javascript
javascript实时显示北京时间的方法
Mar 12 Javascript
不依赖Flash和任何JS库实现文本复制与剪切附源码下载
Oct 09 Javascript
下一代Bootstrap的5个特点 超酷炫!
Jun 17 Javascript
详解Vue组件实现tips的总结
Nov 01 Javascript
vue渲染时闪烁{{}}的问题及解决方法
Mar 28 Javascript
搭建vue开发环境
Jul 19 Javascript
iview通过Dropdown(下拉菜单)实现的右键菜单
Oct 26 Javascript
Vant的安装和配合引入Vue.js项目里的方法步骤
Dec 05 Javascript
JQuery的加载和选择器用法简单示例
May 13 jQuery
最全的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有道翻译api调用方法实例
2014/12/22 PHP
PHP的serialize序列化数据以及JSON格式化数据分析
2015/10/10 PHP
PHP 断点续传实例详解
2017/11/11 PHP
jQuery 遍历-nextUntil()方法以及prevUntil()方法的使用介绍
2013/04/26 Javascript
js动态设置鼠标事件示例代码
2013/10/30 Javascript
JQUERY的AJAX请求缓存里的数据问题处理
2016/02/23 Javascript
Bootstrap实现水平排列的表单
2016/07/04 Javascript
Nodejs抓取html页面内容(推荐)
2016/08/11 NodeJs
EasyUI学习之DataGird分页显示数据
2016/12/29 Javascript
微信小程序学习(4)-系统配置app.json详解
2017/01/12 Javascript
Angular指令封装jQuery日期时间插件datetimepicker实现双向绑定示例
2017/01/22 Javascript
jQuery extend()详解及简单实例
2017/05/06 jQuery
vue-router中的hash和history两种模式的区别
2018/07/17 Javascript
Angular7中创建组件/自定义指令/管道的方法实例详解
2019/04/02 Javascript
a标签调用js的方法总结
2019/09/05 Javascript
[01:13:17]Secret vs NB 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
浅谈numpy数组的几种排序方式
2017/12/15 Python
Python 多线程不加锁分块读取文件的方法
2018/12/11 Python
python学生管理系统开发
2019/01/30 Python
python操作kafka实践的示例代码
2019/06/19 Python
python函数的作用域及关键字详解
2019/08/20 Python
pycharm通过anaconda安装pyqt5的教程
2020/03/24 Python
Python 保存加载mat格式文件的示例代码
2020/08/04 Python
Python try except else使用详解
2021/01/12 Python
Kivari官网:在线购买波西米亚服装
2018/10/29 全球购物
allbeauty美国:英国在线美容店
2019/03/11 全球购物
德国药房apodiscounter中文官网:德国排名前三的网上药店
2019/06/03 全球购物
Java程序员面试题
2016/09/27 面试题
会计电算化学生个人的自我评价
2014/02/08 职场文书
军训教官感言
2014/03/02 职场文书
节约用水演讲稿
2014/05/21 职场文书
社区活动策划方案
2014/08/21 职场文书
工人先锋号事迹材料
2014/12/24 职场文书
会计工作岗位职责
2015/02/03 职场文书
幼儿园小班教师个人工作总结
2015/02/06 职场文书
Python基于百度AI实现抓取表情包
2021/06/27 Python