BootstrapTable 表格插件
BootStrap Table 下载：https://v3.bootcss.com/getting-started/
BootStrap Table Css：https://v3.bootcss.com/css/
BootStrap Table 组件：https://v3.bootcss.com/components/
附上一个BootStrapTablle的简单例子：
效果：
目录结构：
代码：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
<title>Bootstrap 101 Template</title> <!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/bootstrap-table.min.css" rel="stylesheet"> <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
<!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
<!--[if lt IE 9]>
<script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
<![endif]-->
<style>
#mytab thead{background: #5488c4;}
#mytab tr:nth-child(even){
background:#f4f8fb;
}
</style>
</head>
<body>
<table id="mytab" class="table table-hover"></table>
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="js/jquery.min.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="js/bootstrap.min.js"></script>
<!-- 加载 Bootstrap-Table 插件 -->
<script src="js/bootstrap-table.min.js"></script>
<!-- 汉化插件 -->
<script src="js/bootstrap-table-zh-CN.min.js"></script>
<script type="application/javascript">
$('#mytab').bootstrapTable({
url: 'json/data.json',
queryParams: "queryParams",
toolbar: "#toolbar",
sidePagination: "true",
striped: true, // 是否显示行间隔色
search : "true",
uniqueId: "ID",
pageSize: "5",
pagination: true, // 是否分页
sortable: true, // 是否启用排序
showToggle:true,
columns: [{
field: 'id',
title: '登录名'
},
{
field: 'name',
title: '昵称'
},
{
field: 'price',
title: '角色'
},
{
field: 'price',
title: '操作',
width: 120,
align: 'center',
valign: 'middle',
formatter: actionFormatter,
}, ]
});
//操作栏的格式化
function actionFormatter(value, row, index) {
var id = value;
var result = "";
result += "<a href='javascript:;' class='btn btn-xs blue' onclick=\"EditViewById('" + id + "')\" title='编辑'><span class='glyphicon glyphicon-pencil'></span>编辑</a>";
result += "<a href='javascript:;' class='btn btn-xs red' onclick=\"DeleteByIds('" + id + "')\" title='删除'><span class='glyphicon glyphicon-remove'></span>删除</a>";
return result;
}
</script>
</body>
</html>
BootstrapTable 表格插件的更多相关文章
- 结合bootstrap fileinput插件和Bootstrap-table表格插件，实现文件上传、预览、提交的导入Excel数据操作流程
1.bootstrap-fileinpu的简单介绍 在前面的随笔,我介绍了Bootstrap-table表格插件的具体项目应用过程,本篇随笔介绍另外一个Bootstrap FieInput插件的使用, ...
- bootstrap-table表格插件的使用案例
近期刚刚结束一个项目,总结一下之前做的一个后台管理系统中用到的bootstrap-table表格插件,下面是我做的一个案例(展示主要代码部分): //请求服务数据时所传参数 function quer ...
- 在Bootstrap开发框架中使用bootstrapTable表格插件和jstree树形列表插件时候，对树列表条件和查询条件的处理
在我Boostrap框架中,很多地方需要使用bootstrapTable表格插件和jstree树形列表插件来共同构建一个比较常见的查询界面,bootstrapTable表格插件主要用来实现数据的分页和 ...
- Bootstrap-table表格插件的使用方法
前言 上次写了一个可拖动列表的插件,但除了这个特点没什么优点了,接下写的是我们常用的Bootstrap-table表格插件 正文 官网:https://bootstrap-table.com/ 有两个 ...
- ABP入门系列（14）——应用BootstrapTable表格插件
ABP入门系列目录--学习Abp框架之实操演练 源码路径:Github-LearningMpaAbp 1. 引言 之前的文章ABP入门系列(7)--分页实现讲解了如何进行分页展示,但其分页展示仅适用于 ...
- 基于JQuery可拖动列表格插件DataTables的踩坑记
前言 最近项目中在使用能够拖动列调整列位置顺序的表格插件---DataTables,这也是目前我找到的唯一一种存在有这种功能的插件. 在查找使用方法的过程中发现可用案例并不多,且大多言语不详.本文将全 ...
- bootstrap表格插件——Bootstrap-Table
注:本文引用自:http://www.cnblogs.com/wuhuacong/p/7284420.html 一.概述 1.是什么 是一个基于bootstrap的灌数据式的表格插件 2.能干什么 可 ...
- Bootstrap Bootstrap表格插件bootstrap-table配置与应用小结
Bootstrap表格插件bootstrap-table配置与应用小结 by:授客 QQ:1033553122 1. 测试环境 win7 JQuery-3.2.1.min.js 下载地址: h ...
- 表格插件BootStrap-Table使用教程
Bootstrap table 是一款基于 Bootstrap 的 jQuery 表格插件,功能比较完备,能够实现数据异步获取,编辑,排序等一系列功能. 官网https://bootstrap-tab ...
随机推荐
- rabbitmq监控之消息确认ack
rabbitmq springboot ack 监控 一.测试环境 二.启动测试 一直以来,学习rabbitmq都是跟着各种各样的教程.博客.视频和文档,撸起袖子就是干!!!最后,也成功了. 当然,成 ...
- 设计模式--Bulider模式
起因:最近在做统计计算,创建的实体中属性比较多,都是一些数值,一开始是通过get.set方法进行赋值,占用了很多业务代码方法的长度,可读性不太好,后来改用了添加构造器的方式,稍显精简了一点,但是每次赋 ...
- JavaScript学习笔记(6月份)
由于笔记比较杂,本身学习程度并不理想,所以暂时没有整理这些繁杂的笔记. ps:博客园markdown用起来和看起来都舒服太多了,这才是我了解的那个markdown,又回来了! 笔记 DOM对象 doc ...
- Eclipse中run as run on server和run as java application
一.run java application (作为Java应用程序运行)是运行 java main方法 run on server是启动一个web 应用服务器 二.两者的区别: Eclipse中 ...
- Flink入门 - 窗口函数
/* * ProcessWinFunOnWindow */ final StreamExecutionEnvironment streamExecutionEnvironment = StreamEx ...
- 在Spring中使用AspectJ实现AOP
在Spring中,最常用的AOP框架是AspectJ,使用AspectJ实现AOP有2种方式: 基于XML的声明式AspectJ 基于注解的声明式AspectJ 基于XML的声明式AspectJ 1. ...
- 机器学习 | 聚类分析总结 & 实战解析
聚类分析是没有给定划分类别的情况下,根据样本相似度进行样本分组的一种方法,是一种非监督的学习算法.聚类的输入是一组未被标记的样本,聚类根据数据自身的距离或相似度划分为若干组,划分的原则是组内距离最小化 ...
- 【OGG】 RAC环境下管理OGG的高可用 (五)
[OGG] RAC环境下管理OGG的高可用 (五) 一.1 BLOG文档结构图 一.2 前言部分 一.2.1 导读 各位技术爱好者,看完本文后,你可以掌握如下的技能,也可以学到一些其它你所不知道 ...
- Flask--配置文件
配置文件 配置文件的方式有很多,下面介绍两种: 第一种:根据全局变量实现 App.py from flask import Flask, session app = Flask(__name__) # ...
- ssm的maven项目启动tomcat时报错，Cannot find class: XXXX解决办法
最近在写一个ssm的项目,启动总是报错.原因网上查了也没找到.最后终于解决.下面直接上代码 问题描述: 严重: Allocate exception for servlet ssm-dispatche ...