반응형
<!DOCTYPE html>
<html>
<head>
<title><%= title %></title>
<link rel='stylesheet' href='/stylesheets/style.css' />
<% include ./partials/head %>
</head>
<% include ./partials/nav %>
<div class="container-fluid">
<div class="row">
<div class="col-lg-2">
<h3 class="mt-lg-5">원주문 리스트</h3>
</div>
<div class="col-lg-10">
<button class="btn btn-primary mt-lg-5" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
Search Box
</button>
</div>
</div>
<div class="row mt-2">
<div class="collapse col-lg-12" id="collapseExample">
<div class="card card-body">
<form id="searchForm" action="/order/search" method="post">
<div class="form-row">
<div class="form-group form-group-sm col-sm-3">
<label for="txt_order_number">주문번호</label>
<input type="text" class="form-control input-sm" id="txt_order_number">
</div>
<div class="form-group form-group-sm col-sm-3">
<label for="select_partner">제휴사</label>
<select id="select_partner" class="form-control input-sm">
<option value="-1"></option>
<%
for(var i=0; i<partner_list.length; i++) {
%><option value="<%= partner_list[i].id %>"> <%= partner_list[i].name %> </option>
<% }
%>
</select>
</div>
<div class="form-group form-group-sm col-sm-3">
<label>발주날짜(From)</label>
<input type="date" class="form-control input-sm" id="date_from_order">
</div>
<div class="form-group col-sm-3">
<label>발주날짜(To)</label>
<input type="date" class="form-control input-sm" id="date_to_order">
</div>
</div>
<div class="form-row">
<div class="form-group form-group-sm col-3">
<label for="txt_order_number">상태</label>
<select id="select_status" class="form-control input-sm">
<option value="-1"></option>
<option value="complete">Complete</option>
<option value="check">Check</option>
</select>
</div>
<div class="form-group form-group-sm col-3">
<label for="txt_order_number">제휴사 상태</label>
<select id="select_partner_status" class="form-control input-sm">
<option value="-1"></option>
<option value="Complete">Complete</option>
<option value="Cancel">Cancel</option>
<option value="Return">Return</option>
</select>
</div>
</div>
<input type="submit" class="btn btn-primary" value="Search"/>
</form>
</div>
</div>
</div>
<div class="row mt-2 justify-content-end">
<div class="col-lg-2">
<select id="select_status" class="col" style="height: 34px">
<option value="COMPLETE">완료</option>
<option value="CANCEL">취소</option>
<option value="RETURN">반품</option>
<option value="CHECK">확인</option>
</select>
</div>
<div class="col-lg-1">
<button class="btn-sm btn-dark col" onclick="changeStatus()">상태변경</button>
</div>
</div>
<div class="row mt-3">
<div class="col-lg-12">
<table id="example" class="table table-striped" width="100%">
<thead class="thead-dark">
<tr>
<th><input type="checkbox" id="chk_all"/></th>
<th>No.</th>
<th>주문번호</th>
<th>발주날짜</th>
<th>제휴사명</th>
<th>상품명</th>
<th>수량</th>
<th>상태</th>
<th>비고</th>
<th>중복건수</th>
</tr>
</thead>
</table>
</div>
</div>
</div>
</body>
<script>
const abc = {
partner_id: 1,
offset: 1,
limit: 2,
sub_ojb : {
name : 'sub1',
age : 20
}
}
var table;
$(document).ready(function() {
table = $('#example').DataTable( {
"processing": true,
"serverSide": true,
"paging": true,
"pagingType" : 'full_numbers',
"lengthMenu": [[ 3, 20, 50, 100, -1 ], [ 3, 20, 50, 100, "All" ]],
"pageLength" : 20,
"lengthChange": true,
"searching": false,
"ordering": false,
//"responsive": true,
"contentType" : "application/json; charset=utf-8",
"ajax": {
"url":"http://localhost:3000/order/list",
"type":"POST",
"dataType":"json",
"contentType" : "application/json; charset=utf-8",
"data":function (d) {
// d.searchValue = {
// partner_id: 1,
// order_number: null,
// }
d.order_number = $("#txt_order_number").val();
d.partner_id = $("#select_partner option:selected").val();
d.order_from_date = $("#date_from_order").val();
d.order_to_date = $("#date_to_order").val();
return JSON.stringify(d);
},
// "dataSrc":function(json) {
// alert(json.data);
// return json.data;
// }
},
"columns": [
{ data: "id" },
{ data: "id" },
{ data: "order_id" },
{ data: "order_date" },
{ data: "partnerId" },
{ data: "product_name" },
{ data: "amount" },
{ data: "status" },
{ data: "note" },
{ data: "duplication_count"},
],
"columnDefs": [
{
order: false,
targets: 0,
render: function(data, type, row) {
return '<input type="checkbox" id="chk' + data + '" value="' + data + '">';
},
width: '3%'
},
{
targets: 1,
width: '3%'
},
{
targets: 3,
render: function(data, type, row) {
return data.substring(0, 10);
},
width: '10%'
},
{
targets: 4,
render: function(data, type, row) {
return row.partner.name;
},
width: '10%'
},
{
targets: 5,
render: $.fn.dataTable.render.ellipsis(10)
}
],
"rowCallback" : function( row, data ) {
if( Number(data.duplication_count) >= 2 ) {
$('td', row).css('background-color', '#ff6666');
}
},
"dom": 'lBrtip',
"buttons": [ {
extend: 'excelHtml5',
customize: function (xlsx) {
var sheet = xlsx.xl.worksheets['sheet1.xml'];
var sSh = xlsx.xl['styles.xml'];
var lastXfIndex = $('cellXfs xf', sSh).length - 1;
// Loop over the cells in column `C`
var s4 = '<fill xmlns="http://schemas.openxmlformats.org/spreadsheetml/2006/main"><patternFill xmlns="http://schemas.openxmlformats.org/spreadsheetml/2006/main" patternType="solid"><fgColor rgb="ff0000"/><bgColor rgb="ff0000"/></patternFill></fill>';
sSh.childNodes[0].childNodes[2].innerHTML += s4;
var s1 = '<xf numFmtId="300" fontId="0" fillId="0" borderId="0" applyFont="1" applyFill="1" applyBorder="1" xfId="0" applyNumberFormat="1"/>';
var s2 = '<xf numFmtId="0" fontId="2" fillId="5" borderId="0" applyFont="1" applyFill="1" applyBorder="1" xfId="0" applyAlignment="1">' +
'<alignment horizontal="center"/></xf>';
var s3 = '<xf numFmtId="0" fontId="0" fillId="6" borderId="0" applyFont="0" applyFill="1" applyBorder="0" xfId="0" applyAlignment="0" />';
//sSh.childNodes[0].childNodes[0].innerHTML += n1;
sSh.childNodes[0].childNodes[5].innerHTML += s1 + s2 + s3;
var fourDecPlaces = lastXfIndex + 3;
var greyBoldCentered = lastXfIndex + 2;
$('row:not(:first, :nth-child(2))', sheet).each(function () {
if( parseInt($('c[r^="J"]', this).text()) >= 2 ) {
$('c', this).each(function() {
$(this).attr('s', fourDecPlaces);
});
}
});
}
}],
});
$(".dt-button").addClass('btn-success');
} );
$('#chk_all').on('click', function() {
var rows = table.rows().nodes();
$('input[type="checkbox"]', rows).prop('checked', this.checked);
});
$("#searchForm").submit(function(e) {
e.preventDefault();
$('#example').DataTable().search('').draw();
});
function changeStatus() {
const rows = table.rows().nodes();
const cols = $('input[type="checkbox"]:checked', rows);
const selected_status = $('#select_status option:selected').val();
let order_id_list = [];
for(let i=0; i<cols.length; i++) {
order_id_list.push(cols[i].value);
}
const paramData = {
order_id_list : order_id_list,
status_code : selected_status
}
$.ajax({
url: 'http://localhost:3000/order/status',
type: 'POST',
contentType : "application/json; charset=utf-8",
dataType:"json",
data: JSON.stringify(paramData),
success: function(json) {
alert(json);
table.search('').draw();
}
});
}
</script>
</html>
body table tr {
line-height: 0.8 !important;
}
button.buttons-html5 {
float: right;
width: 140px;
border-radius: 5%;
}
반응형
'엉터리 개발 이야기 > 개인프로젝트' 카테고리의 다른 글
| Datatables row height, column width, column data ellipsis (0) | 2018.12.06 |
|---|---|
| 제휴사 컬럼 정보 (0) | 2018.12.05 |
| [datatables] column background color (0) | 2018.12.05 |
| Datatables excel export 예제(cell style 설정) (0) | 2018.12.05 |
| Sequelize Association (0) | 2018.12.03 |