暂时够用,不够用再补充 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/

bootstrap table 的简单Demo的更多相关文章

  1. bootstrap table 前后端分页(超级简单)

    前端分页:数据库查询所有的数据,在前端进行分页 后端分页:每次只查询当前页面加载所需要的那几条数据 下载bootstrap 下载bootstrap table jquery谁都有,不说了 项目结构:T ...

  2. Bootstrap table的一些简单使用总结

    在GitHub上Bootstrap-table的源码地址是:https://github.com/wenzhixin/bootstrap-table Bootstrap-table的文档地址:http ...

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

    官网: http://bootstrap-table.wenzhixin.net.cn/zh-cn/documentation/ 后端分页问题:后端返回”rows”.“”total,这样才能重新赋值 ...

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

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

  5. 使用bootstrap table小记(表格组件)

    前言 新的一年悄然到来,生活依旧.最近一周大热的赵雷风,一首<成都>,一首<理想>再次把民谣展示在国人面前.歌词着实写的不错. 理想,你今年几岁 你总是诱惑着年轻的朋友 你总是 ...

  6. 表格组件神器:bootstrap table详细使用指南

    1.bootstrap-table简介 1.1.bootstrap table简介及特征: Bootstrap table是国人开发的一款基于 Bootstrap 的 jQuery 表格插件,通过简单 ...

  7. bootstrap table使用参考

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

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

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

  9. [转]手把手教你--Bootstrap Table表格插件及数据导出(可导出Excel2003及Exce2007)

    原文地址:https://blog.csdn.net/javayoucome/article/details/80081771 1.介绍 Bootstrap Table介绍见官网:http://boo ...

随机推荐

  1. Python traceback 模块,追踪错误

    Python traceback 模块,追踪错误 import traceback try: your code except: traceback.print_exc()

  2. box-shadow阴影 三面显示

    想弄个只显示三面的阴影效果,网上一搜没有解决根本问题,最后还是在css3演示里面找到方法http://www.css88.com/tool/css3Preview/Box-Shadow.html 我把 ...

  3. 【JavaScript】浏览器

    No1: [window]全局作用域,而且表示浏览器窗口 innerWidth和innerHeight属性,可以获取浏览器窗口的内部宽度和高度.内部宽高是指除去菜单栏.工具栏.边框等占位元素后,用于显 ...

  4. VS2017 下载离线MSDN文档

    VS2017 下载离线MSDN文档 点开帮助窗口的时候发现没有添加和删除帮助内容选项.处理方法如下: 1.打开vs2017安装包,如果你找不到安装包,可在相应你下载vs2017的浏览器上找到下载内容, ...

  5. Pushing Boxes POJ - 1475 (嵌套bfs)

    Imagine you are standing inside a two-dimensional maze composed of square cells which may or may not ...

  6. poj1041 【无向图欧拉回路】 按最小升序输出

    题目链接:http://poj.org/problem?id=1041 题目大意: 题目大意:一个城镇有n个二叉路口,这些路口由m条街道连接,某人想要从某个路口出发,经过所有的街道且每条街道只走一次, ...

  7. fluxion-wifi破解/钓鱼

    转载内容,侵删 https://bbs.ichunqiu.com/thread-24085-1-5.html     0x00前言:         有人说我比那些收费的平台更可恨,因为我写教程不收费 ...

  8. css美化滚动条

    一.滚动条出现的地方1.浏览器边框,当页面内容超过浏览器视窗大小:2.textarea,内容过多时:3.iframe:4.div或任何block元素,当它们的被设定成overflow属性时. 二.cs ...

  9. C#中的集合之ArryList

    List泛型集合 集合是OOP中的一个重要概念,C#中对集合的全面支持更是该语言的精华之一. 为什么要用泛型集合? 在C# 2.0之前,主要可以通过两种方式实现集合: a.使用ArrayList 直接 ...

  10. Sublime Text3 最新版本V3.1.1 build3117注册码,亲测可以完美激活~

    Sublime Text 3 最新注册码 官网下载的最新版本V3.1.1 build3117,亲测以下注册码可以正常激活 ----- BEGIN LICENSE ----- sgbteam Singl ...