bootstrap-table 基础用法
1.需要添加的引用。
<script src="@Url.Content("~/js/jquery-2.1.1.js")"></script>
<script src="@Url.Content("~/js/bootstrap.min.js")"></script>
<script src="@Url.Content("~/js/bootstrap-table.js")"></script>
<script src="@Url.Content("~/js/bootstrap-table-zh-CN.js")"></script>
2.完整的HTML
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="@Url.Content("~/js/jquery-2.1.1.js")"></script>
<link href="@Url.Content("~/css/bootstrap.min.css")" rel="stylesheet">
<link href="@Url.Content("~/font-awesome/css/font-awesome.css")" rel="stylesheet">
<link href="@Url.Content("~/css/plugins/iCheck/custom.css")" rel="stylesheet">
<link href="@Url.Content("~/css/animate.css")" rel="stylesheet">
<link href="@Url.Content("~/css/style.css")" rel="stylesheet">
<script src="@Url.Content("~/js/jquery-ui-1.10.4.min.js")"></script>
<script src="@Url.Content("~/js/bootstrap.min.js")"></script>
<script src="@Url.Content("~/js/bootstrap-table.js")"></script>
<script src="@Url.Content("~/js/bootstrap-table-zh-CN.js")"></script>
<script src="@Url.Content("~/js/selectjs/bootstrap-select.js")"></script>
<link href="@Url.Content("~/js/selectjs/bootstrap-select.min.css")" rel="stylesheet" />
<script src="@Url.Content("~/js/selectjs/defaults-zh_CN.js")"></script>
<script src="@Url.Content("~/js/layer/layer.js")"></script>
<script src="@Url.Content("~/js/bootstrap.min.js")"></script>
<script src="@Url.Content("~/js/plugins/metisMenu/jquery.metisMenu.js")"></script>
<script src="@Url.Content("~/js/plugins/slimscroll/jquery.slimscroll.min.js")"></script> <!-- Custom and plugin javascript -->
<script src="@Url.Content("~/js/inspinia.js")"></script>
<script src="@Url.Content("~/js/plugins/pace/pace.min.js")"></script> <!-- iCheck -->
<script src="@Url.Content("~/js/plugins/iCheck/icheck.min.js")"></script>
<!-- Jvectormap -->
<script src="@Url.Content("~/js/plugins/jvectormap/jquery-jvectormap-2.0.2.min.js")"></script>
<script src="@Url.Content("~/js/plugins/jvectormap/jquery-jvectormap-world-mill-en.js")"></script>
<script src="@Url.Content("~/js/JsIFrame.js")"></script>
<script src="@Url.Content("~/js/layer/jquery.form.min.js")"></script>
<script src="@Url.Content("~/js/ReportManage.js")"></script> </head> <body onload="IFrameResize()">
<div style="background-color:#f3f3f3;height:100%">
<div class="row">
<div class="col-lg-12">
<div class="ibox float-e-margins"> <div class="ibox-title">
<h5>科技查新报告单管理</h5>
<div class="ibox-tools">
<a class="collapse-link">
<i class="fa fa-chevron-up"></i>
</a>
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
<i class="fa fa-wrench"></i>
</a>
<a class="close-link">
<i class="fa fa-times"></i>
</a>
</div>
</div>
<div class="ibox-content">
<table id="cateTable" style="table-layout:fixed;word-break:break-all" data-toggle="table">
<thead>
<tr>
<th data-field="ID" data-editable="true">ID</th>
<th data-field="ReportNum">报告单编号</th>
<th data-field="PrjName_CN" data-editable="true">委托单名称</th>
<th data-field="Status" data-editable="true">状态</th>
<th data-field="Addtime" data-editable="true">添加时间</th>
</tr>
</thead>
</table> </div> </div> </div>
</div>
</div>
</body>
</html>
3. Ajax所在的JS代码 （ <script src="@Url.Content("~/js/ReportManage.js")"></script>）
var ztable = null;
$(function () { InitTable();
}); //初始加载table
function InitTable() { //先销毁表格
$('#cateTable').bootstrapTable('destroy');
//初始化表格,动态从服务器加载数据
ztable = $('#cateTable').bootstrapTable(
{
url: '../NoveltyReport/GetAllReport', //请求后台的URL（*）
method: 'get', //请求方式（*） //工具按钮用哪个容器
striped: true, //是否显示行间隔色
cache: false, //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
pagination: true, //是否显示分页（*）
search: true,
sortOrder: "asc", //排序方式
sidePagination: "client",
pageNumber: 1, //初始化加载第一页，默认第一页
pageSize: 10, //每页的记录行数（*）
strictSearch: true,
queryParamsType: "undefined", onPageChange: function (number, size) { //PageChanged();
},
onClickCell: function (field, value, row, $element) {
if (field == 7) {
DeleteProxyByID(row.ID);
} else if (field == 6) {
location.href = "../NoveltyReport/ReportEdit?ReportID=" + row.ID + "&&ProxyID=" + row.ProxyID;
} else if (field == 9) {
SubitShenHe(row);
} else if (field == 8) {
location.href = "../Word/DownLoadReport?reportID="+row.ID;
} }, clickToSelect: false, //是否启用点击选中行
//行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
uniqueId: "Id", //每一行的唯一标识，一般为主键列
cardView: false, //是否显示详细视图
detailView: false, //是否显示父子表
columns: [ {
field: 'Number',
title: '行号',
formatter: function (value, row, index) {
return index + 1;
}
},
{
field: 'ID',
title: '序号', },
{
field: 'ReportNum',
title: '报告单编号',
cellStyle: formatTableUnit }, {
field: 'PrjName_CN',
title: '委托单名称',
cellStyle: formatTableUnit
},
{
field: 'Status',
title: '状态',
cellStyle: formatTableUnit }, {
field: 'Addtime',
title: '添加时间',
cellStyle: formatTableUnit },
{
title: "选择",
formatter: operateFormatter
},
{
field: 'ProxyID',
title: '委托单号'
},
{
title: "下 载",
formatter: operateFormatterRed
}, ]
}
);
$("#cateTable").bootstrapTable('hideColumn', 'ID');
$("#cateTable").bootstrapTable('hideColumn', 'ProxyID'); } function formatTableUnit(value, row, index) { return {
css: {
"overflow": "hidden",
"white-space": "nowrap",
"text-overflow": "ellipsis",
" -webkit-line-clamp": "3"
}
} }
function operateFormatter(value, row, index) {
return [
'<button type="button" class="RoleOfA btn btn-default btn-sm" style="margin-right:15px;">查 看</button>',
].join('');
} function operateFormatterRed(value, row, index) {
return [
'<button type="button" class="RoleOfA btn btn-default btn-sm" style="margin-right:15px;">下 载</button>',
].join('');
} function operateFormatterSH(value, row, index) {
return [
'<button type="button" class="RoleOfA btn btn-default btn-sm" style="margin-right:15px;background-color:Blue;">提交审核</button>',
].join(''); } function DeleteProxyByID(RepoprtID) {
layer.confirm('您确定要删除数据？', {
btn: ['确定', '取消'], //按钮
offset: ["10%", "30%"]
}, function () {
$.post("../NoveltyReport/AjaxDeleteReport", { "RepoprtID": RepoprtID }, function (data) {
if (data != "") {
var rs = JSON.parse(data);
if (rs.Result) {
layer.msg("删除成功！");
InitTable();
} else {
layer.msg(rs.Msg);
}
}
});
}, function () { }); } function SubitShenHe(row) {
layer.confirm('您确定将报告单提交审核？', {
btn: ['确定', '取消'], //按钮
offset: ["10%", "30%"]
}, function () {
$.post("../NoveltyReport/SubReportRatify", { "RepoprtID": row.ID }, function (data) {
if (data != "") {
var rs = JSON.parse(data);
if (rs.Result) {
layer.msg("提交审核成功！");
InitTable();
} else {
layer.msg(rs.Msg);
}
}
});
}, function () { }); }
bootstrap-table 基础用法的更多相关文章
- Bootstrap Table 的用法
记录下 Bootstrap Table 的用法,备忘. <!DOCTYPE html> <html> <head> <meta charset="u ...
- web响应式之bootstrap的基础用法。
1/首先必须在head里面引用视窗viewport,以保证之后可以响应式分布 <!--meta:vp 响应式布局--> <meta name="viewport" ...
- bootstrap table footerFormatter用法 统计列求和 sum、average等
其实上一篇blog里已经贴了代码,简单解释一下吧: 1.showFooter: true,很重要,设置footer显示: $(cur_table).bootstrapTable({ url: '/et ...
- JS组件系列——表格组件神器：bootstrap table（二：父子表和行列调序）
前言:上篇 JS组件系列——表格组件神器:bootstrap table 简单介绍了下Bootstrap Table的基础用法,没想到讨论还挺热烈的.有园友在评论中提到了父子表的用法,今天就结合Boo ...
- Bootstrap table的基础用法
一.官方文档 Bootstrap 中文网:http://www.bootcss.com/ Bootstrap Table 中文网 : http://bootstrap-table.wenzhixin. ...
- ABP+AdminLTE+Bootstrap Table权限管理系统第二节--在ABP的基础做数据库脚本处理
返回总目录:ABP+AdminLTE+Bootstrap Table权限管理系统一期 第一点,上一篇文章中我们讲到codefirst中一些问题包括如图,codefirst在每次执行命令的时候会生成新的 ...
- Bootstrap fileinput：文件上传插件的基础用法
官网地址:http://plugins.krajee.com/ 官网提供的样例:http://plugins.krajee.com/file-input/demo 基础用法一 导入核心CSS及JS文件 ...
- BootStrap Table超好用的表格组件基础入门
右侧导航条有目录哟,看着更方便 快速入门 表格构建 API简单介绍 主要研究功能介绍 快速入门 最好的资源官方文档 官方文档地址****https://bootstrap-table.com/docs ...
- bootstrap table教程--使用入门基本用法
笔者在查询bootstrap table资料的时候,看了很多文章,发觉很多文章都写了关于如何使用bootstrap table的例子,当然最好的例子还是官网.但是对于某部分技术人员来说,入门还是不够详 ...
- JS组件系列——表格组件神器：bootstrap table
前言:之前一直在忙着各种什么效果,殊不知最基础的Bootstrap Table用法都没有涉及,罪过,罪过.今天补起来吧.上午博主由零开始自己从头到尾使用了一遍Bootstrap Table ,遇到不少 ...
随机推荐
- vim的tab缩进及用空格设置
编辑~/.vimrc文件,分别设置用空格而不是用tab,一个tab多少个空格,自动缩进多少宽度,显示行号. set expandtabset tabstop=4 set shiftwidth=4 se ...
- C++之log4cpp库的使用
log4..简介 log4..是基于log4j的一系列的c++移植版本,使用了log4j的模式结构,目前主要有以下几个版本: 1. log4cxx, 目前是到0.10.0版,Apache下的孵化项目, ...
- Java类加载器回顾
Java类加载采用了全盘委托机制,默认加载类时子类先会委托给父类加载,但父类加载不到时,子类才会自己尝试加载类.这种机制可以有效防止一个类被加载多次,同时也一定程度上防止重写JDK自身的类[Java自 ...
- app基础
1界面:Layout 2.控件 3.整个窗口:Activity 4. ctrl + H : 查看类的继承关系 5. shift + F1:打开类的文档 6. Button button = (Butt ...
- 微信公众平台：微信JS-SDK Demo
ylbtech-微信公众平台:微信JS-SDK Demo 1. HTML返回顶部 1.demo.html <!DOCTYPE html> <html> <head> ...
- Lotus and Characters (stronger)
题意: 有n类物品,第i种物品权值为$val(i)$,有$cnt(i)$个,现在你可以选出一些物品排成一个序列(假设有m个), 记第i个物品种类为$x_i$,最大化$\sum_{i=1}^m{i * ...
- 3.4-3.6 依据业务需求分析HBase的表设计
一.依据[话单]查询需求分析HBase的表设计 1.分析 用户需要进行实时的查询,那么这些数据是放在HBase当中的,每个客户每天接打电话至少20个左右,而通信公司拥有很多用户,每天产生的数据都是上亿 ...
- Cocos2d-x 屏幕适配新解(比较全面比较详细)
本文出自 [无间落叶]原文地址:http://blog.leafsoar.com/archives/2013/05-10-19.html 为了适应移动终端的各种分辨率大小,各种屏幕宽高比,在 coco ...
- SqlServer2012——Select，分组，排序、插入
1.select 简单语句 --select语句 * --select子句 * AS result --select子句,可以将结果保存在result中 ~~~~~~~~~~~~~~~~~~~~~~~ ...
- mock api
模客:http://mock-api.com/ easy-mock:https://www.easy-mock.com/ easy-mock动不动就挂了,而且用起来特别卡,不知道为什么那么多人推荐-_ ...