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 ,遇到不少 ...
随机推荐
- Linux-内存进程和软件安装
1 swap分区 swapon -s 查看swap分区 mkswap 某分区挂载点 swapon -a 分区 激活该swap swapoff 挂载点 取消swap分区 2 内存 free 查看内存空间 ...
- codevs 3269 混合背包（复习混合背包）
传送门 [题目大意]给出物品的数量.-1为无限个. [思路]混合背包.... [code] #include<iostream> #include<cstdio> #inclu ...
- php之创建jsonp接口调数据
jsonp跨域访问数据 首先在php内写jsonp调用接口 <?php//设置头部文件类型为json header('Content-type: application/json'); //将r ...
- __attribute__((noreturn))的用法
外文地址:http://www.unixwiz.net/techtips/gnu-c-attributes.html __attribute__ noreturn 表示没有返回值 This at ...
- js 拦截 窗体关闭事件
<script type="text/javascript"> <!-- window.onbeforeunload = onbeforeun ...
- linux之打包压缩命令
tar:主选项:[一条命令以下5个参数只能有一个]-c: --create 新建一个压缩文档,即打包-x: --extract,--get解压文件-t: --list,查看压缩文档里的文件目录-r:- ...
- PHP中正则表达式学习及应用(一)
1.正则表达式的介绍和作用 什么是正则表达式 在编写处理字符串的程序或网页时,经常会有查找符合某些复杂规则的字符串 的需要.正则表达式就是用于描述这些规则的语法. 例:在判断用户邮件地址格式.手机号码 ...
- E20190225-hm
seal n. 密封; 印章; 海豹; 封条; v. 密封; 盖章; 决定; 封上(信封); primitive adj. 原始的; 发展水平低的; 落后的; [生物学] 原生的; n. 原始 ...
- Lightoj1003【判环操作】
题意: 对于n个给出字符串a,b,理解成a在b之前办好这个事情,要求n个给出两个串,a都要在b之前完成: 题意: 所以一旦出现环就不行了: 以前在写最短路的时候,spfa就有一个判环,后来写着写着写到 ...
- 考虑实现Comparable接口
考虑实现Comparable接口 compareTo方法没有在Object中声明.相反,它是Comparable接口中唯一的方法.compareTo方法不但允许进行简单的等同性比较,而且允许执行顺 ...