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>

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

Javascript 相关文章推荐
JavaScript模板入门介绍
Sep 26 Javascript
JavaScript获取客户端计算机硬件及系统等信息的方法
Jan 02 Javascript
jquery选择器原理介绍($()使用方法)
Mar 25 Javascript
jQuery不使用插件及swf实现无刷新文件上传
Dec 08 Javascript
JavaScript数组方法总结分析
May 06 Javascript
JS实现登录页面记住密码和enter键登录方法推荐
May 10 Javascript
深入理解JS addLoadEvent函数
May 20 Javascript
Ext JS框架中日期函数的用法及日期选择控件的实现
May 21 Javascript
JS图片左右无缝隙滚动的实现(兼容IE,Firefox 遵循W3C标准)
Sep 23 Javascript
AngularJS上传文件的示例代码
Nov 10 Javascript
利用 JavaScript 构建命令行应用
Nov 17 Javascript
vue实现登陆页面开发实践
May 30 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
You might like
php/js获取客户端mac地址的实现代码
2013/07/08 PHP
thinkphp的CURD和查询方式介绍
2013/12/19 PHP
PHP解压tar.gz格式文件的方法
2016/02/14 PHP
为jquery.ui.dialog 增加“自动记住关闭时的位置”的功能
2009/11/24 Javascript
file模式访问网页时iframe高度自适应解决方案
2013/01/16 Javascript
Microsfot .NET Framework4.0框架 安装失败的解决方法
2013/08/14 Javascript
JS给超链接加确认对话框的方法
2015/02/24 Javascript
js实现的倒计时按钮实例
2015/06/24 Javascript
关于JS中setTimeout()无法调用带参函数问题的解决方法
2016/06/21 Javascript
详解Angularjs 自定义指令中的数据绑定
2018/07/19 Javascript
深入Vue-Router路由嵌套理解
2018/08/13 Javascript
详解JS浏览器事件循环机制
2019/03/27 Javascript
element-ui 远程搜索组件el-select在项目中组件化的实现代码
2019/12/04 Javascript
适用于 Vue 的播放器组件Vue-Video-Player操作
2020/11/16 Javascript
使用python实现baidu hi自动登录的代码
2013/02/10 Python
Python实现批量把SVG格式转成png、pdf格式的代码分享
2014/08/21 Python
Python实现获取操作系统版本信息方法
2015/04/08 Python
使用python检测主机存活端口及检查存活主机
2015/10/12 Python
python文件与目录操作实例详解
2016/02/22 Python
Python实现购物车程序
2018/04/16 Python
Python3实现的字典、列表和json对象互转功能示例
2018/05/22 Python
python numpy实现文件存取的示例代码
2019/05/26 Python
python进行参数传递的方法
2020/05/12 Python
python使用建议技巧分享(三)
2020/08/18 Python
pytorch中index_select()的用法详解
2021/01/06 Python
浅谈CSS3鼠标移入图片动态提示效果(transform)
2017/11/06 HTML / CSS
Html5元素及基本语法详解
2016/08/02 HTML / CSS
新加坡领先的时尚生活方式零售品牌:CHARLES & KEITH
2018/01/16 全球购物
实验室的标语
2014/06/20 职场文书
财务科长个人对照检查材料
2014/09/18 职场文书
领导欢送会主持词
2015/07/06 职场文书
Python数据清洗工具之Numpy的基本操作
2021/04/22 Python
Python基础之pandas数据合并
2021/04/27 Python
Java 中的 Unsafe 魔法类的作用大全
2021/06/26 Java/Android
MySQL运行报错:“Expression #1 of SELECT list is not in GROUP BY clause and contains nonaggre”解决方法
2022/06/14 MySQL
python playwrigh框架入门安装使用
2022/07/23 Python