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 loading效果代码
Jun 18 Javascript
使用滤镜设置透明导致 IE 6/7/8/9 解析异常的解决方法
Apr 07 Javascript
js onload处理html页面加载之后的事件
Oct 30 Javascript
Jquery如何实现点击时高亮显示代码
Jan 22 Javascript
jquery心形点赞关注效果的简单实现
Nov 14 Javascript
vue组件实例解析
Jan 10 Javascript
js实现网页定位导航功能
Mar 07 Javascript
pm2 部署 node的三种方法示例
Oct 20 Javascript
Vue中如何实现proxy代理
Apr 20 Javascript
jQuery实现的简单对话框拖动功能示例
Jun 05 jQuery
大转盘抽奖小程序版 转盘抽奖网页版
Apr 16 Javascript
浅谈Node 异步IO和事件循环
May 05 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
You might like
PHP 上传文件大小限制
2009/07/05 PHP
PHP生成网页快照 不用COM不用扩展.
2010/02/11 PHP
在Windows系统上安装PHP运行环境文字教程
2010/07/19 PHP
Zend的MVC机制使用分析(二)
2013/05/02 PHP
用php简单实现加减乘除计算器
2014/01/06 PHP
php实现CSV文件导入和导出
2015/10/24 PHP
php 解决substr()截取中文字符乱码问题
2016/07/18 PHP
关于Yii中模型场景的一些简单介绍
2019/09/22 PHP
兼容IE和Firefox火狐的上下、左右循环无间断滚动JS代码
2013/04/19 Javascript
Ext中下拉列表ComboBox组件store数据格式用法介绍
2013/07/15 Javascript
深入理解javascript动态插入技术
2013/11/12 Javascript
jQuery实现图片局部放大镜效果
2016/03/17 Javascript
使用postMesssage()实现iframe跨域页面间的信息传递
2016/03/29 Javascript
jQuery设置单选按钮radio选中/不可用的实例代码
2016/06/24 Javascript
jQuery内容筛选选择器实例代码
2017/02/06 Javascript
Node.js的进程管理的深入理解
2019/01/09 Javascript
[01:14]DOTA2 7.22版本新增神杖效果展示(智力英雄篇)
2019/05/29 DOTA
Python里隐藏的“禅”
2014/06/16 Python
Python获取运行目录与当前脚本目录的方法
2015/06/01 Python
python 用opencv调用训练好的模型进行识别的方法
2018/12/07 Python
python网络应用开发知识点浅析
2019/05/28 Python
Django应用程序入口WSGIHandler源码解析
2019/08/05 Python
Python爬虫破解登陆哔哩哔哩的方法
2020/11/17 Python
python操作toml文件的示例代码
2020/11/27 Python
如何提高MySql的安全性
2014/06/19 面试题
结婚邀请函范文
2014/01/14 职场文书
新学期开学寄语
2014/01/18 职场文书
《我为你骄傲》教学反思
2014/02/20 职场文书
法制宣传标语
2014/06/23 职场文书
四风查摆剖析材料
2014/10/10 职场文书
房屋转让协议书
2014/10/18 职场文书
国际贸易实训报告
2014/11/05 职场文书
质检员岗位职责
2015/02/03 职场文书
撤诉申请怎么写
2015/05/19 职场文书
复兴之路观后感
2015/06/02 职场文书
NodeJs使用webpack打包项目的方法详解
2022/02/28 NodeJs