暂时够用,不够用再补充 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. README 语法记录

    转自:nblogs.com/liugang-vip/p/6337580.html 正文: 1.标题的几种写法: 第一种:     前面带#号,后面带文字,分别表示h1-h6,上图可以看出,只到h6,而 ...

  2. hive_连续天次计算

    drop table sospdm.tmp_yinfei_yuanzuan_redbag; create table sospdm.tmp_yinfei_yuanzuan_redbag stored ...

  3. ELM:ELM基于近红外光谱的汽油测试集辛烷值含量预测结果对比—Jason niu

    %ELM:ELM基于近红外光谱的汽油测试集辛烷值含量预测结果对比—Jason niu load spectra_data.mat temp = randperm(size(NIR,1)); P_tra ...

  4. MySQL数据库基本用法-聚合-分组

    聚合 为了快速得到统计数据,提供了5个聚合函数 count(*)表示计算总行数,括号中写星与列名,结果是相同的 查询学生总数 select count(*) from students; max(列) ...

  5. Linux学习笔记 3 权限篇

    chmod 查看命令 ls -l -  rwx             r_x              r_x            4              user      grop    ...

  6. Android-自定义View前传-View的三大流程-Layout

    Android-自定义View前传-View的三大流程-Layout 参考 <Android开发艺术探索> https://github.com/hongyangAndroid/FlowL ...

  7. 骚气男孩saochi boy 唐砖 插曲

    试听下载链接:https://pan.baidu.com/s/1ObB9FYbgzegcE25io6zCEg

  8. BZOJ.1805.[IOI2007]sail船帆(贪心 线段树)

    BZOJ 洛谷 首先旗杆的顺序没有影响,答案之和在某一高度帆的总数有关.所以先把旗杆按高度排序. 设高度为\(i\)的帆有\(s_i\)个,那么答案是\(\sum\frac{s_i(s_i-1)}{2 ...

  9. Docker——error pulling image configuration

    执行Docker命令 $ docker image build . 报错如下: error pulling image configuration: Get https://production.cl ...

  10. $.extends 继承原理

    <script type="text/javascript"> function mixs (){ var arg = arguments; var i = 1; ta ...