首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

bootstrap table表格使用方法详解

Posted in Javascript onApril 26, 2017

本文实例为大家分享了bootstrap table表格的使用方法，供大家参考，具体内容如下

1.进入页面，根据指定的URL加载数据(json格式)

bootstrap table表格使用方法详解

2.加载成功，根据$table.bootstrapTable({options})显示表格样式。

bootstrap table表格使用方法详解

感觉还是挺漂亮的哈，OK，下面贴代码解释功能。 

开始之前，当然要引用js啦

<link href="~/Content/bootstrap.min.css" rel="stylesheet" />
<link href="~/Content/bootstrap-theme.min.css" rel="stylesheet" />
<link href="~/Content/bootstrap-table/bootstrap-table.min.css" rel="stylesheet" />
<script src="~/Scripts/jquery-1.9.1.js"></script>
<script src="~/Scripts/bootstrap.min.js"></script>
<script src="~/Content/bootstrap-table/bootstrap-table.min.js"></script>

 html代码，一是指定table要使用的工具栏，而是写一个空的table

<div class="row">
 <div class="col-md-12">
   <div class="btn-group" id="toobar" role="group" aria-label="...">
    <button type="button" class="btn btn-default">
     <span class="glyphicon glyphicon-plus"></span>新增
      </button>
      <button type="button" class="btn btn-default">
       <span class="glyphicon glyphicon-edit"></span>修改
      </button>
      <button type="button" class="btn btn-default">
      <span class="glyphicon glyphicon-remove"></span>删除
      </button>
    </div>
   <table id="myTable"></table>
 </div>
 </div>

js代码，使用("#table").bootstraptable({options})填充table

$("#myTable").bootstrapTable({
      url: '/BootstrapTable/GetTestData',
      method: 'get',
      toolbar: '#toobar',//工具列
      striped: true,//隔行换色
      cache: false,//禁用缓存
      pagination: true,//启动分页
      sidePagination: 'client',//分页方式
      pageNumber: 1,//初始化table时显示的页码
      pageSize: 10,//每页条目
      showFooter: false,//是否显示列脚
      showPaginationSwitch: true,//是否显示 数据条数选择框
      sortable: false,//排序
      search: true,//启用搜索
      showColumns: true,//是否显示 内容列下拉框
      showRefresh: true,//显示刷新按钮
      idField: 'SystemCode',//key值栏位
      clickToSelect: true,//点击选中checkbox
      singleSelect: true,//启用单行选中
      columns: [{
      checkbox: true
      },
     {
       field: 'SystemCode',
       title: '系统代码',
       titleTooltip: 'young for you'
      },
      {
       field: 'SystemDesc',
       title: '系统名称'
     },
     {
       field: 'Isvalid',
       title: '是否有效'
      },
      {
       field: 'UUser',
       title: '更新人'
      },
      {
       field: 'UDate',
       title: '更新时间'
      }],
      onClickCell: function (field, value, row, $element) {
      //alert(row.SystemDesc);
    }
   });

其中URL是table 数据源地址，如果table启动了分页功能，后台取数据的方法要加上limit、offset两个int类型的参数，这里把后台代码也贴一下。

public JsonResult GetTestData(int limit, int offset)
   {
    BugzillaModelContainer db = new BugzillaModelContainer();
    List<B_SystemInfo> systemInfo = db.B_SystemInfo.ToList();
    for (int i = 0; i < 20; i++)
    {
     B_SystemInfo tempSystem = new B_SystemInfo();
     tempSystem.SystemCode = (i + 1).ToString();
     tempSystem.SystemDesc = "测试系统" + (i + 1).ToString();
     tempSystem.Isvalid = "Y";
     tempSystem.UUser = "result_for" + (i + 1).ToString();
     tempSystem.UDate = System.DateTime.Now.ToShortDateString();
     systemInfo.Add(tempSystem);
    }
 
    var total = systemInfo.Count();
    var rows = systemInfo.Skip(offset).Take(limit).ToList();
    return Json(systemInfo, JsonRequestBehavior.AllowGet);
   }

