首页
所有分类
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 相关文章推荐
jquery getScript动态加载JS方法改进详解
Nov 15 Javascript
JQuery拖拽元素改变大小尺寸实现代码
Dec 10 Javascript
关于js内存泄露的一个好例子
Dec 09 Javascript
使用firebug进行调试javascript的示例
Dec 16 Javascript
JavaScript在for循环中绑定事件解决事件参数不同的情况
Jan 20 Javascript
JS实现自动切换文字的导航效果代码
Aug 27 Javascript
angularjs创建弹出框实现拖动效果
Aug 25 Javascript
用JS编写一个函数,返回数组中重复出现过的元素(实例)
Sep 14 Javascript
jQuery选择器之子元素选择器详解
Sep 18 jQuery
详解如何在vscode里面调试js和node.js的方法步骤
Dec 24 Javascript
React学习之JSX与react事件实例分析
Jan 06 Javascript
Javascript异步执行不按顺序解决方案
Apr 30 Javascript
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
蓝屏(1) 鸿蒙(2) 声卡驱动(1) Debian(1) RustDesk(1) 鸿蒙3.0(1) 蓝牙(1) 蓝牙耳机(1) 虚拟键盘(1) win7(2)
You might like
php权重计算方法代码分享
2014/01/09 PHP
实例讲解php将字符串输出到HTML
2019/01/27 PHP
Thinkphp集成抖音SDK的实现方法
2020/04/28 PHP
基于jQuery实现的当离开页面时出现提示的实现代码
2011/06/27 Javascript
理解JAVASCRIPT中hasOwnProperty()的作用
2013/06/05 Javascript
解析js原生方法创建表格效率测试
2013/07/08 Javascript
解决jQuery动态获取手机屏幕高和宽的问题
2014/05/07 Javascript
Javascript访问器属性实例分析
2014/12/30 Javascript
举例讲解JavaScript中关于对象操作的相关知识
2015/11/16 Javascript
nodejs实现邮件发送服务实例分享
2017/03/29 NodeJs
JavaScript之面向对象_动力节点Java学院整理
2017/06/29 Javascript
Vue.js实现开发购物车功能的方法详解
2019/02/22 Javascript
VUE前后端学习tab写法实例
2019/08/06 Javascript
浅谈Vue为什么不能检测数组变动
2019/10/14 Javascript
深入理解基于vue-cli的webpack打包优化实践及探索
2019/10/14 Javascript
Vue SPA 初次进入加载动画实现代码
2019/11/14 Javascript
[00:21]DOTA2亚洲邀请赛 Logo演绎
2015/02/07 DOTA
Python的Django中django-userena组件的简单使用教程
2015/05/30 Python
浅谈对yield的初步理解
2017/05/29 Python
Python绘制3d螺旋曲线图实例代码
2017/12/20 Python
Python操作mysql数据库实现增删查改功能的方法
2018/01/15 Python
对numpy中布尔型数组的处理方法详解
2018/04/17 Python
python pandas 对series和dataframe的重置索引reindex方法
2018/06/07 Python
python+pyqt5编写md5生成器
2019/03/18 Python
Django集成CAS单点登录的方法示例
2019/06/10 Python
利用python实现冒泡排序算法实例代码
2019/12/01 Python
Python基于opencv的简单图像轮廓形状识别(全网最简单最少代码)
2021/01/28 Python
台湾最大网路书店：博客来
2018/03/18 全球购物
写出一个方法实现冒泡排序
2016/07/08 面试题
2014年公司植树节活动方案
2014/03/04 职场文书
环保公益广告语
2014/03/13 职场文书
高中生班主任评语
2014/04/25 职场文书
关于保护环境的标语
2014/06/09 职场文书
结婚喜宴迎宾词
2015/08/10 职场文书
初三英语教学反思
2016/02/15 职场文书
html中两种获取标签内的值的方法
2022/06/16 jQuery