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 >
<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 () {
});
}
时间： 2024-11-06 11:59:10