fit : 테이블 스크롤 기능 추가

dev
Leeyh1121 5 months ago
parent 4f5df74a45
commit da87b03e71

@ -98,49 +98,51 @@
</div>
</form>
<form id="productList--${pageName}" name="productList">
<table class="table-layout-fixed dataTable datatables-ajax table table-bordered no-footer" id="DataTables_Table_0--productList" aria-describedby="DataTables_Table_0_info">
<thead class="sticky-thead">
<tr id="theadTr--productList"
data-by="by--productList" data-by-output="byOutput--productList" data-main-option="mainOption--productList" data-sub-option="subOption--productList">
<th style="width: 15.828px;text-align:center;" tabindex="0">No</th>
<th class="sorting sorting_asc" aria-sort="ascending" style="width: 223.719px;">제품명</th>
<th class="sorting" style="width: 146.156px;">제품코드</th>
<th class="sorting" style="width: 160.141px;">제품번호</th>
<th class="sorting" style="width: 160.141px;">제조 번호</th>
<th class="sorting" style="width: 160.141px;">제조 일련 번호</th>
<th class="sorting" style="width: 230.469px;">유효기간</th>
<th class="sorting" style="width: 230.469px;">최소 유통단위 수량</th>
<th class="sorting" style="width: 230.469px;">최소 유통단위</th>
<th class="sorting" style="width: 230.469px;">낱개 단위 수량</th>
<th class="sorting" style="width: 230.469px;">낱개 단위</th>
<th class="sorting" style="width: 230.469px;">폐기 수량</th>
<th class="sorting" style="width: 230.469px;">이미지</th>
</tr>
</thead>
<tbody id="tbody--productList">
</tbody>
<template id="productListRow--productList">
<tr data-key="{prductCd}">
<td style="text-align:center;"><input value="prductCd" onchange="userControl.select('{prductCd}', this.checked);" type="checkbox" class="form-check-input"></td>
<td class="cmn text-center" {onclick}="" {ondblclick}="">{prductCd}</td>
<td class="cmn text-center" {onclick}="" {ondblclick}="">{prductNm}</td>
<td class="cmn text-center" {onclick}="" {ondblclick}="">{mnfNo}</td>
<td class="cmn text-center" {onclick}="" {ondblclick}="">{mnfSeq}</td>
<td class="cmn text-center" {onclick}="" {ondblclick}="">{prdValidDe}</td>
<td class="cmn text-center" {onclick}="" {ondblclick}="">{minDistbQy}</td>
<td class="cmn text-center" {onclick}="" {ondblclick}="">{minDistbUnit}</td>
<td class="cmn text-center" {onclick}="" {ondblclick}="">{pceQy}</td>
<td class="cmn text-center" {onclick}="" {ondblclick}="">{pceUnit}</td>
<td class="cmn text-center" {onclick}="" {ondblclick}="">{dsuseQy}</td>
<td class="cmn text-center" {onclick}="" {ondblclick}=""></td>
</tr>
</template>
<template id="productListNotFound--productList">
<tr class="odd">
<td valign="top" colspan="13" class="dataTables_empty text-center">제품 정보를 찾지 못했습니다.</td>
</tr>
</template>
</table>
<div class="table-responsive ox-scroll oy-scroll h-px-300" id="table-responsive-1--${pageName}">
<table class="table-layout-fixed dataTable datatables-ajax table table-bordered no-footer" id="DataTables_Table_0--productList" aria-describedby="DataTables_Table_0_info">
<thead class="sticky-thead">
<tr id="theadTr--productList"
data-by="by--productList" data-by-output="byOutput--productList" data-main-option="mainOption--productList" data-sub-option="subOption--productList">
<th style="width: 15.828px;text-align:center;" tabindex="0">No</th>
<th class="sorting sorting_asc" aria-sort="ascending" style="width: 223.719px;">제품명</th>
<th class="sorting" style="width: 146.156px;">제품코드</th>
<th class="sorting" style="width: 160.141px;">제품번호</th>
<th class="sorting" style="width: 160.141px;">제조 번호</th>
<th class="sorting" style="width: 160.141px;">제조 일련 번호</th>
<th class="sorting" style="width: 230.469px;">유효기간</th>
<th class="sorting" style="width: 230.469px;">최소 유통단위 수량</th>
<th class="sorting" style="width: 230.469px;">최소 유통단위</th>
<th class="sorting" style="width: 230.469px;">낱개 단위 수량</th>
<th class="sorting" style="width: 230.469px;">낱개 단위</th>
<th class="sorting" style="width: 230.469px;">폐기 수량</th>
<th class="sorting" style="width: 230.469px;">이미지</th>
</tr>
</thead>
<tbody id="tbody--productList">
</tbody>
<template id="productListRow--productList">
<tr data-key="{prductCd}">
<td style="text-align:center;"><input value="prductCd" onchange="userControl.select('{prductCd}', this.checked);" type="checkbox" class="form-check-input"></td>
<td class="cmn text-center" {onclick}="" {ondblclick}="">{prductCd}</td>
<td class="cmn text-center" {onclick}="" {ondblclick}="">{prductNm}</td>
<td class="cmn text-center" {onclick}="" {ondblclick}="">{mnfNo}</td>
<td class="cmn text-center" {onclick}="" {ondblclick}="">{mnfSeq}</td>
<td class="cmn text-center" {onclick}="" {ondblclick}="">{prdValidDe}</td>
<td class="cmn text-center" {onclick}="" {ondblclick}="">{minDistbQy}</td>
<td class="cmn text-center" {onclick}="" {ondblclick}="">{minDistbUnit}</td>
<td class="cmn text-center" {onclick}="" {ondblclick}="">{pceQy}</td>
<td class="cmn text-center" {onclick}="" {ondblclick}="">{pceUnit}</td>
<td class="cmn text-center" {onclick}="" {ondblclick}="">{dsuseQy}</td>
<td class="cmn text-center" {onclick}="" {ondblclick}=""></td>
</tr>
</template>
<template id="productListNotFound--productList">
<tr class="odd">
<td valign="top" colspan="13" class="dataTables_empty text-center">제품 정보를 찾지 못했습니다.</td>
</tr>
</template>
</table>
</div>
</form>
</div> <!-- <div class="card"> -->
<!-- 업무 버튼 표시 -->
@ -309,7 +311,7 @@
let trs = empty ? [document.getElementById("$productListNotFound--productList").content.outerHTML]
: $P.productList.inStrings(foundTr.outerHTML, replacer);
$("#table-responsive--${pageName}")[0].changeContent(trs.join(), true, true);
$("#table-responsive--${pageName}")[0].changeContent(trs.join(), initScroll, noMore);
}
/**************************************************************************
@ -319,6 +321,13 @@
/**************************************************************************
* 사용자 함수(function)
**************************************************************************/
// 검색 자료 재조회
$P.fnRefreshList = () => {
$P.control.untilPageNum = $P.control.query.pageNum;
$P.control.query.fetchSize = $P.control.defaultFetchSize * $P.control.query.pageNum;
$P.control.load(1);
}
// 업무구분에 따른 URL 설정
$P.fnSetURL = (taskSeCd) => {
// $P.control.urls.create = wctx.url("/" + taskSeCd + "${infoPrefixUrl}" + "/040/create.do"); // 등록
@ -394,6 +403,7 @@
// 초기 화면 설정
$P.initForm = () => {
fnMakeScrollableTable($("#table-responsive--${pageName}")[0], $P.scrollDataList);
// Dialog 마우스로 드래그 할 수 있도록 설정.
//fnMakeDraggableDialog(document.getElementById($P.control.prefix + "Dialog"));
}

Loading…
Cancel
Save