offset表示从多少条数据开始取，limit表示取多少条数据。

客户端搜索只要设置search=true即可。 

bootstrap table表格使用方法详解

服务端搜索，需要设置参数。

首先设置

("#table").bootstraptable({queryParams: oTableInit.queryParams}),//传递参数（*）

然后获取查询的参数

//得到查询的参数
 oTableInit.queryParams = function (params) {
   var temp = { 

  //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的
    limit: params.limit, //页面大小
    offset: params.offset, //页码
    systemcode: $("#systemcode").val(),
    };
  return temp;
};

通过button事件刷新table，重新获取数据源，即可。

$("#btnQuery").click(function () {
   $table.bootstrapTable('refresh');
 });

最后贴上全部html代码~

<!DOCTYPE html>

<html>
<head>
 <meta name="viewport" content="width=device-width" />
 <title>Index</title>
 <link href="~/Content/bootstrap.min.css" rel="external nofollow" rel="stylesheet" />
 <link href="~/Content/bootstrap-theme.min.css" rel="external nofollow" rel="stylesheet" />
 <link href="~/Content/bootstrap-table/bootstrap-table.min.css" rel="external nofollow" rel="stylesheet" />
 <script src="~/Scripts/jquery-1.9.1.js"></script>
 <script src="~/Scripts/bootstrap.min.js"></script>
 <script src="~/Content/bootstrap-table/bootstrap-table.min.js"></script>
</head>
<body>
 <div class="container">
 <div class="row">
  <div class="col-md-8">

  </div>
 </div>
 <div class="row">
  <div class="col-md-12">
  <div class="btn-group" id="toobar" role="group" aria-label="...">
   <button type="button" class="btn btn-default">
   <span class="glyphicon glyphicon-plus"></span>新增
   </button>
   <button type="button" class="btn btn-default">
   <span class="glyphicon glyphicon-edit"></span>修改
   </button>
   <button type="button" class="btn btn-default">
   <span class="glyphicon glyphicon-remove"></span>删除
   </button>
  </div>
  <table id="myTable"></table>
  </div>
 </div>
 </div>
 <script>

 $(function () {
  var itable = TableInit();
  itable.Init();
 });

 var TableInit = function () {
  var myTableInit = new Object();

  myTableInit.Init = function () {
  $("#myTable").bootstrapTable({
   url: '/BootstrapTable/GetTestData',
   method: 'get',
   toolbar: '#toobar',//工具列
   striped: true,//隔行换色
   cache: false,//禁用缓存
   pagination: true,//启动分页
   sidePagination: 'client',//分页方式
   pageNumber: 1,//初始化table时显示的页码
   pageSize: 10,//每页条目
   showFooter: false,//是否显示列脚
   showPaginationSwitch: true,//是否显示 数据条数选择框
   sortable: false,//排序
   search: true,//启用搜索
   showColumns: true,//是否显示 内容列下拉框
   showRefresh: true,//显示刷新按钮
   idField: 'SystemCode',//key值栏位
   clickToSelect: true,//点击选中checkbox
   singleSelect: true,//启用单行选中
   columns: [{
   checkbox: true
   },
   {
   field: 'SystemCode',
   title: '系统代码',
   titleTooltip: 'young for you'
   },
   {
   field: 'SystemDesc',
   title: '系统名称'
   },
   {
   field: 'Isvalid',
   title: '是否有效'
   },
   {
   field: 'UUser',
   title: '更新人'
   },
   {
   field: 'UDate',
   title: '更新时间'
   }],
   onClickCell: function (field, value, row, $element) {
   //alert(row.SystemDesc);
   }
  });
  };

  return myTableInit;
 };
 </script>
</body>
</html>

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

bootstrap table表格使用方法详解

- Author -

