bootstrap table 的简单Demo
暂时够用,不够用再补充 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>
官网案例:http://bootstrap-table.wenzhixin.net.cn/zh-cn/examples/
bootstrap table 的简单Demo的更多相关文章
- bootstrap table 前后端分页(超级简单)
前端分页:数据库查询所有的数据,在前端进行分页 后端分页:每次只查询当前页面加载所需要的那几条数据 下载bootstrap 下载bootstrap table jquery谁都有,不说了 项目结构:T ...
- Bootstrap table的一些简单使用总结
在GitHub上Bootstrap-table的源码地址是:https://github.com/wenzhixin/bootstrap-table Bootstrap-table的文档地址:http ...
- bootstrap Table API和一些简单使用方法
官网: http://bootstrap-table.wenzhixin.net.cn/zh-cn/documentation/ 后端分页问题:后端返回”rows”.“”total,这样才能重新赋值 ...
- JS组件系列——表格组件神器:bootstrap table
前言:之前一直在忙着各种什么效果,殊不知最基础的Bootstrap Table用法都没有涉及,罪过,罪过.今天补起来吧.上午博主由零开始自己从头到尾使用了一遍Bootstrap Table ,遇到不少 ...
- 使用bootstrap table小记(表格组件)
前言 新的一年悄然到来,生活依旧.最近一周大热的赵雷风,一首<成都>,一首<理想>再次把民谣展示在国人面前.歌词着实写的不错. 理想,你今年几岁 你总是诱惑着年轻的朋友 你总是 ...
- 表格组件神器:bootstrap table详细使用指南
1.bootstrap-table简介 1.1.bootstrap table简介及特征: Bootstrap table是国人开发的一款基于 Bootstrap 的 jQuery 表格插件,通过简单 ...
- bootstrap table使用参考
https://www.cnblogs.com/landeanfen/p/5821192.html 转载 阅读目录 一.x-editable组件介绍 二.bootstrapTable行内编辑初始方案 ...
- ABP module-zero +AdminLTE+Bootstrap Table+jQuery权限管理系统第十四节--后台工作者HangFire与ABP框架Abp.Hangfire及扩展
返回总目录:ABP+AdminLTE+Bootstrap Table权限管理系统一期 HangFire与Quartz.NET相比主要是HangFire的内置提供集成化的控制台,方便后台查看及监控,对于 ...
- [转]手把手教你--Bootstrap Table表格插件及数据导出(可导出Excel2003及Exce2007)
原文地址:https://blog.csdn.net/javayoucome/article/details/80081771 1.介绍 Bootstrap Table介绍见官网:http://boo ...
随机推荐
- README 语法记录
转自:nblogs.com/liugang-vip/p/6337580.html 正文: 1.标题的几种写法: 第一种: 前面带#号,后面带文字,分别表示h1-h6,上图可以看出,只到h6,而 ...
- hive_连续天次计算
drop table sospdm.tmp_yinfei_yuanzuan_redbag; create table sospdm.tmp_yinfei_yuanzuan_redbag stored ...
- ELM:ELM基于近红外光谱的汽油测试集辛烷值含量预测结果对比—Jason niu
%ELM:ELM基于近红外光谱的汽油测试集辛烷值含量预测结果对比—Jason niu load spectra_data.mat temp = randperm(size(NIR,1)); P_tra ...
- MySQL数据库基本用法-聚合-分组
聚合 为了快速得到统计数据,提供了5个聚合函数 count(*)表示计算总行数,括号中写星与列名,结果是相同的 查询学生总数 select count(*) from students; max(列) ...
- Linux学习笔记 3 权限篇
chmod 查看命令 ls -l - rwx r_x r_x 4 user grop ...
- Android-自定义View前传-View的三大流程-Layout
Android-自定义View前传-View的三大流程-Layout 参考 <Android开发艺术探索> https://github.com/hongyangAndroid/FlowL ...
- 骚气男孩saochi boy 唐砖 插曲
试听下载链接:https://pan.baidu.com/s/1ObB9FYbgzegcE25io6zCEg
- BZOJ.1805.[IOI2007]sail船帆(贪心 线段树)
BZOJ 洛谷 首先旗杆的顺序没有影响,答案之和在某一高度帆的总数有关.所以先把旗杆按高度排序. 设高度为\(i\)的帆有\(s_i\)个,那么答案是\(\sum\frac{s_i(s_i-1)}{2 ...
- Docker——error pulling image configuration
执行Docker命令 $ docker image build . 报错如下: error pulling image configuration: Get https://production.cl ...
- $.extends 继承原理
<script type="text/javascript"> function mixs (){ var arg = arguments; var i = 1; ta ...