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 相关文章推荐
一些常用弹出窗口/拖放/异步文件上传等实用代码
Jan 06 Javascript
使用GruntJS构建Web程序之Tasks(任务)篇
Jun 06 Javascript
jquery实现简单的无缝滚动
Apr 15 Javascript
JavaScript中的数据类型转换方法小结
Oct 26 Javascript
angularjs在ng-repeat中使用ng-model遇到的问题
Jan 21 Javascript
AngularJS基础 ng-hide 指令用法及示例代码
Aug 01 Javascript
JS搜狐面试题分析
Dec 16 Javascript
jQuery插件jquery.kxbdmarquee.js实现无缝滚动效果
Feb 15 Javascript
如何给ss bash 写一个 WEB 端查看流量的页面
Mar 23 Javascript
自定义事件解决重复请求BUG的问题
Jul 11 Javascript
js注册时输入合法性验证方法
Oct 21 Javascript
JS调用安卓手机摄像头扫描二维码
Oct 16 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 利用Mail_MimeDecode类提取邮件信息示例
2014/01/26 PHP
采用thinkphp自带方法生成静态html文件详解
2014/06/13 PHP
jQuery选择头像并实时显示的代码
2010/06/27 Javascript
javaScript 动态访问JSon元素示例代码
2013/08/30 Javascript
jQuery实现的导航条切换可显示隐藏
2014/10/22 Javascript
jQuery实现的向下图文信息滚动效果
2015/05/03 Javascript
javascript使用shift+click实现选择和反选checkbox的方法
2015/05/04 Javascript
完美解决IE不支持Data.parse()的问题
2016/11/24 Javascript
jQuery插件FusionCharts实现的2D柱状图效果示例【附demo源码下载】
2017/03/06 Javascript
jQuery实现简单漂亮的Nav导航菜单效果
2017/03/29 jQuery
深入浅析Vue中的 computed 和 watch
2018/06/06 Javascript
解决layui调用自定义方法提示未定义的问题
2019/09/14 Javascript
layui默认选中table的CheckBox复选框方法
2019/09/19 Javascript
layui实现form表单同时提交数据和文件的代码
2019/10/25 Javascript
解决pyqt中ui编译成窗体.py中文乱码的问题
2016/12/23 Python
Python 备份程序代码实现
2017/03/06 Python
Python 专题三 字符串的基础知识
2017/03/19 Python
python爬虫之BeautifulSoup 使用select方法详解
2017/10/23 Python
python logging模块的使用总结
2019/07/09 Python
python滑块验证码的破解实现
2019/11/10 Python
纯CSS3实现表单验证效果(非常不错)
2017/01/18 HTML / CSS
HTML5自定义视频播放器源码
2020/01/06 HTML / CSS
anello泰国官方网站:日本流行包包品牌
2019/08/08 全球购物
Rowdy Gentleman服装和配饰:美好时光
2019/09/24 全球购物
俄罗斯皮肤健康中心:Pharmacosmetica.ru
2020/02/22 全球购物
linux面试题参考答案(9)
2016/01/29 面试题
介绍一下JMS编程步骤
2015/09/22 面试题
Ruby如何创建一个线程
2013/03/10 面试题
农村婚礼证婚词
2014/01/08 职场文书
大学生学期自我鉴定
2014/03/19 职场文书
股权转让协议书范本
2014/04/12 职场文书
关于国庆节的演讲稿
2014/09/05 职场文书
机械制造专业大学生自我鉴定
2014/09/19 职场文书
2014最新党员违纪检讨书
2014/10/12 职场文书
MySQL COUNT函数的使用与优化
2021/05/10 MySQL
Python内置包对JSON文件数据进行编码和解码
2022/04/12 Python