sj2016

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
javascript学习之闭包分析
Dec 02 Javascript
文本框input聚焦失焦样式实现代码
Oct 12 Javascript
node.js中的url.parse方法使用说明
Dec 10 Javascript
js实现为a标签添加事件的方法(使用闭包循环)
Aug 02 Javascript
Vuejs 用$emit与$on来进行兄弟组件之间的数据传输通信
Feb 23 Javascript
原生Aajax 和jQuery Ajax 写法个人总结
Mar 24 jQuery
angularJS 发起$http.post和$http.get请求的实现方法
May 18 Javascript
node puppeteer(headless chrome)实现网站登录
May 09 Javascript
windows下create-react-app 升级至3.3.1版本踩坑记
Feb 17 Javascript
功能完善的小程序日历组件的实现
Mar 31 Javascript
JavaScript中继承原理与用法实例入门
May 09 Javascript
Vue中inheritAttrs的使用实例详解
Dec 31 Vue.js
node.js中实现kindEditor图片上传功能的方法教程
Apr 26 #Javascript
windows下vue-cli导入bootstrap样式
Apr 25 #Javascript
windows下vue-cli及webpack搭建安装环境
Apr 25 #Javascript
Vue+axios 实现http拦截及路由拦截实例
Apr 25 #Javascript
vuejs如何配置less
Apr 25 #Javascript
微信小程序访问node.js接口服务器搭建教程
Apr 25 #Javascript
微信小程序中显示html格式内容的方法
Apr 25 #Javascript
Slave(1) 百度地图(1) 继承(1) variables(1) 主从复制(1) Master(1) transaction(1) PyAutoGUI(1) 封装(1) gRPC(3)
You might like
关于拼配咖啡，你要知道
2021/03/03 咖啡文化
Zend引擎的发展 [15]
2006/10/09 PHP
php安装php_rar扩展实现rar文件读取和解压的方法
2016/11/17 PHP
js事件冒泡实例分享(已测试)
2013/04/23 Javascript
js中的push和join方法使用介绍
2013/10/08 Javascript
二叉树先序遍历的非递归算法具体实现
2014/01/09 Javascript
js获取滚动距离的方法
2015/05/30 Javascript
浅析Bootstrap组件之面板组件
2016/05/04 Javascript
深入剖析javascript中的exec与match方法
2016/05/18 Javascript
有关JavaScript中call()和apply() 的一些理解
2016/05/20 Javascript
浅谈JavaScript 覆盖原型以及更改原型
2016/08/31 Javascript
在vue项目创建的后初始化首次使用stylus安装方法分享
2018/01/25 Javascript
Vue实现带进度条的文件拖动上传功能
2018/02/23 Javascript
node中的密码安全(加密)
2018/09/17 Javascript
原生JS实现简单的无缝自动轮播效果
2018/09/26 Javascript
cdn模式下vue的基本用法详解
2018/10/07 Javascript
Vue 实时监听窗口变化 windowresize的两种方法
2018/11/06 Javascript
Angular7创建项目、组件、服务以及服务的使用
2019/02/19 Javascript
vue 自定义右键样式的实例代码
2019/11/06 Javascript
vue表单验证之禁止input输入框输入空格
2020/12/03 Vue.js
零基础写python爬虫之抓取糗事百科代码分享
2014/11/06 Python
深入Python解释器理解Python中的字节码
2015/04/01 Python
Python中decorator使用实例
2015/04/14 Python
python网络编程之文件下载实例分析
2015/05/20 Python
Python环境使用OpenCV检测人脸实现教程
2020/10/19 Python
CSS3中Transform动画属性用法详解
2016/07/04 HTML / CSS
北京SQL新华信咨询
2016/09/30 面试题
优秀学生自我鉴定范例
2013/12/18 职场文书
销售员岗位职责范本
2014/02/03 职场文书
学习雷锋做美德少年寄语大全
2014/04/09 职场文书
房地产广告策划方案
2014/05/15 职场文书
校外活动方案
2014/08/28 职场文书
庆祝新中国成立65周年“向国旗敬礼”网上签名寄语
2014/09/27 职场文书
2015年度绩效考核工作总结
2015/05/27 职场文书
酒桌上的祝酒词
2015/08/12 职场文书
MySQL数据库10秒内插入百万条数据的实现
2021/11/01 MySQL