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 ...
随机推荐
- Scala 系列（一）—— Scala 简介及开发环境配置
一.Scala简介 1.1 概念 Scala 全称为 Scalable Language,即"可伸缩的语言",之所以这样命名,是因为它的设计目标是希望伴随着用户的需求一起成长.Sc ...
- Java Annontation 注解的学习和理解
/** * <html> * <body> * <P> Copyright 1994 JsonInternational</p> * <p> ...
- 1014 福尔摩斯的约会（C#）
一.题目内容: 大侦探福尔摩斯接到一张奇怪的字条:我们约会吧! 3485djDkxh4hhGE 2984akDfkkkkggEdsb s&hgsfdk d&Hyscvnm.大侦探很快就 ...
- SQL Injection (Blind)
Low级别基于布尔的盲注思路 1.判断是否存在注入,注入是字符型还是数字型 2.猜解当前数据库名 3.猜解数据库中的表名 4.猜解表中的字段名 5.猜解数据 判断是否有sql注入 输入1.1’ and ...
- 【vue】vue生命周期---精简易懂-----【XUEBIG】
主要的生命周期函数分类: - 创建期间的生命周期函数:(只会调用一次) + beforeCreate:实例刚在内存中被创建出来,此时,还没有初始化好 data 和 methods 属 ...
- Excel内部编码查看与验证工具
Excel 2007 以前版本 MS-XLS内部结构:BIFF格式 https://docs.microsoft.com/en-us/openspecs/office_file_formats/ms- ...
- IDEA中安装及配置SVN
1.TortoiseSvn(小乌龟下载地址): https://tortoisesvn.net/downloads.html 2.下载完SVN安装包后,在本机安装SVN(小乌龟),注意安装的时候添加上 ...
- django数据表生成
在创建的app中models.py生成表结构 class 表名(models.Model): #表名一般首字母大写 中突出信息的大写 列名=models.Charfield(max_lenth=) # ...
- SQL进阶系列之10HAVING子句又回来了
写在前面 HAVING子句的处理对象是集合而不是记录 各队,全队点名 --各队,全体点名! CREATE TABLE Teams (member CHAR(12) NOT NULL PRIMARY K ...
- Codeforces C. Jzzhu and Cities（dijkstra最短路）
题目描述: Jzzhu and Cities time limit per test 2 seconds memory limit per test 256 megabytes input stand ...