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 ,遇到不少 ...
随机推荐
- [ZJOI 2010] 排列计数
[题目链接] https://www.lydsy.com/JudgeOnline/problem.php?id=2111 [算法] 一种比较好的理解方式是将该序列看成是一棵堆式存储的二叉树 那么问题转 ...
- 转C++的一点点
为什么突然放些这么水的东西?我还是个C++小萌新,XD [一 litTLE经验值] 1. 注意 C++里 自带pow(x,y) 使用是没问题,尤其是pow(x,0.333333)这种时候很有用.但是 ...
- poi word 转html (.DOC .DOCX )
注:不支持图片,支持表格 package com.bjhy.platform.report.commons; import java.io.BufferedWriter; import java.io ...
- PHP 单引号与双引号的区别 SQL中的使用
php单引号与双引号用法:引号嵌套方法 1.双引号内不能直接就再嵌套双引号 2.双引号与单引号互相嵌套使用 如: 双引号内直接嵌套单引号 echo "<script language= ...
- bzoj4833
$数论$ $这个题已经忘了怎么做了,也不想知道了,只记得看了3个小时$ $对于有gcd(f_i, f_j) = f_{gcd(i, j)}性质的数列,以下结论适用$ #include<bits/ ...
- python在三引号中使用变量
- Visual Studio Ultimate 2013 下载地址
VS2013_RTM_ULT_CHS.iso 文件大小:2.87G 百度网盘下载地址: http://pan.baidu.com/s/1bn4gavX 微软官网下载地址: http://downloa ...
- 解决在IE11浏览器上，css样式不起作用的问题
1.首先下载http://pan.baidu.com/s/1c1DA1Ew并运行; 2.在列表中找到.css双击出现Edit File Type; 3.将MIME Type中改为text/css,点击 ...
- linux中消息队列<一>
1 概念 (1)链表式结构组织,存放于内核. (2)通过队列标识来引用. (3)通过一个消息类型来索引指定的数据 2 创建消息队列 #include <sys/msg.h> int msg ...
- UVa 658 It's not a Bug, it's a Feature! (状态压缩+Dijstra)
题意:首先给出n和m,表示有n个bug和m个补丁.一开始存在n个bug,用1表示一个bug存在0表示不存在,所以一开始就是n个1,我们的目的是要消除所有的bug, 所以目标状态就是n个0.对于每个补丁 ...