<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="UTF
-8">
<link href="../css/
bootstrap.min.css" rel="stylesheet" />
<link href="../css/data
tables.min.css" rel="stylesheet" />
<link href="../css/jquery.datetimepicker.css" rel="stylesheet" />
<script type="text/javascript" src="../../../js/date.format.js"></script>
<script src="../js/jquery.min.js"></script>
<script type="text/javascript" src="../../../js/jquery.datetimepicker.full.js"></script>
<script src="../js/jquery.form.min.js"></script>
<script src="../js/
bootstrap.bundle.min.js"></script>
<script src="../../js/data
tables.min.js"></script>
<script type="text/javascript" src="../../../js/buttons.html5.min.js"></script>
<script src="../../js/datav.min.vue.js"></script>
<style>
.search
-span
{
background
-color: LightSteelBlue;
}
.row
-div
-20
{
margin: 20px;
}
.row
-div
-10
{
margin: 10px;
}
.row
-div
-5
{
margin: 5px;
}
.custom
-tooltip
{
--bs
-tooltip
-bg: var(
--bs
-secondary);
}
</style>
</head>
<body>
<!
-- search form
-->
<form id="search_form" action="../Controller/getTraceabilityList.ashx" method="post"
enctype="application/x
-www
-form
-urlencoded" onsubmit="loadData
Table();return false;">
<div class="row row
-div
-20">
<div class="col
-3">
<div class="row">
<div class="col
-12">
<div class="input
-group">
<span class="input
-group
-text search
-span">生產單號</span>
<input id="base
-id" name="base
-id" type="text" class="form
-control" />
</div>
</div>
<div class="col
-12">
<div class="input
-group">
<span class="input
-group
-text search
-span">出貨單號</span>
<input type="text" class="form
-control" disabled />
</div>
</div>
<div class="col
-12">
<div class="input
-group">
<span class="input
-group
-text search
-span">日期</span>
<input id="start
-time" name="start
-time" type="text" class="form
-control" autocomplete="off" />
<input id="end
-time" name="end
-time" type="text" class="form
-control" autocomplete="off" />
</div>
</div>
</div>
</div>
<div class="col
-1">
</div>
<div class="col
-8">
<div class="row">
<div class="col
-12">
<div class="input
-group">
<span class="input
-group
-text search
-span">料號</span>
<input id="parn
-no" name="parn
-no" type="text" class="form
-control" /><!
--required
-->
<span class="input
-group
-text search
-span">批號</span>
<input name="batch
-no" type="text" class="form
-control" />
<span class="input
-group
-text search
-span">DC</span>
<input name="dc" type="text" class="form
-control" />
<span class="input
-group
-text search
-span">版本</span>
<input name="version" type="text" class="form
-control" />
</div>
</div>
<div class="col
-10">
<div class="input
-group">
<span class="input
-group
-text search
-span">客戶料號</span>
<input type="text" class="form
-control" disabled />
<span class="input
-group
-text search
-span">客戶批號</span>
<input type="text" class="form
-control" disabled />
<span class="input
-group
-text search
-span">機臺編號</span>
<input name="machine
-no" type="text" class="form
-control" />
</div>
</div>
<div class="col
-12">
<div class="input
-group">
<span class="input
-group
-text search
-span">站別</span>
<input id="station" name="station" type="text" readonly class="form
-control" autocomplete="off" />
<button type="button" onclick="showStationModal()" class="btn btn
-outline
-primary">
選擇站別</button>
<span class="input
-group
-text search
-span">WPNL 號</span>
<input name="wpnl
-no" type="text" class="form
-control" disabled />
<span class="input
-group
-text search
-span">SPNL 號</span>
<input name="spnl
-no" type="text" class="form
-control" disabled />
<span class="input
-group
-text search
-span">PCS 號</span>
<input name="pcs
-no" type="text" class="form
-control" disabled />
</div>
</div>
<div class="col
-8">
<div class="input
-group">
<span class="input
-group
-text search
-span">Bacode</span>
<input id="Code
-no" name="Code
-no" type="text" class="form
-control" />
<button id="search
-btn" class="btn btn
-primary">查詢</button>
</div>
</div>
</div>
</div>
</div>
<div class="row row
-div
-10">
<div class="col
-11">
<input id="reject" name="checkColumn" type="checkbox" title="test" class="btn
-check"
onchange="checkboxChange($(this))" autocomplete="off" />
<label for="reject" class="btn btn
-outline
-success" data
-bs
-toggle="tooltip" data
-bs
-placement="top"
data
-bs
-custom
-class="custom
-tooltip" data
-bs
-title="AOI / OS / VI">
不良率</label>
<input name="reject" type="text" value="N" style="display: none" />
<input id="scrap" name="checkColumn" type="checkbox" class="btn
-check" onchange="checkboxChange($(this))"
autocomplete="off" />
<label for="scrap" class="btn btn
-outline
-success" data
-bs
-toggle="tooltip" data
-bs
-placement="top"
data
-bs
-custom
-class="custom
-tooltip" data
-bs
-title="AOI / OS / VI">
報廢率</label>
<input name="scrap" type="text" value="N" style="display: none" />
<input id="ipqc" name="checkColumn" type="checkbox" class="btn
-check" onchange="checkboxChange($(this))"
autocomplete="off" disabled />
<label for="ipqc" class="btn btn
-outline
-success">
IPQC</label>
<input name="ipqc" type="text" value="N" style="display: none" />
<input id="oqc" name="checkColumn" type="checkbox" class="btn
-check" onchange="checkboxChange($(this))"
autocomplete="off" />
<label for="oqc" class="btn btn
-outline
-success">
OQC 批退率</label>
<input name="oqc" type="text" value="N" style="display: none" />
<input id="mrb" name="checkColumn" type="checkbox" class="btn
-check" onchange="checkboxChange($(this))"
autocomplete="off" />
<label for="mrb" class="btn btn
-outline
-success">
MRB 報廢率</label>
<input name="mrb" type="text" value="N" style="display: none" />
</div>
</div>
<div class="row row
-div
-10">
<div class="col
-12">
<input id="materiel" name="checkColumn" type="checkbox" class="btn
-check" onchange="checkboxChange($(this))"
autocomplete="off" disabled />
<label for="materiel" class="btn btn
-outline
-success">原物料異常</label>
<input name="materiel" type="text" value="N" style="display: none" />
<input id="eim" name="checkColumn" type="checkbox" class="btn
-check" onchange="checkboxChange($(this))"
autocomplete="off" />
<label for="eim" class="btn btn
-outline
-success">設備 A 級告警數</label>
<input name="eim" type="text" value="N" style="display: none" />
<input id="mes" name="checkColumn" type="checkbox" class="btn
-check" onchange="checkboxChange($(this))"
autocomplete="off" />
<label for="mes" class="btn btn
-outline
-success">MES 設備維修記錄</label>
<input name="mes" type="text" value="N" style="display: none" />
<input id="potion
-oos" name="checkColumn" type="checkbox" class="btn
-check" onchange="checkboxChange($(this))"
autocomplete="off" disabled />
<label for="potion
-oos" class="btn btn
-outline
-success">藥水 OOS 異常點數</label>
<input name="potion
-oos" type="text" value="N" style="display: none" />
<input id="potion
-ooc" name="checkColumn" type="checkbox" class="btn
-check" onchange="checkboxChange($(this))"
autocomplete="off" disabled />
<label for="potion
-ooc" class="btn btn
-outline
-success">藥水 OOC 異常點數</label>
<input name="potion
-ooc" type="text" value="N" style="display: none" />
<input id="product
-oos" name="checkColumn" type="checkbox" class="btn
-check" onchange="checkboxChange($(this))"
autocomplete="off" disabled />
<label for="product
-oos" class="btn btn
-outline
-success">產品 OOS 異常點數</label>
<input name="product
-oos" type="text" value="N" style="display: none" />
<input id="product
-ooc" name="checkColumn" type="checkbox" class="btn
-check" onchange="checkboxChange($(this))"
autocomplete="off" disabled />
<label for="product
-ooc" class="btn btn
-outline
-success">產品 OOC 異常點數</label>
<input name="product
-ooc" type="text" value="N" style="display: none" />
<input id="great
-exception" name="checkColumn" type="checkbox" class="btn
-check"
onchange="checkboxChange($(this))" autocomplete="off" />
<label for="great
-exception" class="btn btn
-outline
-success">重大異常</label>
<input name="great
-exception" type="text" value="N" style="display: none" />
<input id="rework" name="checkColumn" type="checkbox" class="btn
-check" onchange="checkboxChange($(this))"
autocomplete="off" disabled />
<label for="rework" class="btn btn
-outline
-success">重工</label>
<input name="rework" type="text" value="N" style="display: none" />
<input id="exception
-handle" name="checkColumn" type="checkbox" class="btn
-check"
onchange="checkboxChange($(this))" autocomplete="off" disabled />
<label for="exception
-handle" class="btn btn
-outline
-success">異常處置</label>
<input name="exception
-handle" type="text" value="N" style="display: none" />
<input id="complaint" name="checkColumn" type="checkbox" class="btn
-check" onchange="checkboxChange($(this))"
autocomplete="off" disabled />
<label for="complaint" class="btn btn
-outline
-success">客訴</label>
<input name="complaint" type="text" value="N" style="display: none" />
</div>
</div>
<div class="row row
-div
-10">
<div class="col
-12">
<input id="only
-exception" name="checkColumn" type="checkbox" class="btn
-check" onchange="checkboxChange($(this))"
autocomplete="off" />
<label for="only
-exception" class="btn btn
-outline
-success">只看異常</label>
<input name="only
-exception" type="text" value="N" style="display: none" />
<input id="all" type="checkbox" class="btn
-check" onchange="changeAll($(this))" autocomplete="off" />
<label for="all" class="btn btn
-outline
-success">ALL</label>
<input name="type" type="text" value="list" style="display: none" />
<input id="isSearching" type="text" value="N" style="display: none" />
<button id="submit
-btn" type="submit" class="btn btn
-primary" onclick="return submit
-btn_onclick()">查詢</button>
</div>
</div>
</form>
<!
-- data
table -->
<div class="row row
-div
-20">
<div class="
table-responsive col
-lg
-12">
<
table id="
table_id" class="display nowrap
table table-primary
table-striped
table-hover text
-center align
-middle">
<thead>
<tr id="
table_head_id">
</tr>
</thead>
<tbody id="tbody_id">
</tbody>
</
table>
</div>
</div>
<!
-- Station Modal
-->
<div id="station
-modal" class="modal fade" tabindex="
-1" data
-bs
-backdrop="static"
data
-bs
-keyboard="false" aria
-labelledby="staticBackdropLabel" aria
-hidden="true">
<div class="modal
-dialog modal
-lg modal
-dialog
-scrollable">
<div class="modal
-content">
<div class="modal
-header">
<h5 class="modal
-title">
站別選擇</h5>
</div>
<div class="modal
-body">
<div class="row">
<div class="col
-4">
<input type="text" placeholder="站別名稱" onkeyup="screenStation($(this))" class="form
-control" />
</div>
</div>
<br />
<div id="station
-div" class="row">
</div>
</div>
<div class="modal
-footer">
<button type="button" class="btn btn
-secondary" data
-bs
-dismiss="modal">
關閉</button>
<button type="button" onclick="clearStation()" class="btn btn
-danger">
清除</button>
<button type="button" onclick="confirmStation()" class="btn btn
-primary" data
-bs
-dismiss="modal">
確認</button>
</div>
</div>
</div>
</div>
<!
-- Info Modal
-->
<div id="info
-modal" class="modal fade" tabindex="
-1" aria
-labelledby="exampleModalLabel"
aria
-hidden="true">
<div class="modal
-dialog modal
-xl modal
-dialog
-centered modal
-dialog
-scrollable">
<div class="modal
-content">
<div class="modal
-header">
<h5 id="modal
-head
-id" class="modal
-title">
</h5>
<button type="button" class="btn
-close" data
-bs
-dismiss="modal" aria
-label="Close">
</button>
</div>
<div id="modal
-content
-id" class="modal
-body">
</div>
<div class="modal
-footer">
<button type="button" class="btn btn
-secondary" data
-bs
-dismiss="modal">
Close</button>
</div>
</div>
</div>
</div>
<script type="text/javascript">
var
table;
const tooltipTriggerList = document.querySelectorAll('[data
-bs
-toggle="tooltip"]');
const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new
bootstrap.Tooltip(tooltipTriggerEl));
$(function () {
//得到当前时间
var now = new Date();
var endDate = now.format('Y
-m
-d H:i');
now.setTime(now.getTime()
- 60 * 60 * 1000);
var startDate = now.format("Y
-m
-d H:i");
$('#start
-time').datetimepicker({
format: 'Y
-m
-d H:i',
step: 1,
value: startDate
});
$('#end
-time').datetimepicker({
format: 'Y
-m
-d H:i',
step: 1,
value: endDate
});
$.datetimepicker.setLocale('zh');
initStation();
//给行绑定选中事件
$('#
table_id tbody').on('click', 'tr', function () {
if ($(this).hasClass('selected')) {
$(this).removeClass('selected');
} else {
$('#
table_id tbody > tr').removeClass('selected');
$(this).addClass('selected');
}
});
});
function initStation() {
$.ajax({
url: '../Controller/getTraceabilityList.ashx',
data: {
'type': 'station'
},
success: function(result) {
$.each(result.data.list, function(i, n) {
$('#station
-div').append(
'<div class="col
-2">' +
'<div class="form
-check">' +
'<input id="' + n + '" value="' + n + '" type="checkbox" class="btn
-check" />' +
'<label for="' + n + '" class="btn btn
-outline
-success btn
-sm">' + n + '</label>' +
'</div>' +
'</div>'
);
});
}
});
}
// code輸入後查詢
function getSampleBoardData() {
var data;
var codeNo = document.getElementById("Code
-no").value;
$.ajax({
url: '../Controller/getTraceabilityList.ashx?type=codeNo',
data: {
'codeNo': codeNo
},
async: false,
success: function (result) {
data = result;
}
});
return data;
};
document.getElementById("search
-btn").addEventListener("click", function() {
var codeNo = document.getElementById("Code
-no").value;
var date = getSampleBoardData()
document.getElementsByName('base
-id')[0].value = date.list;
document.getElementsByName('batch
-no')[0].value = date.list1;
document.getElementsByName('parn
-no')[0].value = date.list2;
// error: function() {
// alert('查询失败，请重试');
// }
});
function showStationModal() {
clearStation();
var stationStr = $('#station').val();
var stationArr
if (stationStr != '') {
stationArr = stationStr.split(',');
}
$.each(stationArr, function(i, n) {
$(eval(n)).prop('checked', true);
});
var stationModal = new
bootstrap.Modal($("#station
-modal"));
stationModal.show();
}
function screenStation(input) {
var str = input.val().toUpperCase();
$('#station
-div > div').hide();
if (str == "") {
$('#station
-div > div').show();
} else {
$('[id*="' + str + '"]').parent().parent().show();
}
}
function clearStation() {
$('#station
-div input').prop('checked', false);
}
function confirmStation() {
var str = "";
$('#station
-div input:checked').each(function (i, e) {
str += ($(e).attr('id') + ',');
});
$('#station').val(str.substring(0, str.length
- 1));
}
function checkboxChange(checkbox) {
$('[name="' + checkbox.attr('id') + '"]').val(checkbox.prop('checked') ? 'Y' : 'N');
}
function changeAll(checkbox) {
var checkboxes = $('[name="checkColumn"]');
if (checkbox.prop('checked')) {
checkboxes.prop('checked', true);
} else {
checkboxes.prop('checked', false);
}
checkboxes.each(function (i, e) {
checkboxChange($(e));
});
}
function loadData
Table() {
if ($('#isSearching').val() === 'Y') {
alert('系統查詢中，請稍等···');
return;
}
$('#isSearching').val('Y');
if (!$('#reject').prop('checked') && !$('#scrap').prop('checked') && !$('#oqc').prop('checked') &&
!$('#mrb').prop('checked') && !$('#eim').prop('checked') && !$('#mes').prop('checked') &&
!$('#great
-exception').prop('checked') && $('#only
-exception').prop('checked')) {
$('#isSearching').val('N');
alert('未選擇異常項，無法只看異常。');
return;
}
let startTime = Date.parse($('#start
-time').val());
let endTime = Date.parse($('#end
-time').val());
let diffMin = Math.floor((endTime
- startTime) / 60000);
if (diffMin > 3 * 2
4 * 60) {
$('#isSearching').val('N');
alert('只能查询三天内数据。');
return;
}
if ($('#base
-id').val() == '' && $('#parn
-no').val() == '' &&
($('#reject').prop('checked') || $('#scrap').prop('checked') || $('#oqc').prop('checked') ||
$('#mrb').prop('checked') || $('#eim').prop('checked') || $('#mes').prop('checked') ||
$('#great
-exception').prop('checked'))) {
$('#isSearching').val('N');
alert('查询额外字段，请添加生产单号或批号条件进行筛选。')
return;
}
$('#submit
-btn').append(' <span class="spinner
-border spinner
-border
-sm" role="status" aria
-hidden="true"></span>');
$('#search_form').ajaxSubmit({
success: function (result) {
if (
table != null) {
table.destroy();
}
$('#
table_head_id').empty();
$('#tbody_id').empty();
$.each(result.data.head, function (i, n) {
$('#
table_head_id').append('<th class="text
-center">' + n + '</th>');
});
table = $('#
table_id').Data
Table({
data: result.data.list,
fixedHeader: true,
autoWidth: false,
scrollX: true,
scrollY: 700,
searching: 5000,
destroy: true,
deferRender: true, //延遲渲染
lengthMenu: [
[25, 50,
-1],
[25, 50, 'All']
],
dom: "<'row'<'col
-sm
-12 col
-md
-2'B><'col
-sm
-12 col
-md
-1'l><'col
-sm
-12 col
-md
-9'f>>"
+ "<'row'<'col
-sm
-12'tr>>"
+ "<'row'<'col
-sm
-12 col
-md
-5'i><'col
-sm
-12 col
-md
-7'p>>",
buttons: ['copy', 'excel'],
ordering: false
});
$('#submit
-btn').text('查詢');
$('#isSearching').val('N');
}
});
}
function showEIM(count, partId, lotId, machineNo, inDate, outDate) {
if (count <= 0) {
shwoInfoModal('設備 A 級告警明細', '該機臺告警數為 0');
return;
}
$.ajax({
async: false,
url: '../Controller/getTraceabilityList.ashx',
data: {
'type': 'eim',
'partId': partId,
'lotId': lotId,
'machineNo': machineNo,
'inDate': inDate,
'outDate': outDate
},
success: function (result) {
var content =
'<
table class="
table table-warning
table-striped
table-hover text
-nowrap">' +
'<thead><tr>' +
'<th>設備名稱</th>' +
'<th>告警編碼</th>' +
'<th>告警信息</th>' +
'<th>時間</th>' +
'</tr></thead>' +
'<tbody id="tbody_id">'
$.each(result.data.list, function (i, n) {
content +=
'<tr>' +
'<td>' + n.eqName + '</td>' +
'<td>' + n.eventCode + '</td>' +
'<td>' + n.eventMessage + '</td>' +
'<td>' + n.insertTime + '</td>' +
'</tr>'
});
content += '</tbody></
table>'
shwoInfoModal('設備 A 級告警明細', content);
}
});
}
function showMES(count, machineNo, inDate, outDate) {
if (count <= 0) {
shwoInfoModal('MES 設備維修記錄', '該機臺維修記錄為 0。');
return;
}
$.ajax({
async: false,
url: '../Controller/getTraceabilityList.ashx',
data: {
'type': 'mes',
'machineNo': machineNo,
'inDate': inDate,
'outDate': outDate
},
success: function (result) {
var content =
'<
table class="
table table-warning
table-striped
table-hover text
-nowrap">' +
'<thead><tr>' +
'<th>設備名稱</th>' +
'<th>記錄 1</th>' +
'<th>記錄 2</th>' +
'<th>記錄 3</th>' +
'<th>記錄
4</th>' +
'<th>記錄 5</th>' +
'<th>申請時間</th>' +
'<th>維修開始時間</th>' +
'<th>維修結束時間</th>' +
'</tr></thead>' +
'<tbody id="tbody_id">'
$.each(result.data.list, function (i, n) {
content +=
'<tr>' +
'<td>' + n.deptName + '</td>' +
'<td>' + n.notepad1 + '</td>' +
'<td>' + n.notepad
4 + '</td>' +
'<td>' + n.notepad5 + '</td>' +
'<td>' + n.notepad6 + '</td>' +
'<td>' + n.notepad7 + '</td>' +
'<td>' + n.entDate + '</td>' +
'<td>' + n.startRepairDate + '</td>' +
'<td>' + n.endRepairDate + '</td>' +
'</tr>'
});
content += '</tbody></
table>'
shwoInfoModal('設備 A 級告警明細', content);
}
});
};
function shwoInfoModal(title, content) {
$('#modal
-head
-id').text(title)
$('#modal
-content
-id').empty();
$('#modal
-content
-id').append(content);
var infoModal = new
bootstrap.Modal($("#info
-modal"));
infoModal.show();
}
function submit
-btn_onclick() {
}
</script>
</body>
</html>
为什么不在原界面直接显示查询结果，而是直接跳转到ashx文件
本文介绍了一种保持表格单元格文字不换行的CSS技巧，通过使用.table-responsive和设置th元素的word-break属性为keep-all，可以有效避免长文本在表格中自动换行，保持表格布局的整洁。
扫一扫
3万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
