暂时够用,不够用再补充 T_T

script:

<link rel="stylesheet" href="lib/bootstrap.min.css">
<!-- table css-->
<link rel="stylesheet" href="lib/bootstrap-table.css"><script src="lib/jquery-1.11.1.min.js"></script>
<script src="lib/bootstrap.min.js"></script>
<!--table js-->
<script src="lib/bootstrap-table.js"></script>
<script>$(function () {var data = [{uid: "7791",name: "keenleung1",age: "26",height: "165",description: "描述"},{uid: "7792",name: "keenleung2",age: "26",height: "165",description: "描述"},{uid: "7793",name: "keenleung3",age: "26",height: "165",description: "描述"},{uid: "7794",name: "keenleung4",age: "26",height: "165",description: "描述"},{uid: "7795",name: "keenleung5",age: "26",height: "165",description: "描述"},];$('#table').bootstrapTable('load', data);var $result = $('#eventsResult');// 选择一行$('#table').on('click-row.bs.table', function (e, row, $element) {alert(JSON.stringify(row.uid));});});function actionFormatter(value, row, index) {return ["<button class='btn btn-primary like'>选取</button>","<button class='btn btn-default unlike'>取消</button>",].join('');}window.actionEvents = {'click .like': function (e, value, row, index) {alert(JSON.stringify(row));return false;},'click .unlike': function (e, value, row, index) {alert("unlike click");return false;},};
</script>
<style type="text/css"></style>
<script type="text/javascript"></script>

html:

<div class="alert alert-success" id="eventsResult">Here is the result of event.
</div>
<table id="table" data-toggle="table"><thead><tr><th data-field="name">姓名</th><th data-field="age">年龄</th><th data-field="height">身高</th><th data-field="description">描述</th><th class="text-left" data-field="action" data-formatter="actionFormatter" data-events="actionEvents">操作</th></tr></thead>
</table>

>>>source in GIT

官网案例:http://bootstrap-table.wenzhixin.net.cn/zh-cn/examples/

转载于:https://www.cnblogs.com/KeenLeung/p/6496626.html

bootstrap table 的简单Demo相关推荐

  1. bootstrap Table API和一些简单使用方法

    官网: http://bootstrap-table.wenzhixin.net.cn/zh-cn/documentation/ 后端分页问题:后端返回"rows"."& ...

  2. bootstrap table使用参考

    https://www.cnblogs.com/landeanfen/p/5821192.html  转载 阅读目录 一.x-editable组件介绍 二.bootstrapTable行内编辑初始方案 ...

  3. JS组件系列——表格组件神器:bootstrap table

    前言:之前一直在忙着各种什么效果,殊不知最基础的Bootstrap Table用法都没有涉及,罪过,罪过.今天补起来吧.上午博主由零开始自己从头到尾使用了一遍Bootstrap Table ,遇到不少 ...

  4. 一、bootstrap table 初体验

    http://blog.csdn.net/yin767833376/article/details/52153487 前言:之前一直在忙着各种什么效果,殊不知最基础的Bootstrap Table用法 ...

  5. bootstrap table php,Bootstrap Table使用方法详解

    bootstrap-table使用总结 bootstrap-table是在bootstrap-table的基础上写出来的,专门用于显示数据的表格插件.而bootstrap是来自 Twitter,是目前 ...

  6. Bootstrap Table表格分页的使用及分页数据(Excel)导出

    ####相关文档 Bootstrap Table官网:http://bootstrap-table.wenzhixin.net.cn/zh-cn/ Bootstrap 中文网:http://www.b ...

  7. ABP module-zero +AdminLTE+Bootstrap Table+jQuery权限管理系统第十四节--后台工作者HangFire与ABP框架Abp.Hangfire及扩展...

    返回总目录:ABP+AdminLTE+Bootstrap Table权限管理系统一期 HangFire与Quartz.NET相比主要是HangFire的内置提供集成化的控制台,方便后台查看及监控,对于 ...

  8. Bootstrap Table表格插件的使用及数据导出

    文章目录 1.介绍 2.页面引用 3.简单示例 4.注意地方 5.演示图 1.介绍 Bootstrap Table介绍见官网:http://bootstrap-table.wenzhixin.net. ...

  9. bootstraptable 汇总_JS组件系列——表格组件神器:bootstrap table

    前言:前面介绍了两篇关于bootstrap table的基础用法,这章我们继续来看看它比较常用的一些功能,来个终结篇吧,毛爷爷告诉我们做事要有始有终~~bootstrap table这东西要想所有功能 ...

最新文章

  1. 理解 Linux 的虚拟内存
  2. 大系统化小之后,微信如何解决大规模微服务下的难题?
  3. MFC Windows 消息发送顺序
  4. python 实现倒排索引,建立简单的搜索引擎
  5. 口语语言理解(SLU)最新资源库:综述、数据集、开源论文
  6. laravel 框架中使用数据库迁移添加注释
  7. mysql-on duplicate key update实现insertOrUpdate官方文档
  8. 三:大型网站的核心架构要素
  9. 高品质餐饮相关场景模型素材,开始独特的场景来展示设计。
  10. Flutter 高级篇-所有知识点架构
  11. 苹果mac三维动画设计渲染软件:Cinema 4D R20 (c4d r20)
  12. 量化小科普【什么是量化?常用的股票量化指标、如何搭建量化交易系统】
  13. win 10 使用技巧总结
  14. win10没有indexed文件_不止用来切程序,Win10任务栏还能这么玩
  15. python删除单元格_Openpyxl删除单元格/清除内容
  16. c语言生成excel文件简书,iOS 生成Excel xlsx文件
  17. P沟道mos管作为开关的条件(GS GS(TH))
  18. 【SQL学习笔记】之数据定义语言(DDL)
  19. php简单抽奖,php 简单随机抽奖函数的简单示例
  20. 高性能本地缓存Ristretto(三)——淘汰策略

热门文章

  1. 后序线索树怎样画图_算法新解刘新宇(二)二叉搜索树:数据结构中的“hello world”...
  2. 【Pytorch神经网络实战案例】11 循环神经网络结构训练语言模型并进行简单预测
  3. html css配色方案,链接css不同的配色方案问题
  4. python将txt转json_Python控制乐高EV3,以及VSCODE环境配置
  5. python网络爬虫系列(四)——requests模块
  6. 程序员面试金典 - 面试题 05.04. 下一个数(线性扫描)
  7. LeetCode 6. Z 字形变换(找规律)
  8. 剑指Offer - 面试题11. 旋转数组的最小数字(二分查找)
  9. LeetCode 807. 保持城市天际线
  10. 天玑720支持鸿蒙系统吗,天玑720属于骁龙多少 天玑720处理器相当于骁龙几