<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,Chrome=1">
<meta http-equiv="X-UA-Compatible" content="IE=9">
<meta name="renderer" content="webkit">
<meta name="viewport" content="width=1190">
<title>#####</title>
<link href="common/css/common.css" rel="stylesheet">
<link href="common/css/Default_bootstrap4.css" rel="stylesheet" />
<link href="common/css/custom.min.css" rel="stylesheet" />
<script src="common/js/jquery-1.10.2.min.js"></script>
<script src="common/js/jquery.cookie.js"></script>
<script src="common/js/bootstrap.min.js"></script>
<link href="common/css/new-common.css" rel="stylesheet" />
<!--表格控件-->
<link href="common/css/bootstrap-table.min.css" rel="stylesheet" />
<script src="common/js/bootstrap-table.min.js"></script>
<script src="common/js/bootstrap-table-zh-CN.min2.js"></script>
</head>
<body style="background-color: #ffffff">
<iframe class="customHeader_iframe" scrolling="no" src="###############" style="border:none;width:100%;height:140px;overflow:hidden;"></iframe>
<br />
<br />
<div style="padding: 0px 450px;" >
<h3 class="PrimaryTitle" style="text-align: center;padding:10 20px;font-size:25px;Height:50px">######</h3>
<form id="form" >
<div class="apply-box">
<div class="apply-box-item">
<div class="form-group">
<label for="inputCompany" class="col-sm-4 control-label"><span class="text-danger"></span>###:</label>
<div class="col-sm-5" >
<input style="height:35px;width: 200px" type="text" class="form-control" id="name" name="name" onblur="name();" value="">
<span id = "na" class="help-block2" style = "display : none;">  请输入###</span>
</div>
</div>
</br></br></br>
<div class="form-group">
<label for="inputCompany" class="col-sm-4 control-label"><span class="text-danger"></span>####:</label>
<div class="col-sm-5" >
<input style="height:35px;width: 200px" type="text" class="form-control" id="id" name="id" onblur="id();" value="">
<span id = "i" class="help-block2" style = "display : none;">  请输入####</span>
</div>
<br />
<br />
<div class="button-bar" style="text-align:center">
<!-- button 按钮的选中和移出 变色问题 -->
<button class="btn-golden btn-lg btn-danger " onmouseover="this.style.backgroundImage='linear-gradient(to right,#b9916a,#b9916a)';" onmouseout="this.style.backgroundImage='linear-gradient(to right, rgb(228, 201, 149), rgb(185, 145, 106))';" onclick="search()" id="lg" type ="button">查询</button>
</div>
</div>
</div>
</div>
</form>
<table id="WRYList_Table"></table>
</div>
<br />
<br />
<iframe class="customHeader_iframe" scrolling="no" src="##############" style="border:none;width:100%;height:193px;overflow:hidden;"></iframe>
</body>
</html>
<script type="text/javascript">
var data;
//读取txt文件数据
$(function () {
var xhr = new XMLHttpRequest();
//txt数据文件跟本jsp页面在同一目录下
xhr.open("get", "./******.txt", true);
xhr.send();
xhr.onreadystatechange = function() {
if(xhr.readyState == 4 && xhr.status == 200) {
//xhr.responseText 是文件里的全内容,这里转成了数组;
data=eval('(' + xhr.responseText + ')');
Load_WRYTable();
} else if(xhr.status == 404) {
console.log(xhr.status);
}
};
});
//提交申请
function search() {
$("#lg").text("查询中...");
$.ajax({
type: "POST",
dataType: "json",
async: true,
url: webRoot + '*********',
data: $('#form').serialize(),
success: function (fhdata) {
if(fhdata.data=="err"){
alert("请正确填写查询信息!");
$("#lg").text("查询");
}else{
data = fhdata.data;
Load_WRYTable();
$("#lg").text("查询");
}
},
error : function(err) {
console.log(err);
alert("系统繁忙,请稍候再试!");
$("#lg").text("查询");
}
});
}
function Load_WRYTable() {
console.log(data);
var $WryList = $("#WRYList_Table");
$WryList.bootstrapTable('destroy');
$WryList = $("#WRYList_Table").bootstrapTable({
method: 'post',
contentType: "application/json;charset=UTF-8", //必须要有!!!!
striped: false, //是否显示行间隔色
classes: 'table table-hover table-Vmid',
pageNumber: 1, //初始化加载第一页,默认第一页
data: data,//josn数据包
//queryParamsType: 'limit', //查询参数组织方式
//queryParams: Total_TaskList_queryParams, //请求服务器时所传的参数
pagination: true, //是否分页
sidePagination: 'client', //分页方式:client客户端分页,server服务端分页(*)
pageSize: 10, //单页记录数
pageList: [5, 10, 25, 100], //分页步进值
search: true,
showRefresh: false, //刷新按钮
showColumns: false,
clickToSelect: true, //是否启用点击选中行
toolbarAlign: 'center', //工具栏对齐方式
//buttonsAlign: 'right', //按钮对齐方式
toolbar: '#wryList_toolbar', //指定工作栏
onLoadSuccess: function (status) { //加载成功时执行
alert("数据加载成功 " + status);
},
onLoadError: function (status) { //加载失败时执行
alert("数据加载失败 " + status);
},
columns: [
{
title: '####1',
field: '****1',
width: 60,
height: 40,
},
{
title: '####2',
field: '****2',
width: 10,
height: 40,
},
{
title: '####3',
field: '****3',
width: 100,
height: 40,
},
{
title: '####4',
field: '****4',
width: 20,
height: 40,
},
],
locale: 'zh-CN', //中文支持,
responseHandler: function (res) {
//在ajax获取到数据,渲染表格之前,修改数据源
return res;
},
});
}
</script>