bootstrap table表格使用方法详解

2024-12-20 12:42:14

本文实例为大家分享了bootstrap table表格的使用方法，供大家参考，具体内容如下

1.进入页面，根据指定的URL加载数据(json格式)

2.加载成功，根据$table.bootstrapTable({options})显示表格样式。

感觉还是挺漂亮的哈，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即可。

服务端搜索，需要设置参数。

首先设置

("#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实现单击单元格可编辑功能

要使bootstrap-table实现可编辑,需要配合使用x-editable插件. 先在页面上导入必要的css和js文件 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <
Angularjs+bootstrap+table多选（全选）支持单击行选中实现编辑、删除功能

最终实现效果: index.html <!DOCTYPE html> <html> <head> <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.js"></script> <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-animat
bootstrap table表格插件使用详解

bootstrp-table学习,具体内容如下 $table.bootstrapTable({ url: '../data/data1.json', striped: true, minimumCountColumns: 2, clickToSelect: true, detailView: true, detailFormatter: 'detailFormatter', pagination: true, paginationLoop: false, classes: 'table tabl
Bootstrap table使用方法总结

最近接触一个很棒的插件,Bootstrap table 没做过前端的表示对table的印象还只停留在html的table标签那一套,用过bootstrap table之后不得不说真是牛. 构造方式 1 .HTML <div class="btn-group hidden-xs"id="exampleTableEventsToolbar" > //定义一系列工具栏... </div> <table data-toggle="ta
bootstrap table sum总数量统计实现方法

写了一个分页要显示数据中所有金额的总数但是使用footerformatter 却不知道该怎么赋值没办法只能放到页脚了先上个效果图: 这样做要修改源码: bootstrap-table.js 1:定义一个名称 2: 3: 4: 5: 如果你在后台传过来值和第一步中引号内的值一样的时候就会出现如下效果图最后返回json样式是这样的: {"total":2,"rows":[{"id":1,"categoryid":11,&q
bootstrap table动态加载数据示例代码

我最近在研究bootstrap的学习路上,那么今天也算个学习笔记吧! 效果如下: 点击选择按钮,弹出模态框,加载出关键词列表 TABLE样式: <div class="modal fade " id="ClickModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" &
bootstrap table表格使用方法详解

本文实例为大家分享了bootstrap table表格的使用方法,供大家参考,具体内容如下 1.进入页面,根据指定的URL加载数据(json格式) 2.加载成功,根据$table.bootstrapTable({options})显示表格样式. 感觉还是挺漂亮的哈,OK,下面贴代码解释功能. 开始之前,当然要引用js啦 <link href="~/Content/bootstrap.min.css" rel="stylesheet" /> <lin
C#实现从PDF中提取表格的方法详解

目录程序环境从PDF中提取表格具体步骤完整代码 PDF是办公中比较常见的一种文件格式,在工作中应用也越来越普遍.由于PDF文件集成度和安全可靠性都较高,所以在PDF中编辑内容是一件比较复杂且困难的事.但有时因工作需要,要求我们从中提取数据或表格该怎么办呢?别担心,今天为大家介绍一种通过C#/VB.NET代码从PDF中提取表格内容的方法.下面是我整理的思路步骤及代码供大家参考. 程序环境本次测试时,在程序中引入 Spire.PDF.dll 文件. 方法1: 将 Free Spire.
利用Vue3实现可复制表格的方法详解

目录前言最基础的表格封装实现复制功能处理表格中的不可复制元素测试前言表格是前端非常常用的一个控件,但是每次都使用v-for指令手动绘制tr/th/td这些元素是非常麻烦的.同时,基础的 table 样式通常也是不满足需求的,因此一个好的表格封装就显得比较重要了. 最基础的表格封装最基础基础的表格封装所要做的事情就是让用户只关注行和列的数据,而不需要关注 DOM 结构是怎样的,我们可以参考 AntDesign,columns dataSource 这两个属性是必不可少的,代码如下:
Java实现添加条形码到PDF表格的方法详解

目录程序环境代码示例条码的应用已深入生活和工作的方方面面.在处理条码时,常需要和各种文档格式相结合.当需要在文档中插入.编辑或者删除条码时,可借助于一些专业的类库工具来实现.本文,以操作PDF文件为例,介绍如何在编辑表格时,向单元格中添加条形码. 程序环境本次功能测试中,使用 Free Spire.PDF for Java. 实现功能的大致思路:生成条形码,将条形码保存为图片,然后在PDF中的表格单元格中插入条码图片. Spire.PDF for Java 中的Spire.Pdf.Bar
JavaScript实现动态表格的方法详解

目录 JavaScript实现动态表格基本效果如下代码如下: 第一种方式(较简单,建议使用) 方式二改进版代码如下: 总结 JavaScript实现动态表格 (改建版,代码见最下面) 基本效果如下点击添加,可以将输入框中的值,新增到表格中:点击删除可以删除本行内容. 代码如下: 第一种方式(较简单,建议使用) <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF
JS组件Bootstrap导航条使用方法详解

导航条是在您的应用或网站中作为导航标头的响应式元组件. 1.默认的导航条导航条在移动设备上可以折叠(并且可开可关),且在可用的视口宽度增加时变为水平展开模式定制折叠模式与水平模式的阈值根据你所放在导航条上的内容的长度,也许你需要调整导航条进入折叠模式和水平模式的阈值.通过改变@grid-float-breakpoint变量的值或加入您自己的媒体查询CSS代码均可实现你的需求. 第一步: 最外面的容器nav标签,并添加nav-bar样式类,表示这里面属于导航条 <nav class="
Bootstrap表格使用方法详解

下表列出了 Bootstrap 支持的一些表格元素: 表格类: .table:为任意 <table> 添加基本样式 (只有横向分隔线) .table-striped:在 <tbody> 内添加斑马线形式的条纹 ( IE8 不支持) .table-bordered:为所有表格的单元格添加边框 .table-hover:在 <tbody> 内的任一行启用鼠标悬停状态 .table-condensed:让表格更加紧凑 <tr>, <th> 和 <
bootstrap输入框组件使用方法详解

本文实例为大家分享了bootstrap输入框组的具体使用方法,供大家参考,具体内容如下 1.基本用法我们有时需要在输入框一侧或两侧添加额外的元素这个时候只需要把所有元素都包裹在一个.input-group的div里面就可以但是每个输入框组只能有一个input <div class="input-group"> <span class="input-group-addon">@</span> <input type=&q
使用c#在word文档中创建表格的方法详解

复制代码代码如下: public string CreateWordFile() { string message = ""; try { Object Nothing = System.Reflection.Missing.Value; string name = "xiehuan.doc";

bootstrap table表格使用方法详解

相关推荐

随机推荐