摘要：
1.待添加的参考。
1.需要添加的引用。
<script src="http://t.zoukankan.com/@Url.Content("~/js/jquery-2.1.1.js")"></script>
<script src="http://t.zoukankan.com/@Url.Content("~/js/bootstrap.min.js")"></script>
<script src="http://t.zoukankan.com/@Url.Content("~/js/bootstrap-table.js")"></script>
<script src="http://t.zoukankan.com/@Url.Content("~/js/bootstrap-table-zh-CN.js")"></script>
2.完整的HTML
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="http://t.zoukankan.com/@Url.Content("~/js/jquery-2.1.1.js")"></script>
<link href="http://t.zoukankan.com/@Url.Content("~/css/bootstrap.min.css")" rel="stylesheet">
<link href="http://t.zoukankan.com/@Url.Content("~/font-awesome/css/font-awesome.css")" rel="stylesheet">
<link href="http://t.zoukankan.com/@Url.Content("~/css/plugins/iCheck/custom.css")" rel="stylesheet">
<link href="http://t.zoukankan.com/@Url.Content("~/css/animate.css")" rel="stylesheet">
<link href="http://t.zoukankan.com/@Url.Content("~/css/style.css")" rel="stylesheet">
<script src="http://t.zoukankan.com/@Url.Content("~/js/jquery-ui-1.10.4.min.js")"></script>
<script src="http://t.zoukankan.com/@Url.Content("~/js/bootstrap.min.js")"></script>
<script src="http://t.zoukankan.com/@Url.Content("~/js/bootstrap-table.js")"></script>
<script src="http://t.zoukankan.com/@Url.Content("~/js/bootstrap-table-zh-CN.js")"></script>
<script src="http://t.zoukankan.com/@Url.Content("~/js/selectjs/bootstrap-select.js")"></script>
<link href="http://t.zoukankan.com/@Url.Content("~/js/selectjs/bootstrap-select.min.css")" rel="stylesheet" />
<script src="http://t.zoukankan.com/@Url.Content("~/js/selectjs/defaults-zh_CN.js")"></script>
<script src="http://t.zoukankan.com/@Url.Content("~/js/layer/layer.js")"></script>
<script src="http://t.zoukankan.com/@Url.Content("~/js/bootstrap.min.js")"></script>
<script src="http://t.zoukankan.com/@Url.Content("~/js/plugins/metisMenu/jquery.metisMenu.js")"></script>
<script src="http://t.zoukankan.com/@Url.Content("~/js/plugins/slimscroll/jquery.slimscroll.min.js")"></script>
<!-- Custom and plugin javascript -->
<script src="http://t.zoukankan.com/@Url.Content("~/js/inspinia.js")"></script>
<script src="http://t.zoukankan.com/@Url.Content("~/js/plugins/pace/pace.min.js")"></script>
<!-- iCheck -->
<script src="http://t.zoukankan.com/@Url.Content("~/js/plugins/iCheck/icheck.min.js")"></script>
<!-- Jvectormap -->
<script src="http://t.zoukankan.com/@Url.Content("~/js/plugins/jvectormap/jquery-jvectormap-2.0.2.min.js")"></script>
<script src="http://t.zoukankan.com/@Url.Content("~/js/plugins/jvectormap/jquery-jvectormap-world-mill-en.js")"></script>
<script src="http://t.zoukankan.com/@Url.Content("~/js/JsIFrame.js")"></script>
<script src="http://t.zoukankan.com/@Url.Content("~/js/layer/jquery.form.min.js")"></script>
<script src="http://t.zoukankan.com/@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 data-toggle="dropdown" href="https://tool.4xseo.com/article/193862.html">
<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 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="http://t.zoukankan.com/@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" style="margin-right:15px;">查 看</button>', ].join(''); } function operateFormatterRed(value, row, index) { return [ '<button type="button" style="margin-right:15px;">下 载</button>', ].join(''); } function operateFormatterSH(value, row, index) { return [ '<button type="button" 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 () { }); }