欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

bootstrap table表格使用方法详解

程序员文章站 2022-05-30 08:36:44
本文实例为大家分享了bootstrap table表格的使用方法，供大家参考，具体内容如下 1.进入页面，根据指定的url加载数据(json格式) 2.加载成功，根...

本文实例为大家分享了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>

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

上一篇： 离魂记

下一篇： 移动端使用localResizeIMG4压缩图片

推荐阅读