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 ,遇到不少 ...
随机推荐
- hdu-5003 Osu!(水题)
题目链接: Osu! time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/65536 K (Java/Others) Prob ...
- https证书自签
https http over ssl = https 443/tcp ssl: v3 tls: ...
- Swift扩展
Swift中的「扩展」(extensions)和OC中的categories类似,只是Swift中的「扩展」没有名字.Swift中的「扩展」可以向一个已有的类/结构体/枚举类型添加新功能,这包括在没有 ...
- bootStrap效果图
http://www.ziqiangxuetang.com/bootstrap/bootstrap-tutorial.html
- 八、MyEclipse多次重装、删除注册表、重装系统激活都不成功，终极解决方法 - imsoft.cnblogs
MyEclipse(2010,2014)激活不成功的结论: [问题原因]激活不成功时,主要是激活的密钥文件.myeclipse.properties不在指定的位置.(一般都在D.E.F.G等盘符根目录 ...
- OpenService 打开一个已经存在的服务
SC_HANDLE WINAPI OpenService( _In_ SC_HANDLE hSCManager, _In_ LPCTSTR lpServiceName, _In_ DWORD dwDe ...
- java枚举类Enum方法简介(valueof,value,ordinal)
Enum作为Sun全新引进的一个关键字,看起来很象是特殊的class, 它也可以有自己的变量,可以定义自己的方法,可以实现一个或者多个接口. 当我们在声明一个enum类型时,我们应该注意到en ...
- C++11: Multi-core Programming – PPL Parallel Aggregation Explained
https://katyscode.wordpress.com/2013/08/17/c11-multi-core-programming-ppl-parallel-aggregation-expla ...
- Linux whereis 搜索命令位置
在学习 兄弟连 linux教学视频 的时候,我将所学的 linux 命令记录在我的博客中,方便自己查阅. 文件搜索命令: whereis 基础的命令 命令名称:whereis 命令的所在路径:/usr ...
- 201621123016 《Java程序设计》第七周学习总结
1. 本周学习总结 1.1 思维导图:Java图形界面总结 2.书面作业 1. GUI中的事件处理 1.1 写出事件处理模型中最重要的几个关键词. 关键词:事件源,事件监听器,事件处理方法,事件适配器 ...